Adding a new row is quite simple in dhtmlxGrid with the help of the following method:
grid.addRow(new_id, text, ind);
The parameters are responsible for the following:
The user can provide values of a new row as a comma-separated list or as an array:
grid.addRow(123,"text1,text2",1); // or grid.addRow(124,["text1","text2"],2);
Any row in the grid can be easily deleted like this:
grid.deleteRow(row_id); grid.deleteSelectedRows(); // for removing selected row(s)
The user should specify id of the row in question - row_id.
There is also the possibility to add a new row from clipboard.
There is a method that should be used when the user needs to check whether a row with specified id exists:
var row = grid.doesRowExist(row_id);
This method returns true if the specified row exists, and false - if there is no such row.
The user can select a row from script in the following way:
grid.selectRow(r, fl, preserve, show);
Using this method, the system will select the specified row and its first cell. The parameters that should be specified are:
There is a method that is capable of selecting a grid row by its id:
grid.selectRowById(row_id, multiFL, show, call);
The parameters here are as follows:
There is possibility to select all rows in Grid:
grid.selectAll();
This method doesn't fire any events. Note, this method is incompatible with dynamic loading.
There are methods allowing to get id/index of the specified row quite easily:
var rId = grid.getRowId(ind); // get row id by its index var rInd = grid.getRowIndex(row_id); // get row index by its id
The methods return the following:
The following method allows to get id of the selected row:
var selId = grid.getSelectedId();
It returns id of the selected row in the grid (list of ids with default delimiter) or null if no row is selected.
There is also a method for getting the list of ids of all rows in the grid:
var rowsAll = grid.getAllRowIds(separator); // delimiter to use in the list should be specified
There is a method that allows to get ids of all nested rows for a specified row:
var nestIds = grid.getAllSubItems(rowId);
Ids of changed rows in the grid can be also got quite easily:
var chngIds = grid.getChangedRows();
The user can clear wasChanged state for all cells using clearChangedState() method.
List of Ids of all rows with checked exCell in the specified column can be got in the following way:
var checkIds = grid.getCheckedRows(col_ind);
The user should indicate col_ind - column index.
Current row id can be changed to a new one very easily by means of changeRowId() method:
grid.changeRowId(oldRowId, newRowId);
The parameters that should be specified are as follows:
The user has the opportunity to set new id for a row. To do this, index of this row and new id for this row should be specified:
grid.setRowId(ind, row_id);
The user can set row's text bold with the help of setRowTextBold() method. The parameter that should be specified for this method is id of the row in question:
grid.setRowTextBold(row_id);
To set row's text normal, the user should apply the following method:
grid.setRowTextNormal(row_id);
There also the possibility to set style for row text like this:
grid.setRowTextStyle(row_id, styleString);
The parameters here are:
There is the possibility to move any row in the grid. The user should include dhtmlxgrid_drag.js file into the page to make moving rows from script possible. Then the following method should be applied:
grid.moveRow(rowId,mode,targetId,targetGrid);
Parameters that should be specified are:
A more complex method for moving a row is the following (this method also requires dhtmlxgrid_drag.js file):
grid.moveRowTo(srowId,trowId,mode,dropmode,sourceGrid,targetGrid);
There are more parameters here in comparison with the previously mentioned method:
This method returns id of the moved item.
Any row in the grid can be moved one position down/up (if it is possible) indicating this row id:
grid.moveRowDown(row_id); grid.moveRowUp(row_id);
Grid rows are allowed to be displayed in multi-line mode (that is the default state for Mozilla), or to be displayed as single-line rows (IE only). To enable multi-line feature, the user needs to do the following:
grid.enableMultiline(true|false);
Row content can be copied to another existing row with the help of the following method:
grid.copyRowContent(from_row_id, to_row_id);
The parameters here are:
Rows hover on mouse over can be specified and enabled for rows in the grid through the following method:
grid.enableRowsHover(mode, cssClass);
The parameters here are:
Any row in dhtmlxGrid can be locked from script with the following method:
grid.lockRow(rowId, mode);
The following parameters should be specified:
There is the possibility to set row height that will be used in smart rendering mode for row calculation. The function should be used if the user applies custom skin for the grid that changes the default row height. The user should not forget to include dhtmlxgrid_srnd.js file into the page to make this functionality work.
grid.setAwaitedRowHeight(height);
The parameter here is {int} height - awaited height of the row in question.
Background color can be set for a grid row in the following way:
grid.setRowColor(row_id, color);
The user should specify:
To hide/show a grid row, use the following command:
grid.setRowHidden(id, state);
Note: This command doesn't affect row indexes, only visual appearance.
The parameters here are:
Method showRow() does the very thing:
grid.showRow(rowID); // the id of the row in question should be indicated
All rows in dhtmlxGrid can be deleted by means of clearAll() method:
grid.clearAll(); // deletes all rows in the grid // or grid.clearAll(true); // deletes all grid rows together with grid header
updateFromXML() method updates values of existing grid rows without reconstructing. As a result, it doesn't cause any visual glitches the in the grid and works significantly faster in comparison with full grid reconstruction:
grid.updateFromXML(url, insert_new, del_missed, afterCall);
The parameters here are as follows:
Note: this functionality doesn't work for buffering, tree grid, or rows in smart rendering mode.
The format of XML is exactly the same as the one used for initialization. The grid will update each row in the grid (corresponding to XML data with the same ids) with data from XML.
The user should use the following method to get count of rows in the grid (in case of dynamic mode, it will return expected count of rows):
grid.getRowsNum();