Rectangle 27 6

I start with reminding that jqGrid provides formatter: "select" which uses formatoptions.value or editoptions.value to decode ids to texts. The formatter: "select" uses value and optional separator, delimiter and defaultValue properties, but it can't uses editoptions.dataUrl to get required data from the server instead of usage static value. The problem is very easy: processing dataUrl works asynchronous, but during formatting of the column of grid body one don't support delayed filling. So to use formatter: "select" one have to set formatoptions.value or editoptions.value before the server response will be processed by jqGrid.

In the old answer I suggested to extend JSON response returned from the server with additional data for editoptions.value of the columns having formatter: "select". I suggest to set the beforeProcessing. For example one can generate the server response in the following format:

{
    "cityMap": {"11": "Chennai", "12": "Mumbai", "13": "Delhi"},
    "rows": [
        { "SID": "1",  "SNAME": "ABC", "CITY": "11" },
        { "SID": "2",  "SNAME": "XYZ", "CITY": "12" },
        { "SID": "3",  "SNAME": "ACX", "CITY": "13" },
        { "SID": "4",  "SNAME": "KHG", "CITY": "13" },
        { "SID": "5",  "SNAME": "ADF", "CITY": "12" },
        { "SID": "6",  "SNAME": "KKR", "CITY": "11" }
    ]
}

and uses the following jqGrid options

colModel: [
    {name: "SNAME", width: 250},
    {name: "CITY", width: 180, align: "center"}
],
beforeProcessing: function (response) {
    var $self = $(this);
    $self.jqGrid("setColProp", "CITY", {
        formatter: "select",
        edittype: "select",
        editoptions: {
            value: $.isPlainObject(response.cityMap) ? response.cityMap : []
        }
    });
},
jsonReader: { id: "SID"}

The demo demonstrates the approach. It displays

One can use the same approach to set any column options dynamically. For example one can use

{
    "colModelOptions": {
        "CITY": {
            "formatter": "select",
            "edittype": "select",
            "editoptions": {
                "value": "11:Chennai;13:Delhi;12:Mumbai"
            },
            "stype": "select",
            "searchoptions": {
                "sopt": [ "eq", "ne" ],
                "value": ":Any;11:Chennai;13:Delhi;12:Mumbai"
            }
        }
    },
    "rows": [
        { "SID": "1",  "SNAME": "ABC", "CITY": "11" },
        { "SID": "2",  "SNAME": "XYZ", "CITY": "12" },
        { "SID": "3",  "SNAME": "ACX", "CITY": "13" },
        { "SID": "4",  "SNAME": "KHG", "CITY": "13" },
        { "SID": "5",  "SNAME": "ADF", "CITY": "12" },
        { "SID": "6",  "SNAME": "KKR", "CITY": "11" }
    ]
}

and the following JavaScript code

var filterToolbarOptions = {defaultSearch: "cn", stringResult: true, searchOperators: true},
    removeAnyOption = function ($form) {
        var $self = $(this), $selects = $form.find("select.input-elm");
        $selects.each(function () {
            $(this).find("option[value='']").remove();
        });
        return true; // for beforeShowSearch only
    },
    $grid = $("#list");

$.extend($.jgrid.search, {
    closeAfterSearch: true,
    closeAfterReset: true,
    overlay: 0,
    recreateForm: true,
    closeOnEscape: true,
    afterChange: removeAnyOption,
    beforeShowSearch: removeAnyOption
});

$grid.jqGrid({
    colModel: [
        {name: "SNAME", width: 250},
        {name: "CITY", width: 180, align: "center"}
    ],
    beforeProcessing: function (response) {
        var $self = $(this), options = response.colModelOptions, p,
            needRecreateSearchingToolbar = false;
        if (options != null) {
            for (p in options) {
                if (options.hasOwnProperty(p)) {
                    $self.jqGrid("setColProp", p, options[p]);
                    if (this.ftoolbar) { // filter toolbar exist
                        needRecreateSearchingToolbar = true;
                    }
                }
            }
            if (needRecreateSearchingToolbar) {
                $self.jqGrid("destroyFilterToolbar");
                $self.jqGrid("filterToolbar", filterToolbarOptions);
            }
        }
    },
    jsonReader: { id: "SID"}
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false})
$grid.jqGrid("filterToolbar", filterToolbarOptions);

The demo uses the above code.

We recreate the searching filter if any option are changed dynamically. The way allows implement more flexible solutions. For example the server can detect the language preferences of the client (of the web browser) and return formatting options for numbers, dates and so on based on the options. I'm sure that everyone can suggest other interesting scenarios.

One more remark. If you have too many items in select in (searchoptions.value and editoptions.value) I would recommend you don't use strings instead of objects as the value of searchoptions.value and editoptions.value. It allows you to specify the order of items in the select element.

If you will have too many items in select (for example all cities of your country) then you can consider to use select2 plugin which usage I demonstrate in the answer. It simplify selection of options because it convert select in element which is very close to jQuery UI Autocomplete.

The next demo demonstrate the usage of select2 plugin. If one click on the dropdown arrow of "select" element of the searching toolbar or the searching dialog one get additional input filed which can be used for quick searching. If one starts to type some text in the input box (for example "e" on an example on the picture below) the list of options will be reduced to the options having the typed text as substring:

By the way I described in the another answer how to set colNames dynamically. In can be used to manage more information from the server side.

UPDATED: The corresponding controller action Students can be about the following

public class Student {
   public long SID { get; set; }
   public string SNAME { get; set; }
   public long CITY { get; set; }
}
public class City {
    public long CID { get; set; }
    public string CNAME { get; set; }
}
...
public class HomeController : Controller {
    ...
    public JsonResult Students () {
        var students = new List<Student> {
                new Student { SID = 1, SNAME = "ABC", CITY = 11 },
                new Student { SID = 2, SNAME = "ABC", CITY = 12 },
                new Student { SID = 3, SNAME = "ABC", CITY = 13 },
                new Student { SID = 4, SNAME = "ABC", CITY = 13 },
                new Student { SID = 5, SNAME = "ABC", CITY = 12 },
                new Student { SID = 6, SNAME = "ABC", CITY = 11 }
            };
        var locations = new List<City> {
                new City { CID = 11, CNAME = "Chennai"},
                new City { CID = 12, CNAME = "Mumbai"},
                new City { CID = 13, CNAME = "Delhi"}
            };
        // sort and concatinate location corresponds to jqGrid editoptions.value format
        var sortedLocations = locations.OrderBy(location => location.CNAME);
        var sbLocations = new StringBuilder();
        foreach (var sortedLocation in sortedLocations) {
            sbLocations.Append(sortedLocation.CID);
            sbLocations.Append(':');
            sbLocations.Append(sortedLocation.CNAME);
            sbLocations.Append(';');
        }
        if (sbLocations.Length > 0)
            sbLocations.Length -= 1; // remove last ';'
        return Json(new {
                   colModelOptions = new {
                       CITY = new {
                           formatter = "select",
                           edittype = "select",
                           editoptions = new {
                               value = sbLocations.ToString()
                           },
                           stype = "select",
                           searchoptions = new {
                               sopt = new[] { "eq", "ne" },
                               value = ":Any;" + sbLocations
                           }
                       }
                   },
                   rows = students    
               },
               JsonRequestBehavior.AllowGet);
    }
}

