Rectangle 27 3

I was working on the same thing but also needed to get and save the column ordering. It's not simple as jqGrid.remapColumns is relative to what ever the current stat of the grid is...

Just in case anyone finds this helpful (and I'd love to know if there is already something to do this that I missed):

(function($){

$.jgrid.extend({

    getColumnOrder : function ()
    {
        var $grid = $(this);

        var colModel = $grid[0].p.colModel;

        var names = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                names[names.length] = name;
        });

        return names;
        //return JSON.stringify(names);
        //$('#dbgout').val(j);

    },


    setColumnOrder : function (new_order)
    {
        var $grid = $(this);

        //var new_order = JSON.parse($('#dbgout').val());
        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4

        var new_order_index = {};

        $.each(new_order, function(i,n){
            new_order_index[n] = i;
        });

        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        var colModel = $grid[0].p.colModel;

        cur = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                cur[cur.length] = name;
        });
        //cur = ['a', 'b', 'c', 'd', 'e'];
        //        0    1    2    3    4

        cur_index = {};
        $.each(cur, function(i,n){
            cur_index[n] = i;
        });


        // remapColumns: The indexes of the permutation array are the current order, the values are the new order.

        // new_order       0=>a 1=>c 2=>d 3=>b 4=>e
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        // cur             0=>a 1=>b 2=>c 3=>d 4=>e
        // cur_index       a=>0 b=>1 c=>2 d=>3 e=>4

        // permutati       0    2    3    1    4
        //                 a    c    d    b    e
        var perm = [];
        $.each(cur, function(i, name){   // 2=>b

            new_item = new_order[i];     // c goes here
            new_item_index = cur_index[new_item];

            perm[i] = new_item_index;
        });

        if (colModel[0].name == 'subgrid' || colModel[0].name == '')
        {
            perm.splice(0, 0, 0);
            $.each(perm, function(i,n){
                ++perm[i]
            });
            perm[0] = 0;
        }

        $grid.jqGrid("remapColumns", perm, true, false);

    },



});
})(jQuery);

jquery - Remember (persist) the filter, sort order and current page of...

jquery cookies persistence jqgrid filtering
Rectangle 27 0

Sorry for taking so long to reply to this. It didn't work at first and other things became priority. Once I did as you suggested I had to change srcformat:'mm/dd/Y', newformat:'mm/dd/Y' to srcformat:'m/d/Y', newformat:'m/d/Y' before it made sense. Also, it still didn't look like it was working until after picking the date I had to click the > or >=, etc. in the filter toolbar to get the new datepicker value to be evaluated.

@JosephWhite: Sorry, but I'm not sure: is the problem is solved now? The demo seems to me works without any problems with formatter: "date".

yes, the problem is solved now. I was just explaining that I had used the wrong srcformat is why id did not appear to be working correctly at first. I really appreciate your help.

@JosephWhite: To be exact the formatoptions with srcformat was ignored before because it's the options of the formatter "date". It has no sense to include any options of formatter if you didn't use the formatter at all.

jquery - jqGrid filter dates only working for equals, not greater than...

jquery jqgrid filtering
Rectangle 27 0

I updated the demo the the following which uses jqGrid 4.6.0. It uses the following code

$(function () {
    "use strict";
    var mydata = [
            {id: "10", Name: "Miroslav Klose",     Category: "Sport",   Subcategory: "Football"},
            {id: "20", Name: "Michael Schumacher", Category: "Sport",   Subcategory: "Formula 1"},
            {id: "30", Name: "Albert Einstein",    Category: "Science", Subcategory: "Physics"},
            {id: "40", Name: "Blaise Pascal",      Category: "Science", Subcategory: "Mathematics"}
        ],
        $grid = $("#list"),
        getUniqueNames = function (columnName) {
            var texts = this.jqGrid("getCol", columnName), uniqueTexts = [],
                textsLength = texts.length, text, textsMap = {}, i;
            for (i = 0; i < textsLength; i++) {
                text = texts[i];
                if (text !== undefined && textsMap[text] === undefined) {
                    // to test whether the texts is unique we place it in the map.
                    textsMap[text] = true;
                    uniqueTexts.push(text);
                }
            }
            return uniqueTexts;
        },
        buildSearchSelect = function (uniqueNames) {
            var values = ":All";
            $.each(uniqueNames, function () {
                values += ";" + this + ":" + this;
            });
            return values;
        },
        setSearchSelect = function (columnName) {
            this.jqGrid("setColProp", columnName, {
                stype: "select",
                searchoptions: {
                    value: buildSearchSelect(getUniqueNames.call(this, columnName)),
                    sopt: ["eq"]
                }
            });
        };

    $grid.jqGrid({
        data: mydata,
        datatype: "local",
        colModel: [
            {name: "Name"},
            {name: "Category"},
            {name: "Subcategory"}
        ],
        cmTemplate: {width: 200},
        gridview: true,
        autoencode: true,
        sortname: "Name",
        viewrecords: true,
        rownumbers: true,
        sortorder: "desc",
        ignoreCase: true,
        pager: "#pager",
        height: "auto",
        caption: "How to use filterToolbar better locally"
    }).jqGrid("navGrid", "#pager",
        {edit: false, add: false, del: false, search: false, refresh: false});

    setSearchSelect.call($grid, "Category");
    setSearchSelect.call($grid, "Subcategory");

    $grid.jqGrid("setColProp", "Name", {
        searchoptions: {
            sopt: ["cn"],
            dataInit: function (elem) {
                $(elem).autocomplete({
                    source: getUniqueNames.call($(this), "Name"),
                    delay: 0,
                    minLength: 0,
                    select: function (event, ui) {
                        var $myGrid, grid;
                        $(elem).val(ui.item.value);
                        if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
                            $myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first();
                            if ($myGrid.length > 0) {
                                grid = $myGrid[0];
                                if ($.isFunction(grid.triggerToolbar)) {
                                    grid.triggerToolbar();
                                }
                            }
                        } else {
                            // to refresh the filter
                            $(elem).trigger("change");
                        }
                    }
                });
            }
        }
    });

    $grid.jqGrid("filterToolbar",
        {stringResult: true, searchOnEnter: true, defaultSearch: "cn"});
});

