JqGrid persist grid Parameters and retrieving it - Not able to set it

Question

I have a jqGrid where I am trying to give the user the choice to save their own views. These views are stored in the db with all the parameters. I have around 30 columns so its impossible to fit the whole grid in one page so I have given the option to move the rows around, adjust the width, etc and then being able to save the parameters.

For this I have this code to save the whole grid in the DB

var saveLayoutDialog =
    "<div title='Save Layout'>"+
    "<label style='width: 100%; !important;'>Name the layout</label></br>" +
    "<input type='text' name='nameOfLayout' id='nameOfLayout' placeholder='Name of Layout' style='width: 100%; !important;'>" +
    "</div>";
$(saveLayoutDialog).dialog({
    modal: true,
    buttons: {
        'OK': function () {
            $.ajax({
                type: 'POST',
                url: Routing.generate('save_grid_parameters_homepage', { gridName: 'PODetail' }) ,
                data: {
                    'layoutName': $("#nameOfLayout").val(),
                    'gridData': JSON.stringify($("#list").getGridParam())
                },
                success: function(data){
                    if(data.success == 'success')
                    {
                    }
                    else if(data.success == 'fail')
                    {
                    }
                }
            });
            $(this).dialog('close');
        },
        'CANCEL': function () {
            $(this).dialog('close');
        }
    }
});

This is working fine and I am able to save the data on the dB.

On the grid I have a button to change the design of the layout. So when the user clicks on the button the available layouts (previously saved in the dB) appears and user can select one and the design of the grid should change accordingly.

This is the code for the button:

.navButtonAdd("#pager",{
    id: "changeDesign",
    caption:"Change Design",
    onClickButton: function(){
        var htmlForPopup = "<div id='changeDesign' title='Change Design'>"+
            "<label style='width: 100%; !important;'>SELECT A DESIGN</label>" +
            "<div class='radio'>";

        $.ajax({
            url: Routing.generate('get_grid_layouts_homepage', { gridName: 'PODetail' }),
            success: function(data){
                $.each (data, function (bb) {
                    htmlForPopup +=
                        "<input type='radio' name='gridLayouts' id='"+data[bb].layoutName+"' value='"+data[bb].gridData+"' style='width: 20%; !important;'>"+data[bb].layoutName+"</br>";
                });
                htmlForPopup += "</div></div>";
                $(htmlForPopup).dialog({
                    modal: true,
                    buttons: {
                        'OK': function() {
                            //console.log(JSON.parse($('input[name=gridLayouts]:checked').val()));
                            $("#list").setGridParam(JSON.parse($('input[name=gridLayouts]:checked').val())).trigger("reloadGrid");
                            $(this).dialog('close');
                        }
                    }
                });
            }
        });
    }
});

Problem: The desired is not working properly. The rows are not moving around and the column data moving around is not being displayed properly.

Example: This is the ideal grid that gets loaded by default. This is the pop up that shows up on the click of the button code show above.

