DHTMLX Docs & Samples Explorer

Move row by API

dhmlxGrid allows you to manipulate rows from API using moveRow method.

 

THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.
Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>        
<script  src="../../codebase/dhtmlxgridcell.js"></script>
<script  src="../../codebase/ext/dhtmlxgrid_drag.js"></script>
 
 
<table width="800">
    <tr>
        <td>
            <div id="gridbox" style="width:600px;height:270px;background-color:white;"></div>
        </td>
        <td>
<div><a href='#' onclick='mygrid.moveRow(mygrid.getSelectedId(),"up")'>Move selected row up</a></div>
<div><a href='#' onclick='mygrid.moveRow(mygrid.getSelectedId(),"down")'>Move selected  row down</a></div>
<div><a href='#' onclick='if (mygrid.getSelectedId()) mygrid.moveRow(mygrid.getSelectedId(),"row_sibling",mygrid2.getSelectedId(),mygrid2)'>Move selected  row after selected row in grid [2]</a></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="gridbox2" style="width:600px;height:270px;background-color:white;"></div>
        </td>
        <td>
<div><a href='#' onclick='mygrid2.moveRow(mygrid2.getSelectedId(),"up")'>Move selected row up</a></div>
<div><a href='#' onclick='mygrid2.moveRow(mygrid2.getSelectedId(),"down")'>Move selected  row down</a></div>
<div><a href='#' onclick='if (mygrid2.getSelectedId()) mygrid2.moveRow(mygrid2.getSelectedId(),"row_sibling",mygrid.getSelectedId(),mygrid)'>Move selected  row after selected row in grid [1]</a></div>
        </td>
    </tr>
        <td>&nbsp;</td>
    </tr>
</table>
<br>
<script>
function buildGrid(mygrid) {
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
    mygrid.setInitWidths("50,150,100,80,80,80,80,200");
    mygrid.setColAlign("right,left,left,right,center,left,center,center");
    mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");
    mygrid.getCombo(5).put(2, 2);
    mygrid.setColSorting("int,str,str,int,str,str,str,date");
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.loadXML("../common/grid_16_rows_columns_manipulations.xml");
}
mygrid = new dhtmlXGridObject('gridbox');
buildGrid(mygrid);
mygrid2 = new dhtmlXGridObject('gridbox2');
buildGrid(mygrid2);
</script>