You have to start somewhere so I opted to use DHTMLX to build a simple CSV file editor. The CSV files I am going to edit are
TAB delimited text files. Each file has a fixed number of columns with column names in the first row. Here is an example TAB delimited file. The idea is to load the file data into the grid. Tweak a few rows and save the result. By increasing the size of the CSV file we can gauge the performance of the grid. Let’s get started.
Using the DHTMLX grid requires some preparation.
- Create a local directory and edit J’s
~config/folders.cfg to reference the directory with the name
jpath '~GridDemo' should return the full directory path.
- Download the files in the GridDemo folder and copy them to
- Download the Standard Edition (Version 3.5) of DHTMLX. The distribution file
dhtmlxGrid.zip contains the grid source and supporting files.
- Extract the
/dhtmlxGrid/codebase/ directory from
dhtmlxGrid.zip and copy the entire directory tree to
- Also extract
dhtmlxGrid.zip and copy the directory to
When you’re finished the top-level of
~GridDemo will look like the following where names without extensions are directories.
calendar dhtmlxgrid.js GridDemo.ijs t100rows.txt
common dhtmlxgrid_skins.css imgs t5000rows.txt
dhtmlxcommon.js excells jodoval.png
dhtmlxgridcell.js ext skins
dhtmlxgrid.css favicon.ico t1000rows.txt
The main J script is
~GridDemo\GridDemo.ijs. Start JHS and load this file.
Then browse to this site.
If all goes well you will see the following
GridDemo page after pressing the
Edit Grid button.
Screenshot of GridDemo running on Chrome
To load and edit files enter their fully qualified names in the
Output boxes and press
Edit Grid. To edit a cell double-click it. To save changes press
Three test files
t5000rows.txt are included with the demo. On my test machines load times vary from fractions of a second for the smaller files to nine seconds for the largest. This is competitive with the basic
C# grid control and fast enough for serious work.