Thanks a lot Oleg.....Its working fine.....

@KrishnakumarSubbaiyan: You are welcome!

@Oleg Hi Oleg - do we need to put this in the gridComplete function if we are not using local data? I have a grid pulling data from a JSON source and all I'm getting are select boxes with one option in them: All

@FastTrack: If you change the content of the grid dynamically you should update selects and recreate the searching toolbar. The callback gridComplete could be the wrong place and the version of jqGrid which you use could be very important. For example jqGrid 4.6 trigger jqGridAfterGridComplete event inside of setRowData, but gridComplete will be not called. It's better if you describe your problem detailed in new question.

jquery - Drop down not working in Filter toolbar for jqgrid 4.6.0 vers...

jquery jqgrid jqgrid-php
Rectangle 27 0

(String(this.blah).substr(0,10) == String("11/17/2010"))

used in eval during the local searching I suppose you spend much time to understand how the local searching are implemented. Because you see that the line above (see (String(this.blah).substr(0,10) ...) is not what should be done (the value of String(this.blah) will be "2010-11-17" instead of "11/17/2010"), you can overwrite the corresponding function of jqGrid (the function _getStr inside of $.jgrid.from) and fix the problem in the way.

Some time ago I spend much time to prepare the corresponding the demo, which demonstrates this technique. The demo was prepared as the answer in trirand forum. In the question one wanted to find strings like 'bnevise' in case of searching for 'benevise'. So one have to implement really custom local searching. I hope that the information will be enough for you to fix the problem which you describe.

UPDATED: It seems to me that I have found a much more simple workaround. You should just define searchoptions: {sopt: ['eq','ne']} for the 'blah' column having the data. Then "bw" (begin with) will not used for the column. The "equal to" and "not equal to" operations work correctly in the local searching.

UPDATED 2: Here is the working example where I use sopt option.

Ok, I worked through the example and it works if I change my source data. I noticed the data you're using has dates defined like "2007-09-01". My data had: new Date("2007-09-01"). The reason is my source data is coming from ASP.NET MVC, and I had to override JSON.parse to correctly interpret Microsoft's date format: /^\/Date\((\d+)\)\/$/ So that's not a problem with the grid, but it would be nice to be able to pass in Date objects. I think the only change needed is in the parseDate function, add: if (Object.prototype.toString.call(e) === '[object Date]'){ return e; } Thanks Oleg!

jquery - jqGrid filter or search by date not working client side - Sta...

jquery asp.net-mvc json jqgrid asp.net-mvc-3
Rectangle 27 0

datatype: "local"
datatype
"xml"
"json"
loadonce: true

have to have colModel with the same name and index property

name
index

Second, one should not use name property which values contains special meta-characters (see here). name property will be used to build values of id attributes of some internal jqGrid constructions. So one have to escape spaces during every construction of selectors on the elements. Old versions didn't do this. More recent jqGrid versions escaped many meta-characters, but not the space. The current version (4.6) escapes spaces and one can in general use spaces in name, but it's strictly not recommended. I don't understand why you chosen name: 'Street Number'. One can use any names in colNames or in jsonmap, but why one could need to use name: 'Street Number'?

OK, So I added a "heading" field to the columnModel and I now use that for the headings. Thanks as this kinda pointed me in the right direction

@griegs: You are welcome! You mean probably label property in colModel and not heading?

No I mean "heading". Within the grid I then use "colNames: GRID.getGridHeadings()" and the method reads all the "heading" properties, builds the heading string and returns it. jqGrid allows you to add properties and it ignores them.

@griegs: You don't need define colNames parameter of jqGrid. Instead of that you can define label properties in colModel. See the lines of jqGrid code.

jquery - jqGrid filter not working - Stack Overflow

jquery jqgrid
Rectangle 27 0

It worked... It is issue with data encoding only. Instead of read data server is passing html encoded data.

So, on page it is showing for both '' and &#223. But at the time of putting data in filter we are putting . Because of that it can't compare it with &#223, filter stopped working. As data is same from visual point of view it took a little more effort to solve this issue...

jquery - JQGrid client side filter not working for Localized data - St...

jquery string search jqgrid localization
Rectangle 27 0

jQuery.jgrid is null or not an object

means mostly that you included JavaScripts required for jqGrid (i18n/grid.locale-en.js and jquery.jqGrid.min.js or jquery.jqGrid.src.js) or jQuery JavaScript file in the wrong order. You should compare your code with the example from jqGrid documentation.

Additionally I recommend you always include exact version number of jQuery, jQuery UI and jqGrid which you use. You should make your tests with jquery.jqGrid.src.js (not with jquery.jqGrid.min.js) and post the line number of the error.

UPDATED: Sorry, but I can't reproduce the problem which you describe. See the demo. You can compare the source of the demo with youth one. Probably you have some more differences which you don't included in the text of the question.

Hi Oleg! Thanks a lot for your time! I've updated my question with the order of the js includes.

@tarares: Please answer on the questions: 1) which versions of jQuery, jQuery UI and jqGrid you use? 2) in which line number of jquery.jqGrid.src.js the error "jQuery.jgrid is null or not an object" pake place? 3) in which order you includes grid.locale-en.js, jquery.jqGrid.src.js and other JS-files on the page which has the error.