@Oleg..Thanks a lot oleg..i am doing it straight away..

@Oleg..How to return two multiple result sets from same controller action.

@oleg..how to get the extended JSON response from Controller method..lease help on this.

@Oleg..It was working very good.i was able to map id's to names. You are always the best..and your way of answering is simply amazing :)

c# - How to display indirect data in Jqgrid - Stack Overflow

c# asp.net-mvc jqgrid
Rectangle 27 1

Search are View buttons of navigator bar are very simple. There just calls searchGrid or viewGridRow method of jqGrid. Before calling of viewGridRow one should get the rowid of selected row (selrow parameter of jqGrid) and use it as the parameter of viewGridRow. The method searchGrid have no required options.

Thus you can call searchGrid or viewGridRow methods in your code directly without usage navGrid. You can do this inside of click or touchstart event handler of your custom button.

Are those methods part of public API ? Will they available in future also ?

@Andrus: searchGrid is the method described here and viewGridRow is described here. I hold compatibility to the previous 4.x.y versions of jqGrid. Because of that I use the version numbers 4.10.0 (4.x.y too). I don't plun currently to remove some existing (old) methods from free jqGrid.

javascript - How to use free jqgrid search and view toolbar buttons ou...

javascript jquery twitter-bootstrap jqgrid free-jqgrid
Rectangle 27 3

I find your question interesting and created the demo which works in Google Chrome without jQuery UI Datepicker and display during date editing the results like

The demo have column invdate defined as below

{ name: "invdate", width: 120, align: "center", sorttype: "date",
    formatter: "date", formatoptions: { newformat: "m/d/Y"}, editable: true,
    editoptions: { dataInit: initDateEdit } }

The callback function initDateEdit I defined as

var initDateEdit = function (elem, options) {
    // we need get the value before changing the type
    var orgValue = $(elem).val(),
        cm = $(this).jqGrid("getColProp", options.name);

    $(elem).attr("type", "date");
    if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
        // if type="date" is not supported call jQuery UI datepicker
        $(elem).datepicker({
            dateFormat: "mm/dd/yy",
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true
        });
    } else {
        // convert date to ISO
        $(elem).val($.jgrid.parseDate.call(this, cm.formatoptions.newformat, orgValue, "Y-m-d"));
    }
};

I don't know <input type="date"/> good enough. It uses input format of date as ISO. So I converted in the code above the original text to ISO to display correct date during editing. In the same way one have to convert the results of editing back to the formatoptions.newformat. I used beforeSaveRow callback in the case:

onSelectRow: function (rowid) {
    var $self = $(this),
        savedRow = $self.jqGrid("getGridParam", "savedRow");
    if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        $self.jqGrid("restoreRow", savedRow[0].id);
    }
    $self.jqGrid("editRow", rowid, {
        keys: true,
        beforeSaveRow: myBeforeSaveRow
    });
}

where myBeforeSaveRow are defined as the following:

var myBeforeSaveRow = function (options, rowid) {
    var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
    $dates.each(function () {
        var $this = $(this),
            id = $this.attr("id"),
            colName = id.substr(rowid.length + 1),
            cm = $self.jqGrid("getColProp", colName),
            str;
        if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
            // convert from iso to newformat
            str = $.jgrid.parseDate.call($this[0], "Y-m-d", $this.val(), cm.formatoptions.newformat);
            $this.attr("type", "text");
            $this.val(str);
        }
    });
};

UPDATED: One more demo supports better Opera 24 and empty input dates.

this

@Andrus: jqGrid 4.4.5 is more as 1.5 year old. The second options parameter of dataInit was added in 4.5.4 one year ago. So you should either update jqGrid which you use or to use something like dataInit: function (elem) { return initDateWithButtonHTML5.call(this, elem, {name: "columnName"}); } instead of dataInit: initDateWithButtonHTML5. Alternatively you can just use fixed date format which you use instead of cm.formatoptions.newformat. In the case you will don't need cm and options.name.

As shown in code in question, source date values are in ISO format accepted by input type='date' . input element performs convertsion to/from iso format automatically from date shown in browser. Should we remove format conversion and myBeforeSaveRow from this code ?

initDateEdit
cm.formatoptions.newformat
$.jgrid.parseDate
newformat
formatoptions
options
initDateWithButtonHTML5
cm = $(this).jqGrid("getColProp", options.name)
$(elem).val($.jgrid.parseDate($.jgrid.formatter.date.newformat, orgValue, "Y-m-d"))
Cannot read property 'replace' of undefined
$.jgrid.formatter.date.newformat

javascript - How to use input type='date' for date column in jqGrid - ...

javascript asp.net-mvc-4 date jqgrid jqgrid-formatter
Rectangle 27 3

I find your question interesting and created the demo which works in Google Chrome without jQuery UI Datepicker and display during date editing the results like

The demo have column invdate defined as below

{ name: "invdate", width: 120, align: "center", sorttype: "date",
    formatter: "date", formatoptions: { newformat: "m/d/Y"}, editable: true,
    editoptions: { dataInit: initDateEdit } }

The callback function initDateEdit I defined as

var initDateEdit = function (elem, options) {
    // we need get the value before changing the type
    var orgValue = $(elem).val(),
        cm = $(this).jqGrid("getColProp", options.name);

    $(elem).attr("type", "date");
    if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
        // if type="date" is not supported call jQuery UI datepicker
        $(elem).datepicker({
            dateFormat: "mm/dd/yy",
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true
        });
    } else {
        // convert date to ISO
        $(elem).val($.jgrid.parseDate.call(this, cm.formatoptions.newformat, orgValue, "Y-m-d"));
    }
};

I don't know <input type="date"/> good enough. It uses input format of date as ISO. So I converted in the code above the original text to ISO to display correct date during editing. In the same way one have to convert the results of editing back to the formatoptions.newformat. I used beforeSaveRow callback in the case:

onSelectRow: function (rowid) {
    var $self = $(this),
        savedRow = $self.jqGrid("getGridParam", "savedRow");
    if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        $self.jqGrid("restoreRow", savedRow[0].id);
    }
    $self.jqGrid("editRow", rowid, {
        keys: true,
        beforeSaveRow: myBeforeSaveRow
    });
}

where myBeforeSaveRow are defined as the following:

