Docs & Samples Explorer. dhtmlxgrid:creating_read_only_excells_formatters. Read-only excells are pretty simple.
They are only used to describe the way how the incoming data needs to be rendered. function eXcell_ro(cell){ //excell name is defined here if (cell){ //default pattern, just copy it this.cell = cell; this.grid = this.cell.parentNode.grid; } this.edit = function(){} //read-only cell doesn't have edit method this.isDisabled = function(){ return true; } // the cell is read-only, that's why it is always in the disabled state this.setValue=function(val){ this.setCValue(val); //actual data processing may be placed here, for now we just set value as it is } } eXcell_ro.prototype = new eXcell; // nest all other methods from base class While this snippet contains about 10 lines of code, most of it may be copy-pasted. There are only two places that need to be adjusted according to your needs: Name of the column; Data processing formula.
For example, the following code will create an excell which will render the cell value as button with a label: View topic - Custom excell func (row id) Grid:form_integration. DhtmlxGrid can integrate with a surrounding FORM - which means grid data will be sent as a part of form submitting (this functionality can be used to save changes in the grid, if you do not want to use dataprocessor library). To enable form integration you need: Include ext/dhtmlxgrid_form.js; Place grid's container inside the FORM tag.
That is all, no additional steps are to be taken. Submit Modes Grid can work in the following modes: Submit only the changed rows (the default mode); Submit all rows; Submit ID's of the selected rows; Submit values of the selected rows. "Submit Only the Changed Rows" Submit only the changed rows is the default mode. For each changed row a virtual input field will be added: The name of the field is [GRIDID]_[ROWID]_[CELLINDEX] where GRIDID - id of the container used for the grid; ROWID - id of the row in which a value was changed; CELLINDEX - the index of a cell inside the row. The value of the field is equal to the cell value. gridbox_r1_1=“new second”
Grid:sorting. Forcing Sorting The grid allows to sort data rows on the client side.
By default, sorting is triggered by a single click on any header row. If the grid has multiple rows, a click on any of them will trigger sorting. Sorting can be forced by JS code like this: grid.sortRows(col, type, order); The parameters here are: col - index of the column by which the grid should be sorted; type - sorting type (str,int,date), optional, by default sorting type is taken from column setting; order - sorting order (asc,des), optional, by default sorting order is based on the previous sorting operation.
Getting Sorting State. Grid:events. The following events are available in dhtmlxGrid: Drag-and-Drop Events: onBeforeDrag - occurs when drag operation is started; the event can be blocked (dhtmlxgrid 1.5.1 +); onDragIn/onDragOut - occur when an item is dragged to another potential target (the event can be blocked) or out of the potential target (dhtmlxgrid 1.5.1 +); onDrag - occurs when an item is dragged to another target and the mouse is released, the event can be blocked; onDrop - occurs when drag-and-drop operation is finished.
Editing Events: onEditCell - occurs 1-3 times depending on cell's editability; onRowDblClicked - occurs right after a row was double clicked, before a cell editor is opened by a dbl click. OnCheckbox - the event is deprecated, use onCheck event instead; occurs after the state was changed; onCheck - occurs after the state of a checkbox was changed; Grid: OnEditCell Event.