JQGrid Frozen column with jsonstring datatype

Question

I have dynamically generated jqgrid with datatype "jsonstring". Seems .jqGrid('setFrozenColumns'); not working properly. Only Headers are freezing not the actual data rows. When i sort the grid frozen column working. but it break the layout.

below is my implementation

    $.ajax({
            url: myUrl,
            type: 'POST',
            data: { issueDate:issueDate },
            success: function (result) {

                var i;
                var cm;
                var colModels = result.Json.colModels;
                var colNames = result.Json.colNames;
                var coldata = result.Json.data.options;
                for (i = 0; i < colModels.length; i++) {
                    cm = colModels[i];
                    if (cm.hasOwnProperty("formatter")) {
                        cm.formatter = functionsMapping[cm.formatter];
                    }
                }

                $("#ObserationSummarytable").jqGrid({
                    datatype: 'jsonstring',
                    datastr: coldata,
                    colNames: colNames,
                    colModel: colModels,
                    jsonReader: {
                        root: 'rows',
                        repeatitems: false
                    },
                    gridview: true,
                    rowNum: 50,
                    width: 1200,
                    height: 500,
                    loadtext: "Loading.....",
                    hoverrows: false,
                    autoencode: true,
                    ignoreCase: true,
                    scrollerbar: true,
                    rowList: [50, 100, 150],
                    viewrecords: true,
                    autowidth: true,
                    shrinkToFit: false,
                    forceFit: true,
                    pager: $('#ObserationSummarypager'),
                    loadonce: true,
                    gridComplete: LoadComplete
}).jqGrid('setFrozenColumns');

Generated colmodel

[{"name":"District", "width":80, "align":"left", "sortable": true,"formatter":"ShowGraphlink","frozen": true },{"name":"StationName","width":150, "align":"left", "sortable": true,"formatter":"ShowGraphlink","frozen": true },{"name":"FDL", "width":40, "align":"center", "sortable": true ,"formatter":"FormatFDL" ,"frozen": true  },{"name":"DataType", "width":60, "align":"left", "sortable": false,"formatter":"FormatDataType","frozen": true },{"name":"AWDValue","hidden": true ,"frozen": true  },{"name":"08:44","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"08:36","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"08:14","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"08:06","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:44","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:36","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:14","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"07:06","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"},{"name":"06:44","width":40, "align":"center","title":false,"sortable": false,"formatter":"FormatCellValues"}]

Load complete function

   function LoadComplete() {
        var gridRowCount = $('#ObserationSummarytable').getGridParam('records');
        if (gridRowCount == null || gridRowCount == 0) // are there any records?
        {

            $("#divNoRecord").show();
            $("#divSummaryGrid").hide();
        } else {
            $("#divNoRecord").hide();
            $("#divSummaryGrid").show();

        }
    }

function mapping

var functionsMapping = {
        // here we define the implementations of the custom formatter which we use
        "ShowGraphlink": function (cellValue, opts, rowObject) {

            return "link";
        },
        "FormatCellValues": function (cellValue, opts, rowObject) {

            return cellHtml;
        },
        "FormatDataType": function (cellValue, opts, rowObject) {

            return 'some html';
        },
        "FormatFDL": function (cellValue, opts, rowObject) {

            return cellValue;

        }
    };

Sorry, but `colModels` and `LoadComplete` can contains information which very important to the problem. Without correct settings in `colModels` frozen column feature can't work. Posting the code with `colModel: colModels` is the same like posting `some my code with an error` and asking to help to find the error. Moreover if you have an example which not work that you should include test data `coldata` too. In the case the problem which you describe can be **reproduced** which is the half of finding the solution. — Oleg, Jul 23 '14 at 11:01
By the way `pager: $('#ObserationSummarypager')` should be replaced to `pager: '#ObserationSummarypager'`, you should add `gridview: true` option to improve performance (see [here](http://stackoverflow.com/a/12519858/315935)). The option `loadonce: true` have no sense in case of `datatype: 'jsonstring'`. Mostly usage of `datatype: 'jsonstring'` have no advantage too and one should use `datatype: 'local'` with `data` instead. The option `scrollerbar` not exist in jqGrid and it will be just ignored. — Oleg, Jul 23 '14 at 11:06
This grid is dynamically generated grid. colmodels return from the ajax request and has the following format colModelString.Append("{\"name\":\"DataType\", \"width\":60, \"align\":\"left\", \"sortable\": false,\"formatter\":\"FormatDataType\",\"frozen\": true },"); — Mahesh, Jul 23 '14 at 11:14
You should include all information which is related to your question in **the text of your question**. It doesn't matter how you generate the grid and the data which not work with `setFrozenColumns`. You should just reduce your example to some code with test data which can be reproduced by other people. — Oleg, Jul 23 '14 at 11:18
Is the problem still exist if you remove `gridComplete: LoadComplete`? If the answer is "yes", that you should remove the code. If the code is important, then you should include how `'#ObserationSummarytable'`, `"#divNoRecord"` and `"#divSummaryGrid"` need be defined. You should post **full code** which can be reproduced. `colModels` with one column having `frozen: true` have no sense. Where is `FormatDataType` etc.? ... — Oleg, Jul 23 '14 at 11:20
Sorry, but nobody have an interest which code exactly you use. You should **prepare** the question before you post it. You should remove all not really important implementation details. For example you can reduce the number of columns, remove unneeded formatters and so on. If formatters are important you should include the code of `ShowGraphlink`, `FormatFDL`, `FormatDataType`, `FormatCellValues` functions. By the way usage of `"name":"08:44"` is very bad. the value of `name` will be used to built `id` of some elements. You should don't use and special metacharacters in ids. — Oleg, Jul 23 '14 at 11:31
Typical problem in jqGrid is filling it with wrong data. So you really have to post some test data `coldata` which can be used to reproduce the problem. — Oleg, Jul 23 '14 at 11:33
Thank you very much for your advice. I will investigate the issue with your advice. — Mahesh, Jul 23 '14 at 11:42
You are welcome! One more remark: jqGrid **always** assign `id` attribute to every row (every `` element). So it's strictly recommended that you include `id` attribute with **unique** value in every item of data. Alternatively you can include `key: true` property in **one** column of `colModel` which already contains the unique id data. Don't forget to include `gridview: true` in all the grids which you create to improve the performance without any disadvantages. — Oleg, Jul 23 '14 at 11:52
Thank you very much i finally manage to fixed the issue you previously answered http://stackoverflow.com/questions/8686616/how-can-i-get-jqgrid-frozen-columns-to-work-with-word-wrap-on — Mahesh, Jul 25 '14 at 05:51
Do you have any idea why do i need to reload the grid freeze column works properly. if i do not reload the grid only column header is freeze. Basically if i use reload functions .jqGrid('setFrozenColumns').trigger("reloadGrid"); freeze column work fine. But take a while to relaod the grid. if i use .jqGrid('setFrozenColumns'); only column header freeze not rows. Thank you. — Mahesh, Jul 26 '14 at 11:54
it's old and well known problem. I described it [here](http://stackoverflow.com/a/8620574/315935), [here](http://stackoverflow.com/a/8771429/315935) and finally [here](http://stackoverflow.com/a/16517257/315935). I interpret if as a bug, but Tony, the developer of jqGrid have another opinion. In any way you will find the description of the problem and the solution in the referenced answers. — Oleg, Jul 26 '14 at 15:03
Thanks Oleg. I update JQ grid version to 4.6.0. Now no need to reload the grid. — Mahesh, Jul 27 '14 at 09:45

score 0 · Answer 1 · edited May 23 '17 at 10:25

I manage to fixed the issue help with How can i get jqgrid frozen columns to work with word wrap on

It is also important to set the row height

 .ui-jqgrid tr.jqgrow td { height: 40px; padding-top: 0px;}

Then after that need to reload the grid again. Not sure why it need to relaod.

.jqGrid('setFrozenColumns').trigger("reloadGrid");

If you are upgrade jqgrid version to 4.6.0. It is no necessary to reload the grid.

After end of loading the gird calling fallowing method will fixed the header rows. not necessary

 function FixedColHeaders()
    {

        fixPositionsOfFrozenDivs.call($("#ObserationSummarytable")[0]);

    }

    fixPositionsOfFrozenDivs = function () {
        var $rows;
        if (typeof this.grid.fbDiv !== "undefined") {
            $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
            $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
                var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                if ($(this).hasClass("jqgrow")) {
                    $(this).height(rowHight);
                    rowHightFrozen = $(this).height();
                    if (rowHight !== rowHightFrozen) {
                        $(this).height(rowHight + (rowHight - rowHightFrozen));
                    }
                }
            });
            $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
            $(this.grid.fbDiv).css($(this.grid.bDiv).position());
        }
        if (typeof this.grid.fhDiv !== "undefined") {
            $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
            $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
                var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                $(this).height(rowHight);
                rowHightFrozen = $(this).height();
                if (rowHight !== rowHightFrozen) {
                    $(this).height(rowHight + (rowHight - rowHightFrozen));
                }
            });
            $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
            $(this.grid.fhDiv).css($(this.grid.hDiv).position());
        }
    };

JQGrid Frozen column with jsonstring datatype

1 Answers1