Question

Question:

using jqgrid to show data of a table. table has foreign key and we want to show text of its foreign key instead of Id. I also want that user can sort and filter over the foreign keys.

Example:

• Person Table: Id,Name,EducationId(foreign key for Education Table)
• Education able: Id,Name

We want to show each person with the name of his/her education name in a jqgrid.

1. If user click over education column, it sort according to Education Name(Not Education Id)
2. If User want to filter over education, we show a dropdown(selector) that contain education Names,after user select one, the filter contain EducationId as sField and Id of selected value as sValue

My Solution:

var items1 = {@Html.GetEduType()};

$(function () {
        $("#list").jqGrid({
            url: '/Home/GridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Name','Education'],
            colModel: [
          { name: 'Name', index: 'Name' },
          { name: 'EducationId', index: 'Education.Name', search: true, 
             stype: 'select', searchoptions: { value: items1, sopt: ['eq', 'ne'] },
             formatter: 'select' , editoptions: { value: items1 }}],            
            viewrecords: true});
$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });

1. With this code, Home/GetData just send Person.Id, Person.Name, Person.EducationId as json data and it is really good to not send more data than client needs. Also it send relation between Education Id and Name once and these data used for showing name instead of id in grid, and also to create dropdown value and text.
2. I ignore to write other properties like pager, pagesize, etc
3. @Html.GetEduType() is razor server side function. It just returns pairs like
   [Education Id]:[Education Name]. For example: (1:'Diploma',2:'M.S.',...) (I just use it to get education data once and did not use UrlData)
   (Yes, I use it in ASP.Net MVC 3, but its not an important point)

My Problem:
It work great for showing data and sorting Education according to its name. But when I want to filter Education it send index value(Education.Name) instead of name value (EducationId) in Http Post sField to server. This problem will be solved just by sending name value instead of index value.

Thanks.

Answer 1

I solved my problem in this way:

1. First of all, I handle beforeSearch event:

   .filterToolbar({ stringResult: true, beforeSearch: searchPreparation })
   

2. Here is searchPreparation function:

   function searchPreparation(grid) {
     if (grid == undefined)
         grid = $(this);
     else
         grid = $(grid);
     var postData = grid.jqGrid('getGridParam', 'postData');
     var searchData = jQuery.parseJSON(postData.filters);
     var gridCol = grid.getGridParam("colModel");
     for (var i = 0; i < searchData.rules.length; i++) {
         for (var j = 0; j < gridCol.length; j++) {
             if (gridCol[j].index != gridCol[j].name && searchData.rules[i].field == gridCol[j].name) {
                 searchData.rules[i].field = gridCol[j].index;
                 break;
             }
         }
     }
     grid.jqGrid('setGridParam', { postData: { filters: JSON.stringify(searchData)} });
     return false;
   }
   

In searchPreparation first I get post data and parse it. After that I search for columns that their indexes are not equal to their name and find that whether is there any filter with these columns. If there is any column, I replace field with index.
Finally I set the post data. Notify that data convert to JSON with JSON.stringify that you can find it here.

I use this function for filter data with dropdown either (use value of drop down’s items not text)