Grid:api_toc_alpha. 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 The following method is responsible for getting sorting state: grid.getSortingState(); The method returns the array the first element of which is the index of the sorter column, and the second one is direction of sorting (“asc” or “des”).
Sorting Types The way of sorting depends on column sorting types. Sorting types are assigned to columns in the following way: Custom Sorting Stable Sorting. Grid:step_5_server_side_sorting. When we have 50,000 records in grid or just going to have but do not really have (as we work with Smart Rendering, with Dynamic Loading) client side sorting will not help a lot. Our grid just doesn't know all the values yet. So we need to move sorting to server side. How? Just relax. It is really simple. There will be 3 stages of the plan: Cancel client side sorting; Clear grid and load the data sorted on server side; Set position and direction of a marker in the grid header to show sorting direction.
To cancel client side sorting we need to enable sorting for the columns first. Mygrid.setColSorting("server,server,server"); The “server” sorting type means nothing for sorting routine of the grid, so it'll just ignore it. The column index the sorting type (“str”,”int”,”date”) the sorting direction (“asc”,”des”) And this function will work IN PROFESSIONAL EDITION of the grid. The above mentioned code does the following: mygrid.attachEvent("onBeforeSorting",sortGridOnServer); Paginal Output:dynamic loading. 50,000 records in grid with paging. Grid:toc. Grid:toc_dhtmlxgrid_step_by_step. Introduction. What is this all about? I've deleted a file recently.
In a few moments I understood that it was a mistake (not the only one that day, to be honest). One would think: “What can be easier?” Just double-click the Recycle Bin and… I 've been waiting for 3 minutes, scrolling down, waiting again. Now I'm going to show you why. Real Introduction Keeping thousands of records in grid is a common requirement for most business applications. DhtmlxGrid is the very component you need! This step-by-step tutorial will let you load 50,000 records into your grid and still have it working fast. Firstly, let me outline a problem. For example, you load a dataset with 10,000 records. The result of our calculation is 1+0.5+0.01*10000 = 101,5.
So we added some ingenious code to the grid and called this new possibility “Smart Rendering”, as our grid now needs to be smart enough to know which records to draw and which of them should be put off. There are two variants of Smart Rendering in dhtmlxGrid: Grid:syntax_templates. Description of XML Syntax XML Syntax in dhtmlxGrid is the following: <? Xml version='1.0' encoding='iso-8859-1'? ><rows><userdata name="NameOfGlobalUserDataBlock"></userdata><row id="unique_rowid"><userdata name="NameOfRowUserDataBlock"></userdata><cell>cell content</cell><cell><!
In PHP script, the following code for page header should be used: <? The user should bear in mind the following: <rows> node is mandatory. Defining Combo through XML The list of options for combo can be defined from XML in two ways: With column configuration the values will be set for all cells in a column: <rows><head><column type="co"> Combo column <option value="1"> First </option><option value="2"> Second </option><option value="3"> Third </option></column> For separate cells (professional version only): <rows><row id="some1"><cell> some </cell><cell> some </cell><cell xmlcontent="true">1<option value="1">The first</option><option value="2">The second</option></cell><cell> some </cell></row></rows> XML Syntax xmlA xmlB.
Grid:smart_rendering. Dhtmlxgrid_srnd.js required Smart Rendering mode increases overall grid performance working with big amounts of data by saving time on render operation that is most time consuming in dhtml. When this mode is activated, only those rows are rendered that are in the visible area. The user can apply it with already loaded content or activate dynamical loading to fetch rows from the server each time (or activate buffering additionally to decrease the number of server requests).
If the user activates dynamical loading, he should understand that rows that are not loaded yet can't be used in script methods (select, delete etc). The following method should be called before data loading takes place: mygrid.enableSmartRendering(mode,buffer); The parameters here are: mode(true|false) - enable|disable smart rendering; buffer - count of rows requested from the server by single operation, optional parameter; has sense only in dynamical loading mode. mygrid.enablePreRendering(buffer);
Grid:paging. Dhtmlxgrid_pgn.js required ( this functionality is available only in dhtmlxGrid PRO ) To turn paging on is the following: grid.enablePaging(mode,pageSize,pagesInGrp,pagingControlsContainer,showRecInfo,pagingStateContainer); The parameters the user should specify are the following: mode(true|false) - enable|disable paging mode; pageSize - set count of rows per page; pagesInGrp - set count of visible page selectors; pagingControlsContainer - id or container that will be used for showing paging controls; showRecInfo(true|false) - enable|disable showing of additional information about paging state; pagingStateContainer - id or container that will be used for showing paging state.
Changing Page There is the possibility to change the current pare in the grid from script. This can be executed in one of the following ways: Change Page grid.changePage(pageNum); // new active page Change Page Relatively grid.changePageRelative(ind); // correction ( -1,1,2, etc) to the current active page info_template: Grid:smart_rendering. Dhtmlxgrid_srnd.js required Smart Rendering mode increases overall grid performance working with big amounts of data by saving time on render operation that is most time consuming in dhtml. When this mode is activated, only those rows are rendered that are in the visible area. The user can apply it with already loaded content or activate dynamical loading to fetch rows from the server each time (or activate buffering additionally to decrease the number of server requests).
If the user activates dynamical loading, he should understand that rows that are not loaded yet can't be used in script methods (select, delete etc). The following method should be called before data loading takes place: mygrid.enableSmartRendering(mode,buffer); The parameters here are: mode(true|false) - enable|disable smart rendering; buffer - count of rows requested from the server by single operation, optional parameter; has sense only in dynamical loading mode. mygrid.enablePreRendering(buffer);