JqGrid uses the index property for colModel instead of the Property name during sorting and searching

Question

Question

using jqgrid to display table data. table has a foreign key, and we want to display the text of its foreign key instead of Id. I also want the user to be able to sort and filter foreign keys.

An example :

• Persons table: Identifier, name, EducationId (foreign key for the education table)
• Education: Id, Name

We want to show each person the name of his / her educational name in jqgrid.

• If the user clicks on the education column, he is sorted according to Education Name (Not Education Id )
• If the user wants to filter education, we show a drop-down list (selector) that contains the names of the education, after the user selects one, the filter contains EducationId as sField and Id 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 }); 

• With this Home/GetData code, just send Person.Id , Person.Name , Person.EducationId as json data, and it's really useful not to send more data than client requests. It also sends the connection between Education Id and Name once, and this data is used to display the name instead of the identifier in the grid, as well as to create a drop-down list and text.
• I ignore to write other properties such as pager, pages, etc.
• @Html.GetEduType() is the server side function of the razor. It simply returns pairs like [Education Id]:[Education Name] . For example: ( 1:'Diploma',2:'MS',... ) (I just use it to get education data once and didn't use UrlData ) (Yes, I use it in ASP.Net MVC 3, but this is not an important point).

My problem : It works great for displaying data and sorting by its name. But when I want to filter Education, it sends the index value ( Education.Name ) instead of the name value ( EducationId ) in the Http Post sField to the server. This problem will be solved simply by sending the name value instead of the index value.

Thanks.

Answer 1

I solved my problem as follows:

• First of all, I handle the beforeSearch event:

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

• Here is the 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 , I first get the data and analyze it. After that, I look for the columns that their indices are not equal to their name, and find out if there is any filter with these columns. If there is any column, I replace the field with an index. Finally, I set the data to publish. Report that data is converted to Json with JSON.stringify, which you can find here here .

I use this function for filter data with a dropdown menu (use the value of the dropdowns, not the text)