How to use jqGrid with C#/ASP.NET and JSON.NET (and no AJAX.NET stuff)?

23,572

Solution 1

Before doing anything else, download and install this:

http://www.fiddler2.com/fiddler2/

It will let you see exactly what is being requested and sent back by the jqGrid requests to get the JSON data.

I have some code for a working jqGrid, and here's something different:

datatype: "json"

Instead of your:

datatype: "jsonstring"

I also have a field called colNames which is an array of strings containing column names.

Finally, I have a pager field which identifies an element that will store the paging controls, and is a DIV.

Solution 2

Be careful with the case sensitive property datatype is meant to be dataType with uppercase T.

Solution 3

I had exactly the same problem! The solution I came up with is to create a custom JavaScript formatter:

$(this).jqGrid({  
   ...
   colModel: [
      {
      name: 'SomeDate', index: 'SomeDate', width: 100, formatter: ndateFormatter }
      }],
   ...
});


// Convert C# json Date.
function ndateFormatter(cellval, opts, rwdat, _act) {
    var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
    var date = new Date();
    date.setTime(time);
    return date.toDateString();
}

Solution 4

In ASP.NET, Date gets serialized as JSON "/Date(ticks)/" which can not be interpreted by jqGrid. Possible solutions (post):

  • write a custom formatter for the grid
  • change the data we send to the grid (by sending formatted date as string)

Please tell how did you implement date display with jqGrid ?

Thank You.

Solution 5

If you have problems getting jqGrid to work with ASP.NET, please have a look here. This should save you a lot of time.

Share:
23,572
wprl
Author by

wprl

I'm a software developer and consultant that helps companies build fast, scalable apps and establish advanced quality assurance, testing, deployment, and DevOps infrastructure. I have worked with companies across the Americas and Europe, from sites with 86MM page views per month, to startups and individuals creating prototypes to help them attract investment.

Updated on April 06, 2020

Comments

  • wprl
    wprl almost 4 years

    OK, I've been looking into this a few days and am not particularly sure what I am doing wrong. If anyone has working examples of using jqGrid with C#/ASP.NET and open source tools, please, please let me know where to find them. Any tips on finding decent documentation or tools I could use to debug this would be most appreciated too (I'm pretty new to js/jQuery). Basically I just need the edit-in-place functionality, so if I'm overlooking another obvious solution for that, it could be helpful to know... I'd like to avoid using AJAX.NET if at all possible.

    I feel like I'm just overlooking something really obvious here.

    In the following example, I do get the jqGrid to display, but it shows no data.

    Here is the relevant JavaScript:

    jQuery(document).ready(function(){ 
        jQuery("#role_assignment_table").jqGrid({ 
            url:'http://localhost:4034/WebSite2/PageItemHandler.asmx/GetPageItemRolesJson?id=3',
            mtype: 'GET',
            contentType: "application/json; charset=utf-8",
            datatype: "jsonstring",
            colModel:[
                {name:'Id', label:'ID', jsonmap:'Id'},
                {name:'Title', jsonmap:'Title'},
                {name:'AssignedTo', label:'Assigned To', jsonmap:'AssignedTo'},
                {name:'Assigned', jsonmap:'Assigned'},
                {name:'Due', jsonmap:'Due'},
                {name:'Completed', jsonmap:'Completed'}
            ],
            jsonReader: {
                page: "Page",
                total: "Total",
                records: "Records",
                root: "Rows",
                repeatitems: false,
                id: "Id"
            },
            rowNum:10,
            rowList:[10,20,30],
            imgpath: 'js/themes/basic/images',
            viewrecords: false,
            caption: "Role Assignments" 
        });  
    });
    

    The HTML:

    <table id="role_assignment_table" class="scroll" cellpadding="0" cellspacing="0" />
    

    The generated JSON: I'm not sure if it makes it to the jqGrid, or if the jqGrid doesn't like my JSON or my WebMethod, but I can call it myself when I go to the proper URL and get the JSON result string.

    {"Page":"1","Total":1.0,"Records":"4",
    "Rows":[
    {"Id":1,"Item":null,"Title":"Story Manager","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
    {"Id":2,"Item":null,"Title":"Analysis","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
    {"Id":3,"Item":null,"Title":"Narrative","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
    {"Id":4,"Item":null,"Title":"Graphic","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}
    ]
    }
    

    Cheers, William Riley-Land

  • wprl
    wprl almost 15 years
    this may be a stupid question, but is the JSON "text" supposed to be returned as an XML doc? E.g. my WebMethod is returing <?xml version="1.0" encoding="utf-8"?> <string xmlns="localhost/WebSite2">INSERT JSON DATA HERE</string>
  • wprl
    wprl almost 15 years
    P.S. Thanks for the tip-on to Fiddler.
  • wprl
    wprl over 14 years
    Thanks. I eventually just switched to using XML and everything went smoothly from there. Good write up of your discoveries!
  • wprl
    wprl over 14 years
    I did it by passing a string instead of an actual date - you can still do sorting if you add "sorttype: 'date'" to that column in your colModel...
  • Jalal El-Shaer
    Jalal El-Shaer about 14 years
    xml will work but watch out for higher bandwidth use that the lightweight alternative json.
  • sisdog
    sisdog about 12 years
    The above wasn't working exactly for me because my C# was generating a date like this: "\/Date(1311725560000-0700)\/". I had to change the regex to this for it to work: var time = cellval.replace(/\/Date(([0-9]*)(-[0-9]*)?)\//, '$1');
  • wprl
    wprl about 12 years
    I have to say: this answer really helped me out before Chrome/FireFox let you watch network activity in-browser. Thank you!
  • wprl
    wprl about 12 years
    is this true? I don't have a way to verify anymore.