jQuery Grid Plugin - jqGrid

I'll share what we have done with WCF.  First we created a common parameters class.  These should be most of all the parameter's that jqGrid will send. 

[DataContract]

public

class PagingControl

{

[DataMember]

public string q { get; set; }

[DataMember]

public int? limit { get; set; }

[DataMember]

public string o { get; set; }

[DataMember]

public int? rows { get; set; }

[DataMember]

public int? page { get; set; }

[DataMember]

public string searchString { get; set; }

[DataMember]

public string sidx { get; set; }

[DataMember]

public string sord { get; set; }

}

 This class is used as a paramater for the WCF method: 

public

PagedData<Data.Area> GetAreaData(PagingControl paging)

The PagedData is also a common class we use for returning jqGrid data: 

[

DataContract]

public class PagedData<T>

{

[

DataMember(Name = "total")]

public int Total { get; set; }

[

DataMember(Name = "page")]

public int Page { get; set; }

[

DataMember(Name = "records")]

public int Records { get; set; }

[

DataMember(Name = "rows")]

public IEnumerable<T> Rows { get; set; }

}

 So in the WCF method all we do is create PagedData and set the properties. 

 Also, the client side jqGrid options that we set are:

jsonReader: {

repeatitems:

false,

id:

"0"

},

ajaxGridOptions: {

type:

"POST",

contentType:

"application/json; charset=utf-8"

},

datatype:

"json",

serializeGridData:

function(postdata) {

return JSON.stringify(paging: postdata);

},

 Maybe when I get a chance I can create a sample application using  WCF.

No problem!

Let us you have a WFC with a function like

    List<MyInfo> GetMyInfo (bool myBoolParam, string myStrParam, int myIntParam);

in the interface and in general your data model and you business logic can be implemented with paging of data and with a data filtering (like WHERE in the corresponding SELECT statments). You can expand you WFC interface with a function like

[WebGet (UriTemplate = "jqGridGetMyInfo?boolParam={myBoolParam}&strParam={myStrParam}&intParam={myIntParam}&_search={_search}&page={page}&rows={rows}&sidx={sortIndex}&sord={sortDirection}&searchField={searchField}&searchString={searchString}&searchOper={searchOper}&filters={filters}",
              ResponseFormat = WebMessageFormat.Json)]
[OperationContract]
CompactJqGridTable GetMyInfo (bool myBoolParam, string myStrParam, int myIntParam,
                                              int page, int rows, string sortIndex, string sortDirection,
                                              string _search, string searchField, string searchString, string searchOper, string filters);

In this example I use JSON data in the output in so named "optimized" form. See jqGrid Demo http://trirand.com/blog/jqgrid/jqgrid.html, choose on the left tree part the branch "Data Mapping" and then "Data Optimization". In this way you transfer the data from server to client with the minimal overhead. Class CompactJqGridTable I define like following

// next class will be used together with
// jsonReader: { repeatitems : true, cell:"", id: "0" }
public class CompactTable {
    public int total { get; set; }                        // total number of pages
    public int page { get; set; }                       // current zero based page number
    public int records { get; set; }                    // total number of records
    public List<List<string>> rows { get; set; } // first element in every row must be id of row.
}

Now the implementation of CompactJqGridTable GetMyInfo () looks like following:

public CompactJqGridTable GetMyInfo (...) {
    // GetMyInfoAdvanced supports paging searching etc. which the original GetMyInfo not soports
    // and has an additional output parameter which gives the total number of data records
    int totalRecords;
    List<MyInfo> myInfos = GetMyInfoAdvanced  (myBoolParam, myStrParam, myIntParam,
                                                                      page, rows, sortIndex, sortDirection, ..., out totalRecords);
    List<List<string>> jqGridRows = new List<List<string>> (myInfos.Count);

    foreach (MyInfo item in myInfos) {
        jqGridRows.Add (new List<string> {
            item.TextProperty1,
            item.TextProperty2,
            item.IntProperty1.ToString(),
            item.BoolProperty1? "1": "0",
            ...
        });
    }

    return new CompactTable() {
        total=(totalRecords + rows - 1) / rows,
        page = page,
        records = totalRecords,
        rows = resRows
    };
}

Take in consideration, that a boolean you can send as "True"/"False" text if you use item.BoolProperty1.ToString(), but serializing it as "1" or "0" reduce the saze of data send from server to client.

In Javascript part I change default some settings, bacause I use only JSON in all jqGrids:

jQuery.extend(jQuery.jgrid.defaults, {
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    gridview: true,
    rownumbers: true,
    sortable: true,
    headertitles: true,
    loadui: 'block',
    ....
};

Only first two settings are important for communication in JSON. Setting "gridview: true" speed up jqGrid and should be used allways if you don't use afterInsertRow function subGrids or treeGrids. Other settings are just some settings which I personally like and use everywere.

A typical jqGrid call looks like

var grid = jQuery('#list').jqGrid({
    url: urlBase + '/jqGridGetMyInfo',
    jsonReader: { repeatitems: true, cell: "", id: "0" },
    ...
});

If you use everyware in your jqGrids the same "optimized" form of data transfere you can move jsonReader parameter to above settings of jQuery.jgrid.defaults.

If you prefer use another (not "optimized") data transfer it can be interesting for you to read my post in stackoverflow: http://stackoverflow.com/questions/2690657/mapping-json-data-in-jqgrid/2706620#2706620.

In our example we have additional parameters bool myBoolParam, string myStrParam, int myIntParam which should be send to jqGrid. If such more complex examples I have on the web page together with jqGrid control some additional controls like select boxes and checkboxes. The values of myBoolParam, myStrParam and myIntParam will derived from the values of this controls. One can append jqGrid url with this parameters or better use postData paraleter of jqGrid in a form

postData: {boolParam: myBoolParam, strParam: myStrParam, intParam: myIntParam}

or in the form

postData: {boolParam: function() { return jQuery("#checkBoxWithBoolParam").is(':checked'); },
    strParam: function() { return jQuery("#selectBoxWithStrParam option:selected").val(); },
    intParam: function() { return jQuery("#selectBoxWithIntParam option:selected").val(); }
}

In both cases the url used to get data from the server will be appended by jQuery.ajax (used by jqGrid) with the parameters exactly how it should be ('?' and '&' will be inserted).

At the end I call trigger('reloadGrid') to load data corresponds to the new url.

Using of trigger('reloadGrid') in jqGrid I discuss in http://stackoverflow.com/questions/2660226/should-one-replace-the-usage-addjsondata-of-jqgrid-to-the-usage-of-setgridparam.

Some additional information about ajaxGridOptions and other ajax options of jqGrid you can read in one more my post on stackoverflow: http://stackoverflow.com/questions/2675625/setting-the-content-type-of-requests-performed-by-jquery-jqgrid/2678731#2678731.

Probably my answer has become somewhat overloaded, but I hope you will get an impression, that one can very good use jqGrid together with WFC service on the server side.