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 days and no matter how I rework the ajax call, the json string, blah blah blah...I can NOT get this to work! I can't even get it to work as a function when adding one row of data manually. Can anyone PLEASE post a working sample of jqGrid that works with ASP.NET and JSON? Would you please include 2-3 fields (string, integer and date preferably?) I would be happy to see a working sample of jqGrid and just the manual addition of a JSON object using the addJSONData method. Thanks SO MUCH!! If I ever get this working, I will post a full code sample for all the other posting for help from ASP.NET, JSON users stuck on this as well. Again. THANKS!!

tbl.addJSONData(objGridData); //err: tbl.addJSONData is not a function!!

Here is what Firebug is showing when I receive this message:

• objGridData Object total=1 page=1 records=5 rows=[5]
○ Page "1"
Records "5"
Total "1"
Rows [Object ID=1 PartnerID=BCN, Object ID=2 PartnerID=BCN, Object ID=3 PartnerID=BCN, 2 more... 0=Object 1=Object 2=Object 3=Object 4=Object]
(index) 0
(prop) ID (value) 1 (prop) PartnerID (value) "BCN" (prop) DateTimeInserted (value) Thu May 29 2008 12:08:45 GMT-0700 (Pacific Daylight Time)
* There are three more rows

Here is the value of the variable tbl (value) 'Table.scroll'

<TABLE cellspacing="0" cellpadding="0" border="0" style="width: 245px;" class="scroll grid_htable"><THEAD><TR><TH class="grid_sort grid_resize" style="width: 55px;"><SPAN> </SPAN><DIV id="jqgh_ID" style="cursor: pointer;">ID <IMG src="http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images/sort_desc.gif"/></DIV></TH><TH class="grid_resize" style="width: 90px;"><SPAN> </SPAN><DIV id="jqgh_PartnerID" style="cursor: pointer;">PartnerID </DIV></TH><TH class="grid_resize" style="width: 100px;"><SPAN> </SPAN><DIV id="jqgh_DateTimeInserted" style="cursor: pointer;">DateTimeInserted </DIV></TH></TR></THEAD></TABLE>

Here is the complete function:

 $('table.scroll').jqGrid({  
    datatype: function(postdata) {    
        mtype: "POST",    
    $.ajax({  
        url: 'EDI.asmx/GetTestJSONString',  
        type: "POST",  
        contentType: "application/json; charset=utf-8",  
        data: "{}",  
        dataType: "text", //not json . let me try to parse  
        success: function(msg, st) {  
            if (st == "success") {                    
                 var gridData;  

                //strip of "d:" notation  
                var result = JSON.parse(msg);   
                for (var property in result) {  
                    gridData = result[property];  
                    break;  
                }  

                var objGridData = eval("(" + gridData + ")"); //creates an object with visible data and structure  
                var tbl = jQuery('table.scroll')[0];  

                alert(objGridData.rows[0].PartnerID); //displays the correct data  

                //tbl.addJSONData(objGridData); //error received: addJSONData not a function  

                //error received: addJSONData not a function (This uses eval as shown in the documentation)  
                //tbl.addJSONData(eval("(" + objGridData + ")"));   

                //the line below evaluates fine, creating an object and visible data and structure  
                //var objGridData = eval("(" + gridData + ")");  
                //BUT, the same thing will not work here  
                //tbl.addJSONData(eval("(" + gridData + ")"));  
                //FIREBUG SHOWS THIS AS THE VALUE OF gridData:  
               // "{"total":"1","page":"1","records":"5","rows":[{"ID":1,"PartnerID":"BCN","DateTimeInserted":new Date(1214412777787)},{"ID":2,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125000)},{"ID":3,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125547)},{"ID":4,"PartnerID":"EHG","DateTimeInserted":new Date(1235603192033)},{"ID":5,"PartnerID":"EMDEON","DateTimeInserted":new Date(1235603192000)}]}"         

            }  
        }  
    });  
    },  
    jsonReader: {  
        root: "rows", //arry containing actual data  
        page: "page", //current page  
        total: "total", //total pages for the query  
        records: "records", //total number of records  
        repeatitems: false,  
        id: "ID" //index of the column with the PK in it   
    },  
    colNames: [  
        'ID', 'PartnerID', 'DateTimeInserted'  
          ],    
    colModel: [    
    { name: 'ID', index: 'ID', width: 55 },    
    { name: 'PartnerID', index: 'PartnerID', width: 90 },  
    { name: 'DateTimeInserted', index: 'DateTimeInserted', width: 100}],  
    rowNum: 10,  
    rowList: [10, 20, 30],  
    imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images',  
    pager: jQuery('#pager'),  
    sortname: 'ID',  
    viewrecords: true,  
    sortorder: "desc",  
   caption: "TEST Example")};  

Vaccine

possible duplicate of JqGrid addJSONData + ASP.NET 2.0 WS – Addieaddiego

Answer 1

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>

Disgrace

Oh very nice. I like that. Having List<string> Row make it possible for me to obtain total rows count using SqlDataReader. Awesome!!! Having to do the string[] Rows is such a pain cuz you have to tell it a total row count to initialize it before using SqlDataReader which is not possible to do so. So, it makes it a lot easier to dispose of the Memory afterward. Hip hip horray!!! – Chicken

Answer 2

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?

Chen

Answer 3

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.

Scheldt

I have verified that the tbl variable is evaluating properly and i only have one instance. Any other suggestions?? Anything at all is welcome! :-) Thanks! – Vaccine

i am going home now, if you are still stuck send me an email at [email protected] and maybe i can help you out tonight. this should be an easy fix – Scheldt

yes, I have the same issue,everything is fine, I get proper data but I can't load data in grid..anyone solved this? – Tricornered

Answer 4

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];

Martie

Answer 5

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

Pilewort

Answer 6

Since we got a lot of questions for ASP.NET WebForms and jqGrid, we decided to go the "component" way and implement something that is very similar to asp:GridView. This way, you can control jqGrid using the familiar ASP.NET page lifecycle, events, datasources, etc.

You can see a Beta of this online here - more than 30 samples available currently:

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

It will most probably grow into commercial product as well (open source licenses will be available) if there is interest in that. Meanwhile, you can use Reflector to check out the sources for reference (until we figure out a way to have the source available online). We are using SVN for ASP.NET as opposed to gitHub for the js Core, so we have some work in that direction.

We hope this helps the community.

Rumen Stankov Trirand

Rafter

As of today, unfortunately, the WebForm is dying out as everyone is moving to javascript framework. – Chicken

Answer 7

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

Trustworthy

Answer 8

WebForm is dying out, so we need to focus on latest technologies like asp.net MVC. I have found a new asp.net jQGrid integration here http://www.techdoubts.net/2017/05/full-integration-dynamic-jqgrid-asp-net-mvc.html

Slab