Posted by & filed under Recent News.

KoolGrid is a DataGrid component implemented using HTML5, CSS3 and JavaScript with many powerful features including Hierarchical View, Auto Sum, Selective Control, Input Mask,Excel-style interface, etc. this release focused on enhancing Excel-style interface and has many new features including the following:


Excel Import – csv, xls, xlsx

In addition to the CSV format, you can now import both the XLS and XLSX formats.  (SheetJS, Open Source Excel Add-in is used)

Excel Import Demo

Excel Export – xls, xlsx

Until the previous version, you were able to export the grid data to an .xls file, but now you can export the grid data to both the XLS and XLSX formats.

Excel Export Demo

Excel Import with Options – csv, xls, xlsx

You can configure the display content and the default values when importing the CSV (XLS, XLSX) file using the Import Options

Excel Import with Options Demo

You can modify data while importing the CSV (XLS, XLSX) file using the parsing function (parseFunction) .e.g. the character, “_” in the data to be imported can be replaced to “-“ before importing.

Excel Import with parseFunction Demo

Excel Export with styles

You can export the grid data to the Excel file with styles using the exportColumnFormat method (KoolGrid API).

Paste Data into Row

You can paste a TSV-formatted data into an entire row using the Crtl-V key, and the data can be changed before pasting into the grid, for example, if the upper limit is 100, data higher than 100 can be set to 100.

Paste a TSV-formatted Data Demo

Changed Data before Pasting Demo

Marking Changed Rows

The changed rows (Added, Modified, Deleted) can be marked before applying the changes to database.

Marking Changed Rows Demo

Edit Icon

The edit icon can be displayed in the cell to indicate whether or not the cell is editable. The edit icon can be displayed when the grid is loaded or when the user mouse overs the cell.

Edit Icon Demo

Grouping by Mouse Drag and Drop

You can group the data by dragging the column header and dropping it into the grouping panel.

Grouping by Mouse Drag and Drop Demo

Column Filtering

The grid data can be filtered by the individual column.

Column Filtering Demo

Combining Header

Combining the terminal header is supported. Check the “Seoul / Tokyo” column (the combined column) in the following sample grid.

Combining Header Demo

Edit Multiple Lines

Multiple lines can be editied by setting the value of the itemEditor attribute to TextArea.

Edit Multiple Lines Demo

Other Useful Features

If the user double-clicks a column dividing line, the column width will be automatically resized to fit the largest cell.

Checkbox can be used in the column header. Checkbox in Column Header Demo

Rows can be deleted using CheckBox in the cell. Delete Rows using CheckBox Demo

Checkbox in the cell can be disabled or enabled. CheckBox Enable / Disable Demo