DHTMLX Docs & Samples Explorer

Setting custom attributes

Grid allows to set custom attributes for rows by the xml or using setRowAttribute grid method. To get attributes use getRowAttribute method.

Sales
Book Title
Author
Name: Value:  
serialize
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>    
 
 
 
<table>
<tr>
<td valign="top">
<select id="sel">
<option value="price">price</option>
<option value="date">date of publication</option>
</select>
<input type="button" name="a2" value="show attribute" onclick="showAttribute();" />
</td>
</tr>
<tr>
<td  valign="top">
<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div></td>
</tr>
<tr>
<td valign="top">
Name: <input type="text" id="val" size="18"> Value: <input type="text" id="txt" size="18">&nbsp; 
<input type="button" name="a2" value="add attribute to selected" onclick="addAttribute();" /></td> 
</td>
</tr>
</table>    
<a href="javascript:void(0)" onclick="mygrid.xml.row_attrs.push('price');mygrid.xml.row_attrs.push('date');alert(mygrid.serialize())">serialize</a>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales, Book Title, Author");
mygrid.setInitWidths("100,250,*");
mygrid.setColAlign("right,left");
mygrid.setColTypes("ed,ed,ed");
mygrid.setColSorting("int,str");
mygrid.init();
mygrid.setSerializationLevel(false, true);
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid_attr.xml");
function addAttribute() {
    var val = document.getElementById('val').value;
    var txt = document.getElementById('txt').value;
    if (!val)
        return;
    addAttrToSelect(val);
    //add attribute;
    mygrid.setRowAttribute(mygrid.getSelectedId(), val, txt);
    //register attribute for serialization;
    mygrid.xml.row_attrs.push(val);
}
function showAttribute() {
    alert(mygrid.getRowAttribute(mygrid.getSelectedId(), document.getElementById('sel').value));
}
function addAttrToSelect(value) {
    var z = document.createElement('option');
    z.value = value;
    z.appendChild(document.createTextNode(value))
        document.getElementById("sel").appendChild(z);
    z.selected = true;
}
</script>