var myBeforeSaveRow = function (options, rowid) {
    var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
    $dates.each(function () {
        var $this = $(this),
            id = $this.attr("id"),
            colName = id.substr(rowid.length + 1),
            cm = $self.jqGrid("getColProp", colName),
            str;
        if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
            // convert from iso to newformat
            str = $.jgrid.parseDate.call($this[0], "Y-m-d", $this.val(), cm.formatoptions.newformat);
            $this.attr("type", "text");
            $this.val(str);
        }
    });
};

UPDATED: One more demo supports better Opera 24 and empty input dates.

this

@Andrus: jqGrid 4.4.5 is more as 1.5 year old. The second options parameter of dataInit was added in 4.5.4 one year ago. So you should either update jqGrid which you use or to use something like dataInit: function (elem) { return initDateWithButtonHTML5.call(this, elem, {name: "columnName"}); } instead of dataInit: initDateWithButtonHTML5. Alternatively you can just use fixed date format which you use instead of cm.formatoptions.newformat. In the case you will don't need cm and options.name.

As shown in code in question, source date values are in ISO format accepted by input type='date' . input element performs convertsion to/from iso format automatically from date shown in browser. Should we remove format conversion and myBeforeSaveRow from this code ?

initDateEdit
cm.formatoptions.newformat
$.jgrid.parseDate
newformat
formatoptions
options
initDateWithButtonHTML5
cm = $(this).jqGrid("getColProp", options.name)
$(elem).val($.jgrid.parseDate($.jgrid.formatter.date.newformat, orgValue, "Y-m-d"))
Cannot read property 'replace' of undefined
$.jgrid.formatter.date.newformat

javascript - How to use input type='date' for date column in jqGrid - ...

javascript asp.net-mvc-4 date jqgrid jqgrid-formatter
Rectangle 27 2

I suppose that the reason of different order of the options of select exists because you use object form of editoptions.value:

editoptions: {
    value: {
        '1231': 'A.F. PETROLI',
        '1000': 'A2A',
        '706': 'A2A TRADING',
        '1001': 'ABD AIRPORT S.P.A.',
        ...
        '1172': 'WUERTH SRL',
        '1173': 'ZF SACHS ITALIA'
    }
}

jqGrid just enumerate properties of the object with respect of for (key in valuesObject) {...} loop (see the source code). The order of items of objects can depend on the JavaScript engine used. So you can have different order of options included in the generated <select>.

I would recommend you to use either string form with : and ; as separators (you can use separator and delimiter if you need to replace : and ; to another characters) or even better to use dataUrl. The response from dataUrl can be <select> with all options. You can use buildSelect additionally if the response from dataUrl is not HTML fragment and convert the response to <select> inside of buildSelect callback function.

javascript - jqGrid form editing select ordering - Stack Overflow

javascript jquery jqgrid
Rectangle 27 11

Keyboard navigation has finally been added to jqGrid as of version 4.0.

Functionality
Keyboard navigation

The following code is used to bind the up/down arrow keys:

jQuery("#keynav").jqGrid('bindKeys');

But as the demo shows, you can pass options to bind other keys as well:

// Bind the navigation and set the onEnter event
jQuery("#keynav").jqGrid('bindKeys', {
       "onEnter" : function( rowid ) { 
                     alert("You enter a row with id:"+rowid)
       }
});

this have drawback, does not work with multiselect

I would like to know a follow up question, i tried to select the first row on grid completion, but it does not immediately allow keyboard navigation.

javascript - jqGrid - Navigate rows using up/down arrow keys? - Stack ...

javascript jquery jqgrid
Rectangle 27 2

Of cause one can implement support of type="number" attribute and other HTML5 type attributes in free jqGrid. I will consider to do this in the future. Today I see the missing locale support as the large disadvantage of HTML5 type. It's design error in my opinion. I recommend you to look at the answer or the article or this one from W3. You can try for example to modify the standrad demo from the article to use

<input type="number" name="quantity" min="0.01" max="10" lang="de">

You will see that Google Chrome v.46 ignores lang attribute and uses the locale of the web browser. In other words the current state of HTML5 type attributes is not eterprise ready for multi-language support.

You can use pattern attribute for better validation (see the ansewr), but it still don't help to force the usage of , instead of . in the web browser which have English locale.

If you do need to use type="number" attribute now, you can use edittype: "custom". You can find the demo with an example in the answer for example.

Finally I want to mention, that I see last time many questions on the stackoverflow, which looks like feature requests or an ask to implement some parts, which one want to use in his commertial products. I develop free jqGrid in my free time. I provide the results of the work for free. I just ask to contribute the development by donating via PayPal (see the readme). On the other side I get very few donations and the most developer to prefer just to use the results of the development. It's a pity. One could at least to share his reauslt (in form of code fragments) with other. Stackoverflow and GiHub is not the place where sombody makes your job for free. One can gives you some tips, but you still have to make the most of the work yourself.

UPDATED: One can use editoptions to set custom properties on <input> element, but as I wrote before it will work not in all cases.

The demo http://jsfiddle.net/OlegKi/kvtrtzc5/2/ works good for example in my Google Chrome, but it could work incorrectly for other input data or other locale of Chrome browser. Thus I don't see the demo as the solution, it could be still helpful in some environment. I used in the demo the following definition of the column "amount":

{
    name: "amount",
    width: 62,
    template: "number",
    editoptions: {
        type: "number", 
        step: "0.01",
        min: "0.00",
        max: "1000",
        pattern: "[0-9]+([\.|,][0-9]+)?",
        title: "This should be a number with up to 2 decimal places."
    }
}

UPDATED 2: One more demo http://jsfiddle.net/OlegKi/kvtrtzc5/3/ uses German locale to display the data. If you have German GUI language in Google Chrome (one have to restart Google Chrome process, better logoff and login from the system) then the user will see , as the decimal separator.

One have still no flexibility in the web application for choosing the locale of input element. The results depends only from the web browser settings and can't be specified in JavaScript application.

I appreciate your huge work. Html page does not have lang attribute. Chrome accepts both , and . as decimal separator so this is not issue. Browsers treat unknown input types like input type=text. I expected the same behaviour. This small change would enable html5 support in jqgrid. I tried to create custom formatter but failed. I updated question with formatter tried.

@Andrus: I posted UPDATED part in my answer with the demo, which works at me, but it could not work correctly in other environment. Probably it's what you want to implement.

In input data comma is used as decimal separator. In edit mode empty cell appears in this case. jsfiddle.net/3pca1mmx/3 reproduces the issue. How to fix this ? Is it possible to replace , with . before edit starts or is there better way ?

@Andrus: I think that you still don't understand my main statement. I don't recommend you to use <input type="number".../> because of the problems with specifying localization. You can have a little better results as on your demo, see jsfiddle.net/OlegKi/kvtrtzc5/3 for example, but you will have to test the solution very carefully. You can still have some problems if the user changes the locale of web browser of OS GUI.

