jQuery Grid Plugin - jqGrid

I know you can use it fairly easily by returning XML data.

The DataTable object has a method writeXML you can use to generate the XML very quickly.

You can use either PageMethods or create a web service with methods for exposing your data.

In my case, I have a web service that has multiple methods for providing data to my jqGrids.  Here is an example:

 [WebMethod(EnableSession = true)]
[ScriptMethod(UseHttpGet = true)]
public XmlDocument GetBranchHoldings()
{
 XmlDocument xmlDoc = new XmlDocument();

 if (HttpContext.Current.Request["id"] != null)
 {
  DataRow[] drHoldings = objScore.AccountHoldings.Select("guidBranch = '" +   HttpContext.Current.Request["id"].ToString() + "'");
  DataTable dtHoldings = objScore.AccountHoldings.Clone();

  foreach (DataRow dr in drHoldings)
  {
   dtHoldings.ImportRow(dr);
  }
  StringWriter sw = new StringWriter();
  dtHoldings.WriteXml(sw, false);
  xmlDoc.LoadXml(sw.ToString());
 }

 return xmlDoc;
}

On the client side, you specify xml as the datatype and use an xmlReader to specify the root, etc. so jqGrid knows how to load data into your grid.  Here is another example for the client side:

jQuery("#tblBuys").jqGrid({
         url: "Model.asmx/GetBranchSummary",
         datatype: "xml",
         recordtext: "Branch(s)",
         width: "850",
         shrinkToFit: true,
         xmlReader: {
            root: "DocumentElement",
            row: "Table1" ,
            page: "DocumentElement>currentpage",
            total: "DocumentElement>totalpages",
            records: "DocumentElement>totalrecords",
            repeatitems: false,
            id: "guidBranch"          
         },
         colNames: ['Branch Name', 'MarketValue', 'Pct', 'Market Value', 'Pct', 'Pct', 'Pct', 'Market Value', 'Pct'],
         colModel: [
            {name:'BranchName',index:'BranchName', width:160, sorttype:"string"},
            {name:'CurrentMV',index:'CurrentMV', width:80, align:"right",sortable:true},
            {name:'BranchActualWeight',index:'BranchActualWeight', width:80, align:"right",sortable:false},
            {name:'TargetMV',index:'TargetMV', width:80, align:"right",sortable:false},
            {name:'BranchTargetWeight',index:'BranchTargetWeight', width:80, align:"right",sortable:false},
            {name:'BranchHighLimitWeight',index:'BranchHighLimitWeight', width:80, align:"right",sortable:false},
            {name:'BranchLowLimitWeight',index:'BranchLowLimitWeight', width:80, align:"right",sortable:false},
            {name:'ProposedMV',index:'ProposedMV', width:80, align:"right",sortable:false},
            {name:'BranchProposedWeight',index:'BranchProposedWeight', width:80, align:"right",sortable:false}
         ],
         imgpath: "http://myserver/mysite/app_themes/default/resources/gridimages",
         pager: jQuery("#pgrBuys"),
         rowNum: 1,
         rowList:[5,10,15],
         viewrecords:true 
        });

 Reply if you still have questions or are confused 🙂