If you had implemented the JQGrid with Asp.net (c#) can you pl. give the samples of both asp.net side and JQuery. I am newbie to JQuery and JQGrid, and find it hard to understand how the  add, delete, search works. I undertstood from various forum responses that we need to use server side. I implemented a server side call to get all the records from database. But to update/edit, search and sort, do we still need to implement server side and provide separate url for each call.

   Pl. help.

My xml doesn't contain the number of pages or number of records.  Looking at your example, I coded this:

    jQuery(document).ready(function(){
        jQuery("#tblOutages").jqGrid({
            url:'Reporting.asmx/OutageReportXML',
            datatype:'xml',
            width:'850',
            shrinkToFit: true,
            xmlReader:{
                root:'NewDataSet',
                row:'Table1',
                repeatitems: true        
            },
            colNames:['Event Number','Description', 'Dispatch Group','Customers','Critical Customers','Feeder','Substation','Estimated Repair'],
            colModel:[
              {name:'EventNumber', index:'EventNumber', width:55, sortable:true, xmlmap:"EventNumber"},
              {name:'Description', index:'Description', width:80, sortable:false, xmlmap:"Description"},
              {name:'DispatchGroup', index:'DispatchGroup', width:55, sortable:true, xmlmap:"DispatchGroup"},
              {name:'Customers', index:'Customers', width:55, sortable:true, xmlmap:"Customers"},
              {name:'CriticalCustomers', index:'CriticalCustomers', width:55, sortable:true, xmlmap:"CriticalCustomers"},
              {name:'Feeder', index:'Feeder', width:55, sortable:true, xmlmap:"Feeder"},
              {name:'Substation', index:'Substation', width:55, sortable:true, xmlmap:"Substation"},
              {name:'EstimatedRepair', index:'EstimatedRepair', width:55, sortable:false, xmlmap:"EstimatedRepair"} ],
            pager:jQuery('#pager'),
            rowNum:10,
            rowList:[10,20,30],
            viewrecords:true,
            imgpath:'themes/green/images',
            caption:'My first grid'
          });
     });

My page gives a error of "Object doesn't support this property or method"

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 🙂

If you can provide the data described in docs you can use jqGrid.

Best Regards

Tony

I am populating datagrid using datatable, its a simple control of .net..

can i use jqgrid with datatable ...