@Andrus: The answer, which I referenced in my answer, is started with the statement: "The HTML5 input type=number is inadequate from the localization point of view, due to both the definition and the implementations". I have the same opinion. I still included the demo in UPDATED part of my answer to show some attempt of solution, which looks good at the first glance, but which can't be converted to the perfect solution. The usage of <input type="date".../> have the same problems, but it seems work OK in your environment.

javascript - How to allow html5 number input in free-jqgrid - Stack Ov...

javascript jquery html5 jqgrid free-jqgrid
Rectangle 27 2

Of cause one can implement support of type="number" attribute and other HTML5 type attributes in free jqGrid. I will consider to do this in the future. Today I see the missing locale support as the large disadvantage of HTML5 type. It's design error in my opinion. I recommend you to look at the answer or the article or this one from W3. You can try for example to modify the standrad demo from the article to use

<input type="number" name="quantity" min="0.01" max="10" lang="de">

You will see that Google Chrome v.46 ignores lang attribute and uses the locale of the web browser. In other words the current state of HTML5 type attributes is not eterprise ready for multi-language support.

You can use pattern attribute for better validation (see the ansewr), but it still don't help to force the usage of , instead of . in the web browser which have English locale.

If you do need to use type="number" attribute now, you can use edittype: "custom". You can find the demo with an example in the answer for example.

Finally I want to mention, that I see last time many questions on the stackoverflow, which looks like feature requests or an ask to implement some parts, which one want to use in his commertial products. I develop free jqGrid in my free time. I provide the results of the work for free. I just ask to contribute the development by donating via PayPal (see the readme). On the other side I get very few donations and the most developer to prefer just to use the results of the development. It's a pity. One could at least to share his reauslt (in form of code fragments) with other. Stackoverflow and GiHub is not the place where sombody makes your job for free. One can gives you some tips, but you still have to make the most of the work yourself.

UPDATED: One can use editoptions to set custom properties on <input> element, but as I wrote before it will work not in all cases.

The demo http://jsfiddle.net/OlegKi/kvtrtzc5/2/ works good for example in my Google Chrome, but it could work incorrectly for other input data or other locale of Chrome browser. Thus I don't see the demo as the solution, it could be still helpful in some environment. I used in the demo the following definition of the column "amount":

{
    name: "amount",
    width: 62,
    template: "number",
    editoptions: {
        type: "number", 
        step: "0.01",
        min: "0.00",
        max: "1000",
        pattern: "[0-9]+([\.|,][0-9]+)?",
        title: "This should be a number with up to 2 decimal places."
    }
}

UPDATED 2: One more demo http://jsfiddle.net/OlegKi/kvtrtzc5/3/ uses German locale to display the data. If you have German GUI language in Google Chrome (one have to restart Google Chrome process, better logoff and login from the system) then the user will see , as the decimal separator.

One have still no flexibility in the web application for choosing the locale of input element. The results depends only from the web browser settings and can't be specified in JavaScript application.

I appreciate your huge work. Html page does not have lang attribute. Chrome accepts both , and . as decimal separator so this is not issue. Browsers treat unknown input types like input type=text. I expected the same behaviour. This small change would enable html5 support in jqgrid. I tried to create custom formatter but failed. I updated question with formatter tried.

@Andrus: I posted UPDATED part in my answer with the demo, which works at me, but it could not work correctly in other environment. Probably it's what you want to implement.

In input data comma is used as decimal separator. In edit mode empty cell appears in this case. jsfiddle.net/3pca1mmx/3 reproduces the issue. How to fix this ? Is it possible to replace , with . before edit starts or is there better way ?

@Andrus: I think that you still don't understand my main statement. I don't recommend you to use <input type="number".../> because of the problems with specifying localization. You can have a little better results as on your demo, see jsfiddle.net/OlegKi/kvtrtzc5/3 for example, but you will have to test the solution very carefully. You can still have some problems if the user changes the locale of web browser of OS GUI.

@Andrus: The answer, which I referenced in my answer, is started with the statement: "The HTML5 input type=number is inadequate from the localization point of view, due to both the definition and the implementations". I have the same opinion. I still included the demo in UPDATED part of my answer to show some attempt of solution, which looks good at the first glance, but which can't be converted to the perfect solution. The usage of <input type="date".../> have the same problems, but it seems work OK in your environment.

javascript - How to allow html5 number input in free-jqgrid - Stack Ov...

javascript jquery html5 jqgrid free-jqgrid
Rectangle 27 3

The main problem in your code that the JSON data don't includes size and maxlength properties. If one don't use size property of the editoptions the width: 98% will be set by inline editing on the <input> and one will have no place to display the button.

The next problem is that you use "name": "Date" for the Date column, but uses $("#" + id + "_date") instead of $("#" + id + "_Date") in your code. So the datepicker will be not initialized.

Additional problem: if you include jquery-ui-1.8.14.custom.min.js the code of the datepicker will be already included and you don't need to include jquery.ui.datepicker.js additionally.

The last problem is that datepicker with showOn: 'button' works only if you start datepicker in the separate thread with respect of setTimeout JavaScript function.

After fixing the described above problem the code will work (see the demo), but the position of the icon will be not so nice:

To fix the position of the <img> you can use the following code directly after the datepicker initialization:

$("#" + id + ' img.ui-datepicker-trigger').css({
    position: "relative",
    top: "4px"
});

As the result you will have the following results (see the demo)

I personally would prefer don't use any images in the buttons and use jQuery UI Buttons instead. I created one more demo which shows the way which looks me better.

The column with the date I would defines as

{ name: 'invdate', index: 'invdate', width: 110, template: dateTemplate }
template
dateTemplate
var dateTemplate = {align: 'center', sorttype: 'date', editable: true,
        formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y',
        editoptions: { dataInit: initDateWithButton, size: 11 },
        searchoptions: {
            sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
            dataInit: initDateWithButton,
            size: 11,          // for the advanced searching dialog
            attr: {size: 11}   // for the searching toolbar
        }};

(the format of the date you can choose any which corresponds your requirements). The function initDateWithButton can be defined as

var initDateWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
            // remove % from the searching toolbar
            elem.style.width = '';
        }
        // to be able to use 'showOn' option of datepicker in advance searching dialog
        // or in the editing we have to use setTimeout
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,
                showWeek: true,
                showButtonPanel: true,
                onClose: function (dateText, inst) {
                    inst.input.focus();
                }
            });
            $(elem).next('button.ui-datepicker-trigger').button({
                text: false,
                icons: {primary: 'ui-icon-calculator'}
            }).find('span.ui-button-text').css('padding', '0.1em');
        }, 100);
    };

As the result you would have the datepicker which looks like on the picture

