How to Bind the JQGrid Dynamically

Question

I am new to JQGrid and JQUery please give me the solution?

I am developing the Sharepoint application2010 in that am using the JQGrid, i want to show the list data in the JQGrid. for this i have the dataset, using the dataset i need to bind the JQGrid, that dataset having differnet columns.

when ever we using the Noraml asp.net Gridview we can give the datasource directly like below no need to mention columns, in the same way i need to develop the JQGrid.

<asp:Gridview runat="server" id="GvSample"/>

in .cs

GVSample.datasource=ds;
gvSample.databind();

please help!

Answer 1

Firs get the details about the columns and then bind.

put this in the document.ready

$.ajax(
    {
       type: "POST",
       url: "SomeUrl/GetColumnsAndData",
       data: "",
       dataType: "json",
       success: function(result)
       {
            colD = result.colData;
            colN = result.colNames;
            colM = result.colModel;

            jQuery("#list").jqGrid({
                jsonReader : {
                    cell: "",
                    id: "0"
                },
                url: 'SomeUrl/Getdata',
                datatype: 'jsonstring',
                mtype: 'POST',
                datastr : colD,
                colNames:colN,
                colModel :colM,
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                viewrecords: true
            })
       },
       error: function(x, e)
       {
            alert(x.readyState + " "+ x.status +" "+ e.msg);   
       }
    });
setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50);

Answer 2

You can see the sample of JQGrid in asp.net here. It shows how to bind data source and column to JQGrid.

http://www.trirand.net/demoaspnet.aspx