DHTMLX Docs & Samples Explorer

Move row by API

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

Sales
Book Title
Author
Price
In Store
Shipping
Bestseller
Date of Publication
Sales
Book Title
Author
Price
In Store
Shipping
Bestseller
Date of Publication
 

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>