@Andrus: I am not sure that I understand what you mean, but why not just increase the width property of the 'invdate' column from width: 110 to some higher value?

@Oleg: Increasing width add extra free space to right. I'm looking for a way to decrease date field width to remove unused empty space. I posted this in stackoverflow.com/questions/9619480/

json - jqgrid - calendar icon not showing up in inline editing mode - ...

json jquery-ui jqgrid
Rectangle 27 5

$(document).keypress(function(e) {

if(e.keyCode == 40) { //down arrow
 $('#nextElementId').click();
}
if(e.keyCode == 38 { //up arrow
 $('#previousElementId'.click();
}

});

Hmmm... This is a good start, but this code assumes there is only a single grid on the page, and that I can easily get the ID's for each row in the order they are displayed.

I used the ID as a simplification. The selected 'tr' has the class ui-state-highlight, using this you can get the next or previous row. You may bind the keypress event to the table instead of 'document', this way you shouldn't have problem with more than one grid.

Obviously people shouldn't just be copying and pasting code. This answer shows you the concept behind handling a keypress and is perfectly valid. Almost every answer on SO is a good start!

javascript - jqGrid - Navigate rows using up/down arrow keys? - Stack ...

javascript jquery jqgrid
Rectangle 27 5

This will only work if you have one grid on the screen because it overrides the document level up/down keys but it is a start.

$(document).keypress(function(e)
        {
            if(e.keyCode == 38 || e.keyCode == 40)  //up/down arrow override
            {
                var gridArr = $('#GridID').getDataIDs();
                var selrow = $('#GridID').getGridParam("selrow");
                var curr_index = 0;
                for(var i = 0; i < gridArr.length; i++)
                {
                    if(gridArr[i]==selrow)
                        curr_index = i;
                }

                if(e.keyCode == 38) //up
                {
                    if((curr_index-1)>=0)
                        $('#GridID').resetSelection().setSelection(gridArr[curr_index-1],true);
                }
                if(e.keyCode == 40) //down
                {
                    if((curr_index+1)<gridArr.length)
                        $('#GridID').resetSelection().setSelection(gridArr[curr_index+1],true);
                }
            }

        });

javascript - jqGrid - Navigate rows using up/down arrow keys? - Stack ...

javascript jquery jqgrid
Rectangle 27 1

Sorry, but I don't see any implementation of paging in your code. You calculate the number of records which need be skipped and save it in startIndex, but you don't use startIndex later. Your current code just get data from DataTable and returns all items of the table. You need to skip startIndex items. For example you can start for loop from i = startIndex instead of i = 0.

In general it would be more effective to construct SELECT statement in SqlCommand which uses TOP construct or use STORED PROCEDURE like described in the answer (see another answer too). In the way your server code will get from the SQL server only one page of data instead of fetching all records of data and returning only one page.

UPDATED: I would rewrite your client code to something like the following

$(document).ready(function () {
    var templateDate = {
            width: 80,
            fixed: true,
            sorttype: "date",
            formatter: "date",
            formatoptions: { srcformat: "m/d/Y", newformat: "m/d/Y" }
        },
        templateInt = { width: 55, fixed: true, sorttype: "integer" },
        templateText = {
            width: 200,
            cellattr: function () {
                return 'style="white-space: normal!important;'
            }
        },
        mygrid = $("#RptUpload");

    // create the grid without filling it (datatype: "local")
    mygrid.jqGrid({
        datatype: "local", // to revent initial loading of the grid
        postData: {
            bReload: true,
            Year: function () { return $("#Year").val(); },
            Month: function () { return $("#Month").val(); }
        },
        url: '@Url.Action("DMEUploadDetailsList", "Reports")',
        jsonReader: { repeatitems: false, root: "DataRows" },
        colNames: [ "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_OrderID",
                    "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_CompanyName",
                    "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_PatientID",
                    "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_PatientName",
                    "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_DOB",
                    "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_Insurance",
                    "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_UploadDate"
        ],
        colModel: [
            { name: "ReadingID", template: templateInt },
            { name: "CompanyName", template: templateText },
            { name: "PatientID", template: templateInt },
            { name: "PatientName", template: templateText },
            { name: "DOB", template: templateDate },
            { name: "InsuranceType", width: 150, template: templateText },
            { name: "UploadDate", template: templateDate }
        ],
        cmTemplate: { align: "center" },
        rowNum: 20,
        rowList: [20, 50, 100, 200],
        pager: "#UploadPager",
        caption: "@VirtuOxAdmin.DMEUploadDetails_Grid_RptUpload_Title",
        viewrecords: true,
        height: "auto",
        width: 770,
        hidegrid: false,
        headertitles: true,
        loadError: function (xhr, status, error) {
            alert(status + " " + error);
        }
    });
    mygrid.navGrid("#UploadPager",
        { edit: false, add: false, del: false, search: false, refresh: false });
    mygrid.closest(".ui-jqgrid").hide(); // hide the grid

    $("#rptRefresh").click(function (e) {
        var Form = $("form[id=FrmDMEUploadDetails]");
        e.preventDefault();
        Form.validate();
        if (Form.valid()) {
            RemoveValidatioMessages();
            mygrid.jqGrid("setGridParam", { datatype: "json" })
                .trigger("reloadGrid", [{page: 1}])
                .closest(".ui-jqgrid").show(); // show the grid;
        } else {
            mygrid.clearGridData();
            mygrid.closest(".ui-jqgrid").hide(); // hide the grid
        }
        $(".chzn-select-deselect").trigger("liszt:updated");
        return false;
    });
});

The grid will be created with datatype: "local", so the url and postData will be ignored. After that it seems to me the usage of bReload property in postData and on the server side seems me unneeded. Nevertheless I included bReload still in the JavaScript code till you remove it from the server code.

Additionally I simplified the colModel by usage of column templates (cmTemplate option of jqGrid and template property of colModel). See the old answer for more information. I removed also some unneeded options of jqGrid which values are default (see "Default" column in the documentation of options).

About usage of new versions of STORED PROCEDURE (pc_GetUploadDetail in your code) you can consider to introduction new version (like pc_GetUploadDetailPaged) which supports more parameters. It will not break existing code which uses the old procedure, but you can still use sorting and paging of data on SQL Server instead of getting all query results to web server and implementing sorting and paging in C#.

Sorry, I forgot to update the paging code in problem statement. Well about updating stored procedures I am not allowed to do so as old application still in use. We are upgrading the project technology. So we cant alter the stored procedures in any way as it will affect the application in use. I have updated the problem statement to to include the paging code & elaborated on last two sentences of problem statement. Please have a look.

@Shaggy: I think that the current problem is on the client side. You don't posted currently how you use DefineGrid. The usage of postData: Form.serialize() is also unclear: which form you use how you set all values and so on. Typically one use datatype: "local" initially in grid to have no loading before the user set the filter. Then is the user click reload grid one can call setGridParam to set datatype: "json", set values of the form. Then one calls .trigger("reloadGrid").

Ohh! Sorry again, I just updated server side action method code let me update the grid definition & add script to show how I m using DefineGrid(). & I am not using Form.serialize() to pass values anymore.

I hope the code updatetd is now clear to you. As you can see loadComplete event I am trying to make bReload postData parameter false so that when user clicks paging or sorting I can get data from session instead of SQL server. But postData parameter bReload is not getting overrded in loadComplete as I m not triggering reload there. Is this wrong way of doing so?

asp.net mvc 4 - jqGrid url not getting called with server side paging ...

asp.net-mvc-4 jqgrid
Rectangle 27 2

The option sorttype will be used by jqGrid only during local sorting. If you use datatype: "json" without loadonce: true then jqGrid just desplays one page of data sorted on the server side. If the user clicks on new page button or on the column header to sort the column then jqGrid will send new request to the server with new page, sidx and sord parameters. So the server will be responsible to sort the data correctly and to return the requested page of sorted data.

I recommend in general to prefer to use loadonce: true in case of displaying no so large dataset (for example less as 1000 rows of data). The server should ignore page and rows parameters and to return all data back to jqGrid. One need just the sort the data initially. After the first loading the data jqGrid saved the data in data and _index parameters of jqGrid and changes the datatype to "local". The later sorting, paging or filtering/searching of data will be implemented by jqGrid without any communication with the server. One should clear understand that JavaScript code is relatively quickly in modern web browsers. Because of that the user will see the results of sorting, paging or filtering very quickly (practically immediately in case of small number of data). The rountrip time of the simplest request to the server is typically much longer.

jqGrid Sorting by date and time, but displaying only date - Stack Over...

sorting date jqgrid jqgrid-php
Rectangle 27 8

I agree that my old answer can't be used with Font Awesome 4 because the names of the classes are changed in version 4. I use Font Awesome 4 myself in solutions which I develop for my customers and I decide to share it with other.

initFontAwesome

The usage of suggested method initFontAwesome is very simple. First of all one need to include additional CSS and JavaScript files:

<link rel="stylesheet" type="text/css"
      href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
...
<link rel="stylesheet" type="text/css" href=".../ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href=".../jQuery.jqGrid.fontAwesome4.css" />
...
<script type="text/javascript" src=".../i18n/grid.locale-en.js"></script>
<script type="text/javascript" src=".../jquery.jqGrid.min.js"></script>
<script type="text/javascript" src=".../jQuery.jqGrid.fontAwesome4.js"></script>
$("#grid").jqGrid({
    ... // jqGrid options and callbacks
});
$("#grid").jqGrid("initFontAwesome").jqGrid({
    ... // jqGrid options and callbacks
});
formatter: "checkboxFontAwesome4"
jquery.jqGrid.min.js
jquery.jqGrid.src.js
<script type="text/javascript"
        src=".../jQuery.jqGrid.checkboxFontAwesome4.js"></script>
formatter: "checkbox"
  • one can select the row by clicking on the icons. The standard formatter: "checkbox" uses disabled <input type="checkbox">. Clicking on disabled control will be blocked on the most web browsers. I posted before "clickableCheckbox" (see here and here).
  • The tests which I made with grids having many rows and columns using the tree checkbox formatters shows that formatter "checkboxFontAwesome4" is the most quick in rendering (in all web browsers where I it tested), formatter: "checkbox" is lower and "clickableCheckbox" is the mostly slow. So formatter "checkboxFontAwesome4" is not only cool, but it's really quick in rendering.
/*global $ */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.jgrid, {
        icons: {
            common: "fa", // will be implemented later
            scale: "", // will be implemented later. For example as "fa-lg"
            titleVisibleGrid: "fa fa-arrow-circle-up",
            titleHiddenGrid: "fa fa-arrow-circle-down",
            titleIcon: "ui-corner-all fa-title",
            close: "fa fa-times",
            edit: "fa fa-pencil fa-fw",
            add: "fa fa-plus fa-fw",
            del: "fa fa-trash-o fa-fw",
            search: "fa fa-search fa-fw",
            refresh: "fa fa-refresh fa-fw",
            view: "fa fa-file-o fa-fw",
            pager: {
                first: "fa fa-step-backward fa-fw",
                prev: "fa fa-backward fa-fw",
                next: "fa fa-forward fa-fw",
                last: "fa fa-step-forward fa-fw"
            },
            form: {
                prev: "fa fa-caret-left",
                next: "fa fa-caret-right",
                save: "fa fa-floppy-o",
                undo: "fa fa-undo",
                close: "fa fa-times",
                delete: "fa fa-trash-o"
            },
            searchForm: {
                reset: "fa fa-undo",
                query: "fa fa-comments-o",
                search: "fa fa-search"
            }
        }
    });

    $.extend($.jgrid.nav, {
        editicon: $.jgrid.icons.edit,
        addicon: $.jgrid.icons.add,
        delicon: $.jgrid.icons.del,
        searchicon: $.jgrid.icons.search,
        refreshicon: $.jgrid.icons.refresh,
        viewicon: $.jgrid.icons.view
    });

    $.extend($.jgrid.defaults, {
        fontAwesomeIcons: true // the new option will be used in callbacks
    });

    $.extend($.jgrid, {
        originalCreateModal: $.jgrid.originalCreateModal || $.jgrid.createModal,
        createModal: function (aIDs, content, p, insertSelector, posSelector, appendsel, css) {
            $.jgrid.originalCreateModal.call(this, aIDs, content, p, insertSelector, posSelector, appendsel, css);
            if ($(insertSelector).find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable").jqGrid("getGridParam", "fontAwesomeIcons")) {
                $("#" + $.jgrid.jqID(aIDs.modalhead) + ">a.ui-jqdialog-titlebar-close>span.ui-icon")
                    .removeClass("ui-icon ui-icon-closethick")
                    .addClass($.jgrid.icons.close);
                $("#" + $.jgrid.jqID(aIDs.themodal) + ">div.jqResize").removeClass("ui-icon-grip-diagonal-se");
            }
        }
    });

    $.extend($.jgrid.view, {
        beforeShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-triangle-1-w")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-w")
                        .addClass($.jgrid.icons.form.prev);
                } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-e")
                        .addClass($.jgrid.icons.form.next);
                } else if ($this.hasClass("ui-icon-close")) {
                    $fmButton.removeClass("fm-button-icon-left")
                        .addClass("fm-button-icon-right")
                        .html("<span class=\"" + $.jgrid.icons.form.close + "\"></span><span>" + $fmButton.text() + "</span>");
                }

            });
        }
    });

    $.extend($.jgrid.del, {
        afterShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $tdButtons = $dialog.find(".EditTable .DelButton"),
                $fmButtonNew = $("<td class=\"DelButton EditButton\" style=\"float: right;\">"),
                $iconSpans = $tdButtons.find(">a.fm-button>span.ui-icon");

            $tdButtons.css("float", "right");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-scissors")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.delete + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                } else if ($this.hasClass("ui-icon-cancel")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                }
            });
            if ($fmButtonNew.children().length > 0) {
                // remove &nbsp; between buttons
                $tdButtons.replaceWith($fmButtonNew);
            }
        }
    });

    $.jgrid.extend({
        initFontAwesome: function () {
            return this.each(function () {
                var $grid = $(this);
                $grid.bind("jqGridFilterAfterShow", function (e, $form) {
                    // an alternative to afterShowSearch
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        $this.removeClass("ui-icon");
                        if ($this.hasClass("ui-icon-search")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.search + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-arrowreturnthick-1-w")) {
                            $this.closest(".EditButton").css("float", "left");
                            $fmButton.addClass("fm-button-icon-left")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.reset + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-comment")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.query + "\"></span><span>" + $fmButton.text() + "</span>");
                        }
                    });
                }).bind("jqGridAddEditBeforeShowForm", function (e, $form) {
                    // alternative to beforeShowForm callback
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        if ($this.hasClass("ui-icon-triangle-1-w")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-w")
                                .addClass($.jgrid.icons.form.prev);
                        } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-e")
                                .addClass($.jgrid.icons.form.next);
                        } else if ($this.hasClass("ui-icon-disk")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.html("<span class=\"" + $.jgrid.icons.form.save + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-close")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.removeClass("fm-button-icon-left")
                                .addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                        }

                    });
                }).bind("jqGridHeaderClick", function (e, gridstate) {
                    var $icon;
                    if (this.p.fontAwesomeIcons) {
                        $icon = $(this).closest(".ui-jqgrid").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span");
                        if (gridstate === "visible") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-down")
                                .addClass($.jgrid.icons.titleVisibleGrid).parent().addClass($.jgrid.icons.titleIcon);
                        } else if (gridstate === "hidden") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-up")
                                .addClass($.jgrid.icons.titleHiddenGrid).parent().addClass($.jgrid.icons.titleIcon);
                        }
                    }
                }).bind("jqGridInitGrid", function () {
                    var $this = $(this), $pager, $sortables;

                    if (this.p.fontAwesomeIcons) {
                        $pager = $this.closest(".ui-jqgrid").find(".ui-pg-table");
                        $pager.find(".ui-pg-button>span.ui-icon-seek-first")
                            .removeClass("ui-icon ui-icon-seek-first")
                            .addClass($.jgrid.icons.pager.first);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-prev")
                            .removeClass("ui-icon ui-icon-seek-prev")
                            .addClass($.jgrid.icons.pager.prev);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-next")
                            .removeClass("ui-icon ui-icon-seek-next")
                            .addClass($.jgrid.icons.pager.next);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-end")
                            .removeClass("ui-icon ui-icon-seek-end")
                            .addClass($.jgrid.icons.pager.last);

                        $this.closest(".ui-jqgrid")
                            .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
                            .removeClass("ui-icon ui-icon-circle-triangle-n")
                            .addClass("fa fa-arrow-circle-up").parent().addClass("ui-corner-all fa-title");

                        $sortables = $this.closest(".ui-jqgrid")
                                .find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
                        $sortables.find(">span.ui-icon-triangle-1-s")
                            .removeClass("ui-icon ui-icon-triangle-1-s")
                            .addClass("fa fa-sort-asc fa-lg");
                        $sortables.find(">span.ui-icon-triangle-1-n")
                            .removeClass("ui-icon ui-icon-triangle-1-n")
                            .addClass("fa fa-sort-desc fa-lg");
                    }
                });
            });
        }
    });
}(jQuery));
/*global jQuery */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        checkboxFontAwesome4: function (cellValue, options) {
            var title = options.colModel.title !== false ? ' title="' + (options.colName || options.colModel.label || options.colModel.name) + '"' : '';
            return (cellValue === 1 || String(cellValue) === "1" || cellValue === true || String(cellValue).toLowerCase() === "true") ?
                '<i class="fa fa-check-square-o fa-lg"' + title + '></i>' :
                '<i class="fa fa-square-o fa-lg"' + title + '></i>';
        }
    });
    $.extend($.fn.fmatter.checkboxFontAwesome4, {
        unformat: function (cellValue, options, elem) {
            var cbv = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : ["Yes", "No"];
            return $(">i", elem).hasClass("fa-check-square-o") ? cbv[0] : cbv[1];
        }
    });
}(jQuery));

