How do I get jqGrid to work using ASP.NET + JSON on the backend?

Question

ok, I\'m back. I totally simplified my problem to just three simple fields and I\'m still stuck on the same line using the addJSONData method. I\'ve been stuck on this for d

Answer 1

Have you verified the tbl variable is getting reference to your jqgrid instance ?

Try adding an id to your table element and get the reference to the jqgrid like:

var thegrid = jQuery("#mytableid")[0];

Answer 2

maybe some help in this code here posted on stack overflow? jqgrid with asp.net webmethod and json working with sorting, paging, searching and LINQ -- but needs dynamic operators

Answer 3

This is a very old question, however, I was having the same issue just recently. I posted how I achieved this on a new blog I am attempting to get started.

There may be cleaner ways of doing this but this worked for me. So far I have been able to scale up from this example fairly easily. My next hurdle is getting the loadonce to work.

You can find my example here:

http://programming.webdad3.com/?p=3

Answer 4

Usually when you get the 'blah not a function' error with jqGrid it's because the correct module has not been loaded. The addJSONData function is defined in the grid.base.js file. Can you check your jqGridInclude() function in the jquery.jqGrid.js file and make sure that grid.base.js is being included as part of the initialization of your modules variable?

Answer 5

well i see one thing wrong here:

var tbl = jQuery('table.scroll')[0];  
 //tbl.addJSONData(objGridData); //error received: addJSONData not a function  

if you are indeed wondering why you are getting this error, it is because tbl does not have that function.

Edit: i got curious, and checked if jqGrid added those methods to the DOM reference object. and they did. (i checked using firebug here: http://trirand.com/jqgrid/jqgrid.html).

One thing that may be happening here is that you have multiple tables of class 'scroll' and your jquery is returning the wrong one.

Answer 6

Here is a simple example...

You will need https://github.com/douglascrockford/JSON-js/blob/master/json2.js for this to work...

and of course the usual jquery files.

Paste this to a webservice

// The lower case properties here are required to be lower case
// I cant find a way to rename them when they are serialized to JSON
// XmlElement("yournamehere") does not work for JSON :(
public class JQGrid
{
    public class Row
    {
        public int id { get; set; }
        public List<string> cell { get; set; }

        public Row()
        {
            cell = new List<string>();
        }
    }

    public int page { get; set; }
    public int total { get; set; }
    public int records { get; set; }
    public List<Row> rows { get; set; }

    public JQGrid()
    {
        rows = new List<Row>();
    }
}


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyWebService : System.Web.Services.WebService
{

    [WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]    
    public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection)
    {
        DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, "udsp_GetMyData",pageIndex, pageSize);

        if (ds == null || ds.Tables.Count < 1)
            throw new Exception("Unable to retrieve data.");

        JQGrid jqGrid = new JQGrid();

        int i = 1;
        foreach (DataRow dataRow in ds.Tables[0].Rows)
        {
            JQGrid.Row row = new JQGrid.Row();

            row.id = Convert.ToInt32(dataRow["MyIdColumn"]);

            row.cell.Add(dataRow["MyIdColumn"].ToString());

            row.cell.Add(dataRow["MyColumn"].ToString());


            projectGrid.rows.Add(row);
        }

        jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample
        jqGrid.records = jqGrid.rows.Count;
        jqGrid.total = jqGrid.rows.Count;  // Set this to total pages in your result...

        return jqGrid;
    }
}

Paste this to your aspx page

<script type="text/javascript">
function getData(pdata) {
    var params = new Object();
    params.page = pdata.page;
    params.pageSize = pdata.rows;
    params.sortIndex = pdata.sidx;
    params.sortDirection = pdata.sord;


    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/CLM/CLM.asmx/GetProjectGrid2",
        data: JSON.stringify(params),
        dataType: "json",
        success: function(data, textStatus) {
            if (textStatus == "success") {
                var thegrid = $("#testGrid")[0];
                thegrid.addJSONData(data.d);
            }
        },
        error: function(data, textStatus) {
            alert('An error has occured retrieving data!');
        }
    });
}

var gridimgpath = '/clm/css/ui-lightness/images';
$(document).ready(function() {
    $("#testGrid").jqGrid({
        datatype: function(pdata) {
            getData(pdata);
        },
        colNames: ['My Id Column', 'My Column'],
        colModel: [
            { name: 'MyIdColumn', index: 'MyIdColumn', width: 150 },
            { name: 'My Column', index: 'MyColumn', width: 250 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        imgpath: gridimgpath,
        pager: jQuery('#pagerdt'),
        sortname: 'id',
        viewrecords: false,
        sortorder: "desc",
        caption: "Projects",
        cellEdit: false
    });
});
</script>