This a real world example. Here we demonstarte a new feature of the formatter where the check box can be edited.
Point to column Enabled and right click a mouse. Mark or unmark child nodes.
We achive this using the context menu plugin from Chris Domigan.
Note: This will not work in Opera browsers, since Opera does not support context menu




HTML ... <table id="treegrid"></table> <div id="ptreegrid"></div> <script src="treegrid.js" type="text/javascript"> </script> Java Scrpt code ... jQuery("#treegrid2").jqGrid({ url: 'server.php?q=tree2', treedatatype: "xml", mtype: "POST", colNames:["id","Account","Acc Num", "Debit", "Credit","Balance","Enabled"], colModel:[ {name:'id',index:'id', width:1,hidden:true,key:true}, {name:'name1',index:'name', width:180}, {name:'num',index:'acc_num', width:80, align:"center"}, {name:'debit',index:'debit', width:80, align:"right"}, {name:'credit',index:'credit', width:80,align:"right"}, {name:'balance',index:'balance', width:80,align:"right"}, {name:'enbl', index:'enbl', width: 60, align:'center', formatter:'checkbox', editoptions:{value:'1:0'}, formatoptions:{disabled:false}} ], height:'auto', pager : "#ptreegrid2", treeGrid: true, ExpandColumn : 'name1', caption: "Treegrid example" }); var ci,rowid,ptr,td; $('#treegrid2').contextMenu('myMenu1', { bindings: { 'mchild': function(t) { if(ptr && rowid && ci >=1) { var gcn = $("#treegrid2").getFullTreeNode(ptr); $(gcn).each(function(i,v){ $("td:eq("+ci+")",this).each(function(){ if(!$("input[type='checkbox']",this).attr("checked")) { $(this).toggleClass("changed"); $("input[type='checkbox']",this).attr("defaultChecked",true).attr("checked","checked"); } }); }); ptr = rowid=ci=null; } }, 'umchild': function(t) { if(ptr && rowid && ci >=1) { var gcn = $("#treegrid2").getFullTreeNode(ptr); $(gcn).each(function(){ $("td:eq("+ci+")",this).each(function(){ if($("input[type='checkbox']",this).attr("checked")) { $(this).toggleClass("changed"); $("input[type='checkbox']",this).removeAttr("checked").attr("defaultChecked",""); } }); }); ptr = rowid=ci=null; } } }, onContextMenu: function(e, menu) { td = e.target || e.srcElement; ptr = $(td).parents("tr.jqgrow")[0]; ci = !$(td).is('td') ? $(td).parents("td:first")[0].cellIndex : td.cellIndex; if($.browser.msie) { ci = $.getAbsoluteIndex(ptr,ci); } if( ci >=1 ) { rowid = ptr.id; $('#treegrid2').setSelection(rowid,false); return true; } else { //alert(ptr.id+" : "+ptr.rowIndex+" : "+ci); return false; } } }); $("#jqContextMenu").addClass("ui-widget ui-widget-content").css("font-size","12px"); PHP code $node = (integer)$_REQUEST["nodeid"]; // detect if here we post the data from allready loaded tree // we can make here other checks // load at once grid $SQL = "SELECT account_id, name, acc_num, debit, credit, balance, level, lft, rgt FROM accounts ORDER BY lft"; $result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error()); if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) { header("Content-type: application/xhtml+xml;charset=utf-8"); } else { header("Content-type: text/xml;charset=utf-8"); } $et = ">"; echo "<?xml version='1.0' encoding='utf-8'?$et\n"; echo "<rows>"; echo "<page>1</page>"; echo "<total>1</total>"; echo "<records>1</records>"; // be sure to put text data in CDATA while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { echo "<row>"; echo "<cell>". $row[account_id]."</cell>"; echo "<cell>". $row[name]."</cell>"; echo "<cell>". $row[acc_num]."</cell>"; echo "<cell>". $row[debit]."</cell>"; echo "<cell>". $row[credit]."</cell>"; echo "<cell>". $row[balance]."</cell>"; echo "<cell>". rand(0,1)."</cell>"; echo "<cell>". $row[level]."</cell>"; echo "<cell>". $row[lft]."</cell>"; echo "<cell>". $row[rgt]."</cell>"; if($row[rgt] == $row[lft]+1) $leaf = 'true';else $leaf='false'; echo "<cell>".$leaf."</cell>"; echo "<cell>false</cell>"; echo "</row>"; } echo "</rows>";