On clicking on one of the options, ideally the Discount column and the Cost column should switch their positions with their respective data as well. But that is not happening Instead this is happening: The data of the discount and the cost column is being switched but the title itself is not switched. Also under Cost (which ideally should have Discount column's data gets converted into NaN (which I am assuming is because of data type mismatch)

What am I doing wrong here?

EDIT 1: jqGrid version 4.8.2 and please let me know if the full jqGrid is required and I will update the question with the code.

EDIT 2: Working fiddle

Sorry, but if you have problem with jqGrid then you should include JavaScript code which create it and the test data which you use to fill the grid. The only line of code which has relation with jqGrid is `$("#list").setGridParam(JSON.parse($('input[name=gridLayouts]:checked').val())).trigger("reloadGrid");`, but it's wrong. You call `setGridParam` using **one** parameter: `$("#list").setGridParam(oneParam)` instead of using two parameters: the parameter name and parameter value. The most effective would be to prepare the demo which demonstrates the problem. — Oleg, Aug 12 '15 at 13:34
@Oleg Apologies, I will update the question with a working fiddle. — Dipen Shah, Aug 12 '15 at 13:41
@Oleg I have updated the question with a partially working fiddle. but the code is mostly the same as on this [question](http://stackoverflow.com/questions/30645088/jqgrid-change-values-of-editable-cell-on-change-of-another-cell-dependent-colum) — Dipen Shah, Aug 12 '15 at 13:51
What `datatype` you use in your real application? Do you load the data from the server? Why you use so strange values for `index` properties. The values are wrong for `datatype: "local"`. If you need to create the demo which load the data from the server you can use Echo service of JSFiddle. See http://jsfiddle.net/OlegKi/x0xm6zbs/2/ for example. One need to post the server response as `json` parameter of `postData` and the `url: "/echo/json/"` will returns the data. If you do need to use `datatype: "local"` then you need add `localReader: {repeatitems: true}` and make other changes. — Oleg, Aug 12 '15 at 13:59
@Oleg One thing I also want to mention is that the data that I am retrieving from the database is a full json that I receive from the jqGrid's `getGridParam` function. I am not sure not if I can use the same json to put into `setGridParam`. Example data that I am trying to put into `setGridParam` : http://jsfiddle.net/4j7ww50s/ — Dipen Shah, Aug 12 '15 at 14:19
My real datatype in the app is json. Please see http://jsfiddle.net/HJema/109 . This has the real response with all the real code that I am using in my app. I have used Echo Service of jsfiddle in this. Also I have updated the index values. It was a mistake I previously ignored. — Dipen Shah, Aug 12 '15 at 14:45
I have many advices to the code of the demo, but all there don't concern your main question, if I correctly understand it. I suppose that you have object with many jqGrid parameters in `$('input[name=gridLayouts]:checked').val()`, but you don't included any example. You use `reloadGrid`, but it reloads **the data** of the grid and make no changes in outer part (column headers for example). To switch `Discount` and `Cost` columns for example you have to use `remapColumns`, to show/hide a column you need use `showCol`/`hideCol` methods and so on. Some changes required **recreating** the grid. — Oleg, Aug 12 '15 at 16:24
Probably you can look at [the answer](http://stackoverflow.com/a/31663268/315935), [this one](http://stackoverflow.com/a/8547852/315935) or [the oldest one](http://stackoverflow.com/a/8436273/315935). The answers shows how to reload the grid (on the example of reloading of the page) with previously save **state of the grid** (selected rows, page number, column order, sort columns and so on). [The demo](http://www.ok-soft-gmbh.com/jqGrid/OK/ColumnChooserAndLocalStorage2_singleSelect.htm) saves the state in `localStorage`, but one can modify it to use Database instead. I hope it can help you. — Oleg, Aug 12 '15 at 16:28
Please feel free to advice me on improving the code if you have the time. I thank you in advance for that. Yes you are correct my whole json is stored in `$('input[name=gridLayouts]:checked').val()`. Also I had no idea about remapColumns, I will try it and let you know if it works. — Dipen Shah, Aug 12 '15 at 16:48
I have updated my fiddle one more time and it precisely describes my problem [here](http://jsfiddle.net/HJema/111/). Please take a look if you can understand it better. I will take a look at the answers provided in your link. Thanks a ton with all the help with jqGrid. — Dipen Shah, Aug 12 '15 at 16:52
@Oleg I have a question for you. If I only want to save the width of the column preferences, order of the column preferences, hidden/show column preferences, what might be the best way to achieve this? Because clearly my way is not the right way apparently. — Dipen Shah, Aug 12 '15 at 17:52
I posted first new `setColWidth` method in [the answer](http://stackoverflow.com/a/20030652/315935) originally. You can download the last version of the method [here](https://github.com/OlegKi/jqGrid-plugins) or better to use [free jqGrid](https://github.com/free-jqgrid/jqGrid), the fork which I develop. It includes `setColWidth`. You can extend the response of the server with additional information about users preferences of the column width and call `setColWidth` method inside of `beforeProcessing` callback for example. See [the answer](http://stackoverflow.com/a/19427444/315935). — Oleg, Aug 12 '15 at 18:47
some advieces: you should remove `index` from all `colModel` items, remove `editable: false` and replace all `template: commonSettings` to one *jqGrid option* `cmTemplate: commonSettings`. The `width` value (see `width: '90'`) should be number (like `width: 90`). I recommend you to consider to use `loadonce: true` and return *all data at once* from the server. If you have less then about 10000 rows you can have performance advantage from the usage of `loadonce: true`. You should use `jQuery(this)` instead of `jQuery('#list')` in all callbacks.... — Oleg, Aug 12 '15 at 19:18
I'd recommend you to replace `loadComplete` with usage of `rowattr`. It will improve the performance of the grid. See [the answer](http://stackoverflow.com/a/10531680/315935) as an example. I made some modifications of your demo: http://jsfiddle.net/OlegKi/HJema/112/ to demonstrates some from my suggestions. I used two column templates and some other small changes. — Oleg, Aug 12 '15 at 19:26
Thank you so much for the advices. All advices considered and changed. Except I cannot use `loadonce: true` because I sometimes have over 200,000 records so its not really a preferable choice for me. — Dipen Shah, Aug 12 '15 at 20:18
Also I upgraded to your fork of free jqGrid. Everything works fine except the **reordering of columns using the mouse**. I have set `sortable: true` and jquery ui files included ofcourse. If I remove free jqGrid scripts and add in the old 4.8.2 scripts again the reordering of columns seems to work again. Could this be a bug in your version of jqGrid or am I doing something wrong here? — Dipen Shah, Aug 12 '15 at 20:22
The problem with the reordering of columns using mouse is shown in here http://jsfiddle.net/HJema/113/ . I have updated the sources with the free jqGrid sources. I apologize for wasting so much of your time. Thank you. — Dipen Shah, Aug 12 '15 at 20:27
Thank you for the bug report! I made some changes in base module which broken `sortable: true` implementation. I posted just now the corresponding fix. One more small fix in your demo: one need include `jquery-ui.min.js` for `sortable: true`. See http://jsfiddle.net/OlegKi/HJema/114/ where I use the new code directly from GitHub and included Font Awesome additionally. I recommend you to read some articles in [the wiki](https://github.com/free-jqgrid/jqGrid/wiki) if you are new in free jqGrid. About `loadonce: true` is everything clear - it's not an option in case of over 200,000 records. — Oleg, Aug 12 '15 at 20:52
you're welcome and thank you for the fix @Oleg I have included the new code and reordering works fine. Yes free jqGrid is very new to me. — Dipen Shah, Aug 12 '15 at 21:07
Hi @Oleg I am using your code as shown in this [demo](http://www.ok-soft-gmbh.com/jqGrid/SaveGridState.htm). However this doesn't seem to be saving the remapColumns value. If I reorder some of the columns with mouse and then refresh the page the order of the columns seems to have lost. Upon debugging I found that the value of `permutation` seems to be empty. How can I get the value of this `this.jqGrid('getGridParam', 'remapColumns')` doesn't to get the value. What do I need to do inorder to save these values and apply them upon page reload too? — Dipen Shah, Aug 13 '15 at 14:42
I would recommend you to try [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/ColumnChooserAndLocalStorage2_singleSelect.htm) which I created for [the answer](http://stackoverflow.com/a/31663268/315935). It uses the latest free jqGrid sources from GitHub. Try to reorder columns, hide some columns, change the sorting order, select a row and then reload the page with F5 (reopen the same page). You will see that the grid state will be the same. — Oleg, Aug 13 '15 at 14:48
Thank you @Oleg This works as required. You have been of incredible help. Can you formulate an answer with just the links to your demos and old answers so that its helpful to the future users and I can give you the reputation for this question. Thanks again. — Dipen Shah, Aug 13 '15 at 15:17
OK, I will do that soon. I think you is not the only person who have such questions. I hope it will help other too. — Oleg, Aug 13 '15 at 15:21
Hi @Oleg Can you please take a look at this code when you have time and see why the filtertoolbar's search is broken? I am not asking a new question because the code is the same as in [jsfiddle.net/OlegKi/HJema/114/](http://jsfiddle.net/OlegKi/HJema/114/) . I have tried to figure it out a lot but it doesn't seem to work. Thanks in advance for taking the time. If you suggest I'll ask a new question. — Dipen Shah, Aug 14 '15 at 12:58
It looks like `$grid.trigger("reloadGrid");` is not working anywhere throughout the code. Would you know if this is a bug or something I am doing wrong. — Dipen Shah, Aug 14 '15 at 13:17
My mistake here's the updated code without those variable undefined errors http://jsfiddle.net/HJema/120/ — Dipen Shah, Aug 14 '15 at 13:32
I made only a part of modifications of your code. To be able to use `filterToolbar` you need to do additional changes. First of all `beforeSearch` callback of `filterToolbar` contains undefined variable `containsOrNot`, `"POD_UISelected"` column contains `stype: 'select'`, but no `searchoptions` with the data like `searchoptions: { sopt: ["eq", "ne"], value: ":Any;True:Yes;False:No" }`. If you fix the problem of just would use `template: "booleanCheckboxFa"` then the searching will work. — Oleg, Aug 14 '15 at 13:47
@Oleg I have mentioned this question and you [here](http://meta.stackoverflow.com/questions/303045/10-million-questions-lets-share-some-stories-that-the-number-doesnt-convey/303321#303321) Please take a look when you are free. — Dipen Shah, Aug 24 '15 at 18:50
Thank you very much for many good words, which you wrote about me. Sometimes I doubt, whether I should continue to spend many my time for helping people who are absolutely unknown to me. After changing license of jqGrid I started develop [free jqGrid](https://github.com/free-jqgrid/jqGrid) which gives me no money too. The knowledge that my efforts really help somebody is **very important** for me. Thank you very much for your post! It helps me to continue posting answers on the stackoverflow. I think that I will do post soon new documentation of jqGrid with the list of many demos/code example. — Oleg, Aug 24 '15 at 20:34
@Oleg That is the exact reason why this post was necessary on StackOverflow. I don't think anyone can help unknowns like you and people on StackOverflow do. It requires a lot of patience. Once again thank you for making [free jqGrid](https://github.com/free-jqgrid/jqGrid) and please keep contributing to StackOverflow. It means a lot to new developers like me. And looking forward to the new documentation. — Dipen Shah, Aug 24 '15 at 20:53

score 1 · Accepted Answer · edited May 23 '17 at 12:16

You call setGridParam using one parameter: the value which you get from $('input[name=gridLayouts]:checked').val(). After that you call reloadGrid which reload the data only without reloading many other options of jqGrid. To make some changes if outer parts of the grid one have to use corresponding jqGrid methods. For example you have to use remapColumns or better remapColumnsByName to switch columns (the columns "Discount" and "Cost" for example). In the same way you need use showCol/hideCol methods to show/hide a column of the grid and so on. Some changes of jqGrid parameter required recreating the grid.

I would recommend you to try the demo which I created for the answer. The demo shows how one can save the state of the grid in localStorage of the web browser. Try to reorder columns in the demo, hide some columns, change the sorting order, select a row and then reload the page with F5 (reopen the same page). It is not exactly what you do, but the most technical problems are the same. I hope that it will help you to implement your requirements.

P.S. Thank you one more for the bug report in free jqGrid. I posted the corresponding fix to GitHub.

Thanks @Oleg You're the best. – Dipen Shah Aug 13 '15 at 15:34 — Dipen Shah, Aug 13 '15 at 15:34

JqGrid persist grid Parameters and retrieving it - Not able to set it

1 Answers1