UPDATED: Another demo contains some additional CSS styles which improve visibility of jqGrid if one includes bootstrap.css of the Bootstrap 3.0.2. I am sure that the styles are not the best, but there fix the problems which I found in my tests. Below are the styles:

.ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {
    height: auto;
    width: auto;
    line-height: inherit;
}
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
    padding: 1px;
}
.ui-jqgrid { line-height: normal; }
div.ui-jqgrid-view table.ui-jqgrid-btable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title {
    border-collapse: separate;
    margin-top: 0;
    top: 0;
    margin-right: 2px;
    height: 22px;
    width: 20px;
    padding: 2px;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title.ui-state-hover span {
    margin-top: -1px;
    margin-left: -1px;
}
.ui-paging-info { display: inline; }
.ui-jqgrid .ui-pg-table { border-collapse: separate; }
div.ui-jqgrid-view table.ui-jqgrid-btable td {
    border-left-style: none
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th {
    border-left-style: none
}
.ui-jqgrid .ui-jqgrid-htable th div {
    height: 14px;
}
.ui-jqgrid .ui-jqgrid-resize {
    height: 18px !important;
}
.jqGrid("initFontAwesome")
height
beforeInitData: function () { $("#editmod" + this.id).remove(); }
jQuery.jqGrid.fontAwesome4.css
jQuery.jqGrid.bootstrap-fixes.css
jQuery.jqGrid.fontAwesome4.js
jQuery.jqGrid.checkboxFontAwesome4.js

Hi Oleg, I was able to follow your instructions now my grid is using the font awesome icons! Thank you so much for your post. This was a very important part of the grid for my project. My question now is when I click on my icons such as Add the modal form is displayed in a very large font but I can't seem to find where it is formatted to be so large. Do you know how to format the add/edit form and warning message box's font-size? Thank you again for all your help!

Nevermind, I was able to find it in the css file under jqdialog font-size. Thanks again for the font-awesome icon workout!

@klm10: You are welcome! I like Font Awesome. After writing the old answer I try to push some peoples to use it. For example I poesetd to jQuery UI (see here and here). I hope that jqGrid and jQuery will use this fonts or some other vector fonts in the near future. I hop that my answer will help many other peoples too.

If someone is looking to work around this and fix some browser issues like scrollbars in chrome or testing on mobile etc you can use this fiddle jsfiddle.net/farrukhsubhani/FcFND its just copy with all files linked. I hope @Oleg would not mind linking css and js from his server.

.ui-jqgrid .ui-jqgrid-hdiv { padding-top: 2px; overflow-y: hidden; }

jquery ui - jqGrid:Font Awesome Icons - Stack Overflow

jquery-ui jqgrid toolbar font-awesome
Rectangle 27 4

Here is how to display a jqGrid tree using a JavaScript function.

$(document).ready(function() {
    TreeDemo.setupGrid($("#tree"));
});

TreeDemo = {
    data: { A: ["A1", "A2"], B: ["B1", "B2"] },
    setupGrid: function(grid) {
        grid.jqGrid({
            colNames: ['Name'],
            colModel: [
                  { name: 'Name', index: 'Name', width: "250em" }
                ],
            datatype: TreeDemo.treeData,
            loadui: "none",
            sortname: 'Number',
            treeGrid: true,
            treeGridModel: "adjacency",
            sortorder: "asc"
        })
    },
    treeData: function(postdata) {
        var items = postdata.nodeid ? TreeDemo.data[postdata.nodeid] : TreeDemo.data;
        var i = 0;
        var rows = new Array();
        for (val in items) {
            var isLeaf = postdata.nodeid != undefined;
            rows[i] = {
                Name: val,
                Id: val,
                level: postdata.nodeid ? 1 : 0,
                parent: postdata.nodeid || null,
                isLeaf: isLeaf ? "true" : "false",
                expanded: "false"
            }
            i++;
        }
        $("#tree")[0].addJSONData({
            Total: 1,
            Page: 1,
            Records: 2,
            Rows: rows
        });
    }
};

Note that there are lots of options for how you do this and my example is only one.

The way I would get the JSON into a JS var is to either:

  • Write a HTML Helper which emits a short script to the page.
  • Write an action which returns a JavaScriptResult to get the data in a file, if, for some reason, you can't have the data inline.

You create the JSON using the .NET JavaScript serializer. Look at the JsonResult.ExecuteResult in the MVC source code for an example.

Seemed to me that JsonResult.ExecuteResult output directly to the ASP.NET response buffer. So I would have to call it at the moment I want it to be emitted in the view, right?

Don't use JsonResult.ExecuteResult. I just meant it as an example of using the built-in JSON serializer. Use that yourself and do whatever you need to with the string.

jquery - ASP.NET MVC + jqGrid without AJAX - Stack Overflow

asp.net-mvc jquery jqgrid treegrid
Rectangle 27 7

jQgrid is the most powerful and supports jquery UI themeing. I was able to implement inline editing, sorting, filtering, and simple server-side validation. It took me three days to figure it out, but that is not too bad considering all the features I implemented. I was able to figure it out by searching the internet and finding examples, so there is a lot of resources out there for it. It does involve a lot of javascript, though. The thing I liked the least about it was the search feature. It has too many options turned on by default and I am having trouble turning off the ones I don't want to use.

Mvccontrib grid was very easy to get up and running but inline edting is not supported. Also, I read this post which to me sounds like it won't be supported much longer: mvccrontrib

Bummer, it was a very nice and easy to use grid.

I found webgrid to be easy to set up but it also has no inline editing. Its default paging I guess is really inefficient too, it always returns all rows regardless of the # records per page.

If not, I would have said Mvccontrib if it wasn't being shelved. That leaves me with pure html tables or webgrid, and I like the pure html tables better, as Naveen recommended. I was able to implement sorting, paging, and filtering pretty easily.

I am going to stick with jqgrid now that i have a working example and look at Jquery UI Grid when it is in production.

asp.net mvc - To WebGrid or not to WebGrid...what is the answer? - Sta...

asp.net-mvc asp.net-mvc-3 webgrid
Rectangle 27 2

Looks great thanks. I used to use the jqgrid but try to avoid unobtrusive javascript as much as possible at the moment. Are you, by any chance, aware of a 'mvc grid' like this which also allows sorting and filtering? thanks.

I have problems with this bit: <%= Html.Pager((IPagination)Model) %> when I compile it complains that it cannot find the html helper pager. is this just an import issue? I am using: <%@ Import Namespace="MvcContrib.UI.Grid" %> <%@ Import Namespace="MvcContrib.Pagination" %>

paging helper asp.net mvc - Stack Overflow

asp.net-mvc paging
Rectangle 27 1

I had a similar situation using JQGrid. I ended up with JavaScript up the wazoo on any view that used the grid. My solution was to put any of the heavy-lifting javascript into external files, and namespace them like this:

var JqGridHelper = JqGridHelper || {};
JqGridHelper.SetupGrid = function (gridTable, pager, gridJson, colNameJson, colModelJson, label, rowNum, gridCompleteFunc, columnChooser) {
    gridTable.jqGrid({
        datatype: "local",
        data: gridJson,
        colNames: colNameJson,
        colModel: colModelJson,
        rowNum: rowNum,
        autowidth: true,
        height: '100%',
        pager: pager,
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: label,
        gridComplete: gridCompleteFunc
    });

    gridTable.jqGrid('navGrid', pager, { edit: false, add: false, del: false });
    if (columnChooser == true) {
        JqGridHelper.AddColumnChooser(gridTable, pager, function() {

        });
    }

};

Try to abstract as much of the reusable DataTable binding and initialization code, then just call your abstracted methods from the JavaScript on the partial views.

If you go the way of external javascript files, be sure that you're loading them at the appropriate time, rather than loading them all on the initial page-load.

asp.net mvc - Partial Views and CSS/Javascript - Stack Overflow

javascript asp.net-mvc partial-views asp.net-mvc-partialview cassette
Rectangle 27 1

editoptions:{value: getData()}
function getData(){
     var states = [{"RoleId":1,"RoleName":"Administrator"},{"RoleId":2,"RoleName":"Sales"},{"RoleId":3,"RoleName":"Secretory/President"},{"RoleId":4,"RoleName":"Apartment Owner"},{"RoleId":5,"RoleName":"Apartment User"}];        
      return states;

    }

In your case you need to add ajax call in getData() and return values/array which has been created by the result.

javascript - Unable to bind the data to dropdown in jqgrid when it is ...

javascript jquery asp.net-mvc-4 jqgrid mvcjqgrid
Rectangle 27 0

You have some errors in jsonReader declaration, it must be like this:

jsonReader: {
    repeatitems: false,
    id: "UserName",
    cell: "",
    root: function (obj) { return obj.rows; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.records; }
}

If you want to use local data, you have to replace:

root: function (obj) { return obj,rows; },

Yeah, just replace obj,rows with obj.rows. :D

javascript - How to load data from jqgrid using JSON - Stack Overflow

javascript jquery html jqgrid