loading columns dynamically for JQGrid using AjaxCall

Question

I need to load columns to Jqgrid Dynamically and am trying to follow jqGrid and dynamic column binding

Am trying in MVC. for Column name am fetching from Table(Which has a list of Columns to be displayed in GRID) and returning the Json data which is straightforward.

How do i implement for ColModel. For ex: i need to send JSon object like this dynamically

     {name: 'Airport', formatter: UrlFmatter, width: 95, align: "center", index: 'AIRPORT', searchoptions: { sopt: ['eq', 'ne', 'cn']} }
  {name: 'Country', width: 100, align: "center", index: 'Country', searchoptions: { sopt: ['eq', 'ne', 'cn']} }

How my design should be to send json to set the colModel ?

My UrlFmatter code

function UrlFmatter(cellvalue, options, rowObject) {
                    return "<a href='DetailResult?airportname=" + options.rowId + "' >" + cellvalue + "</a>";
                }

How do i write as per your answer for formatting and unformatting ? Thanks

do you need change the state of the grid ready or before? – Mar 14 '13 at 12:03 — , Mar 14 '13 at 12:03
i need to send data from DB and assign it to COlModel – user2067567 Mar 14 '13 at 12:06 — user2067567, Mar 14 '13 at 12:06

score 1 · Accepted Answer · answered Mar 14 '13 at 14:42

I suppose that you have the problem with sending information about the formatter (formatter: UrlFmatter) inside of JSON. JSON strings don't support functions as the type of data. The most easy way to solve the problem seems me registering your formatter in the same way as standard formatters. For example is you want that your formatter have the name "myUrlFormatter" you can use the following

(function ($) {
    'use strict';
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        myUrlFormatter: function (cellValue, options) {
            // you should place here the code of 
            // your custom formatter UrlFmatter
        }
    });
    $.extend($.fn.fmatter.myUrlFormatter, {
        unformat: function (cellValue, options, elem) {
            // you should place here the code of 
            // your custom unformatter
        }
    });
}(jQuery));

You should include the code after jquery.jqGrid.min.js (or after jquery.jqGrid.src.js). After such registration of the formatter you can use it in colModel as

{name: "Airport", index: "AIRPORT", formatter: "myUrlFormatter", width: 95,
    align: "center", searchoptions: { sopt: ["eq", "ne", "cn"]} }

So the value of formatter property will be string (formatter: "myUrlFormatter") instead of the function (formatter: UrlFmatter).

loading columns dynamically for JQGrid using AjaxCall

1 Answers1

Linked