Adding a new row is quite simple in dhtmlxGrid with the help of the following method:

  <script>
      grid.addRow(new_id, text, ind);
  </script>

The parameters are responsible for the following:

• new_id - id of the new row;
• text - array|string of row's labels, may be a comma separated list or an array;
• ind - position of the row (optional), row is added to the last position by default.

The user can provide values of a new row as a comma-separated list or as an array:

  <script> 
      grid.addRow(123,"text1,text2",1);
          // or
      grid.addRow(124,["text1","text2"],2);
  </script>

Any row in the grid can be easily deleted like this:

  <script>
      grid.deleteRow(row_id);
      grid.deleteSelectedRows(); // for removing selected row(s)
  </script>

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:

  <script>
      var row = grid.doesRowExist(row_id);
  </script>

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:

  <script>
      grid.selectRow(r, fl, preserve, show);
  </script>

Using this method, the system will select the specified row and its first cell. The parameters that should be specified are:

• r - row index or row object;
• fl - if true, then call function on select;
• preserve - preserve previously selected rows (true) or not (false); set to false by default;
• show(true|false) - scroll the row to view, true by default.

There is a method that is capable of selecting a grid row by its id:

  <script>
      grid.selectRowById(row_id, multiFL, show, call);
  </script>

The parameters here are as follows:

• row_id - id of the row;
• multiFL - select multiple rows;
• show(true|false) - scroll the row to view, true by default;
• call(true|false) - true to call the function on select.

There are methods allowing to get id/index of the specified row quite easily:

  <script>
      var rId = grid.getRowId(ind); // get row id by its index
      var rInd = grid.getRowIndex(row_id); // get row index by its id
  </script>

The methods return the following:

• row id or null if there is no row with specified index;
• row index or -1 if there is no row with specified id.

The following method allows to get id of the selected row:

  <script>
      var selId = grid.getSelectedId();
  </script>

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:

  <script>
      var rowsAll = grid.getAllRowIds(separator); // delimiter to use in the list should be specified
  </script>

There is a method that allows to get ids of all nested rows for a specified row:

  <script>
      var nestIds = grid.getAllSubItems(rowId);
  </script>

Ids of changed rows in the grid can be also got quite easily:

  <script>
  var chngIds = grid.getChangedRows();
  </script>

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:

  <script>
      var checkIds = grid.getCheckedRows(col_ind);
 
    </script>

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:

  <script>
 
        grid.changeRowId(oldRowId, newRowId);
 
 
    </script>

The parameters that should be specified are as follows:

• oldRowId - row id that is going to be changed;
• newRowId - new row id.

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:

 
    <script>
        grid.setRowId(ind, row_id);
    </script>

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:

    <script>
        grid.setRowTextBold(row_id);
    </script>
 

To set row's text normal, the user should apply the following method:

    <script>
        grid.setRowTextNormal(row_id);
    </script>
 

There also the possibility to set style for row text like this:

    <script>
        grid.setRowTextStyle(row_id, styleString);
    </script>
 

The parameters here are:

• row_id - id of the row;
• styleString - style string in the common format (example: “color:red;border:1px solid gray;”).

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:

 
      <script>
          grid.moveRow(rowId,mode,targetId,targetGrid);
      </script>
 
 

Parameters that should be specified are:

• rowId - source row id;
• mode - moving mode (up,down,row_sibling);
• targetId - target row in row_sibling mode;
• targetGrid - used for moving between grids (optional).

A more complex method for moving a row is the following (this method also requires dhtmlxgrid_drag.js file):

    <script>
        grid.moveRowTo(srowId,trowId,mode,dropmode,sourceGrid,targetGrid);
    </script>
 

There are more parameters here in comparison with the previously mentioned method:

• srowId - source row id;
• trowId - target row id;
• mode - move or copy;
• dropmode - sibling or child;
• sourceGrid - target row in row_sibling mode;
• targetGrid - used for moving between grids (optional).

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:

 
      <script>
          grid.moveRowDown(row_id);
          grid.moveRowUp(row_id); 
      </script>
 
 

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:

    <script>
        grid.enableMultiline(true|false);
    </script>
 

Row content can be copied to another existing row with the help of the following method:

    <script>
        grid.copyRowContent(from_row_id, to_row_id);
    </script>
 

The parameters here are:

• from_row_id - id of the row to copy the content from;
• to_row_id - id of the row to copy the content to.

Rows hover on mouse over can be specified and enabled for rows in the grid through the following method:

    <script>
        grid.enableRowsHover(mode, cssClass);
    </script>
 

The parameters here are:

• mode(true|false) - enable|disable rows hover;
• cssClass - css class for hovering a row.

Any row in dhtmlxGrid can be locked from script with the following method:

    <script>
        grid.lockRow(rowId, mode);
    </script>
 

The following parameters should be specified:

• rowId - id of the row;
• mode(true|false) - lock|unlock the row in question.

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.

 
      <script>
          grid.setAwaitedRowHeight(height);
      </script>
 
 

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:

    <script>
        grid.setRowColor(row_id, color);
    </script>
 

The user should specify:

• row_id - id of the row;
• color - color value.

To hide/show a grid row, use the following command:

    <script>
        grid.setRowHidden(id, state);
    </script>
 

Note: This command doesn't affect row indexes, only visual appearance.

The parameters here are:

• ind - index of the column;
• state(true|false) - hide|show the row in question.

Method showRow() does the very thing:

    <script>
        grid.showRow(rowID); // id of the row in question should be indicated
    </script>
 

All rows in dhtmlxGrid can be deleted by means of clearAll() method:

    <script>
        grid.clearAll(); // deletes all rows in the grid
            // or
        grid.clearAll(true); // deletes all grid rows together with grid header
    </script>
 

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:

    <script>
        grid.updateFromXML(url, insert_new, del_missed, afterCall);
    </script>
 

The parameters here are as follows:

• url - updating data url;
• insert_new - if it is set to true, items new in XML will be inserted in the grid;
• del_missed - if it is set to true, rows missed in XML will be deleted from the grid;
• afterCall - function, will be executed after refreshing is completed.

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):

    <script>
        grid.getRowsNum();
    </script>