@tarares: I am asked to help by answering on questions from many people. I have to make my main job too (which bring me and my family money :-)). I'll came to your question later after I'll finish some other things which I am doing currently.

@tarares: You are welcome! I'm not sure that the versions jQuery, jQuery UI etc is the origin of the problem. More I think that the reason are the data which you used. In any way I would recommend you to specify id of rows in the input data. You can just add key: true property to the definition of referralId column. One can use also jsonReader: {repeatitems: false, id: "referralId"}. I recommend you to define sorttype in colModel if the content is not text. Usage of column templates (see here) could improve your code too.

@tarares: All's Well that ends well! I'm glad that I could help you. You are welcome!

java - jqGrid filter toolbar not working inside jQuery Tabs - Stack Ov...

java javascript jquery jqgrid
Rectangle 27 0

I was working on the same thing but also needed to get and save the column ordering. It's not simple as jqGrid.remapColumns is relative to what ever the current stat of the grid is...

Just in case anyone finds this helpful (and I'd love to know if there is already something to do this that I missed):

(function($){

$.jgrid.extend({

    getColumnOrder : function ()
    {
        var $grid = $(this);

        var colModel = $grid[0].p.colModel;

        var names = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                names[names.length] = name;
        });

        return names;
        //return JSON.stringify(names);
        //$('#dbgout').val(j);

    },


    setColumnOrder : function (new_order)
    {
        var $grid = $(this);

        //var new_order = JSON.parse($('#dbgout').val());
        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4

        var new_order_index = {};

        $.each(new_order, function(i,n){
            new_order_index[n] = i;
        });

        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        var colModel = $grid[0].p.colModel;

        cur = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                cur[cur.length] = name;
        });
        //cur = ['a', 'b', 'c', 'd', 'e'];
        //        0    1    2    3    4

        cur_index = {};
        $.each(cur, function(i,n){
            cur_index[n] = i;
        });


        // remapColumns: The indexes of the permutation array are the current order, the values are the new order.

        // new_order       0=>a 1=>c 2=>d 3=>b 4=>e
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        // cur             0=>a 1=>b 2=>c 3=>d 4=>e
        // cur_index       a=>0 b=>1 c=>2 d=>3 e=>4

        // permutati       0    2    3    1    4
        //                 a    c    d    b    e
        var perm = [];
        $.each(cur, function(i, name){   // 2=>b

            new_item = new_order[i];     // c goes here
            new_item_index = cur_index[new_item];

            perm[i] = new_item_index;
        });

        if (colModel[0].name == 'subgrid' || colModel[0].name == '')
        {
            perm.splice(0, 0, 0);
            $.each(perm, function(i,n){
                ++perm[i]
            });
            perm[0] = 0;
        }

        $grid.jqGrid("remapColumns", perm, true, false);

    },



});
})(jQuery);

jquery - Remember (persist) the filter, sort order and current page of...

jquery cookies persistence jqgrid filtering
Rectangle 27 0

I'm not sure that I understand you correctly, but I suppose that you could fix the problem by modifying loadComplete to the following:

loadComplete: function () {
    if ($(this).jqGrid("getGridParam", "datatype") !== "local") {
        // initial loading from the server
         setTimeout(function () {
             $("#foo").trigger("click");
         }, 50);
    }
}

You use datatype: "json" together with loadonce: true. So the datatype will be changed to "local" after the loading from the server and after calling of loadComplete. So one can test whether the datatype is not equal to "local" to detect the first loading. I placed the action, executed in case of the first loading, inside of setTimeout to allow jqGrid to finish the initial processing (with changing the datatype for example) before.

Oleg you are great, really very nice.... Thanks a lot.

@KrishnakumarSubbaiyan: You are welcome!

jquery - Reload grid is not working while applying filter in jqgrid? -...

jquery jqgrid jqgrid-php