0

I have a grid which I load from the server as the columns are controlled by the data selection. I have this part working fine, but I want to freeze column 1.

I've set the frozen:true attribute in the json model definition, but it only freezes the header.

I try to set the columns to frozen within the success event from the ajax call.

Thanks.

$(document).ready(function () {
    var functionsMapping = {
        "fncSplitOrders": function (pCellValue, pOptions, pRowObject) {
            var strCell=pCellValue.replace(/\|/g,'<br />'); 
            return strCell;
        }
    };
    $.ajax({
        type: "GET",
        url: "json/MachineJobsSummary.asp?qryDatabase="+$('#wsDatabase').val(),
        data: "",
        dataType: "json",
        success: function (result) {
            var columnData = result.mypage.outerwrapper,
                    columnNames = result.colNames,
                    columnModel = result.colModel;
            var i,objCol;

            for (i=0;i<columnModel.length;i++) {
                objCol = columnModel[i];
                if (objCol.hasOwnProperty("formatter") &&
                    functionsMapping.hasOwnProperty(objCol.formatter)) {
                    objCol.formatter = functionsMapping[objCol.formatter];
                }
            }
            $("#dataGrid").jqGrid({
                 datatype: 'jsonstring'
                ,datastr: columnData
                ,colNames: columnNames
                ,colModel: columnModel
                ,jsonReader: {
                     root: 'innerwrapper.rows'
                    ,repeatitems: false
                    ,id: "ID"
                    }
                ,gridview: true
                ,loadonce: false
                ,height: 600
                ,width:1000
                ,shrinkToFit: false
                ,rowNum: 10000
                ,autoencode: true
                ,viewrecords: true
                ,sortable: false
            });
            $("#dataGrid").jqGrid('setFrozenColumns');
        }
    });
});

Json data (I've copied from firefug but I've reformatted so hopefully no mistakes made when reformatting)

{   "colModel"  :   [   {"name": "GTTWO_PROD_GROUP","index": "GTTWO_PROD_GROUP" ,"width": 60,"align": "left", "frozen":true,"sortable":false } 
                                ,   {"name": "WSJOB_70186_1","index": "WSJOB_70186_1" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_60607","index": "WSJOB_60607" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_32446","index": "WSJOB_32446" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_61026B","index": "WSJOB_61026B" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_61838","index": "WSJOB_61838" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71102C","index": "WSJOB_71102C" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71048A","index": "WSJOB_71048A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_62565","index": "WSJOB_62565" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71056F","index": "WSJOB_71056F" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71030A","index": "WSJOB_71030A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ,   {"name": "WSJOB_71033A","index": "WSJOB_71033A" ,"width": 100,"align": "left","sortable":false, "formatter":"fncSplitOrders","unformat":"fncConcatOrders" } 
                                ]
, "colNames"    :   ["Prod Group" ,"70186_1","60607","32446","61026B","61838","71102C","71048A","62565","71056F","71030A","71033A"]
, "mypage"      :   {   "outerwrapper":  "page":"1","total":"1","records":"21", 
                                    "innerwrapper": 
                                    {"rows":[   {"ID":1,"GTTWO_PROD_GROUP":"      ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02852     |WP02853     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":" ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":2,"GTTWO_PROD_GROUP":"BARREL","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01037     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":3,"GTTWO_PROD_GROUP":"BBAR  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74512     |WP74570     ","WSJOB_32446":" ","WSJOB_61026B":"WP79037     |WP79039     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00463     |WP00464     ","WSJOB_62565":"WP99555     |WP99556     ","WSJOB_71056F":" ","WSJOB_71030A":"WP99992     |WP99993     ","WSJOB_71033A":" "}
                                                    ,   {"ID":4,"GTTWO_PROD_GROUP":"BBCAP ","WSJOB_70186_1":" ","WSJOB_60607":"WP74427     |WP74428     ","WSJOB_32446":" ","WSJOB_61026B":"WP78432     |WP79587     |WP78433     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00461     |WP00462     ","WSJOB_62565":"WP00445     |WP00447     |WP00446     ","WSJOB_71056F":" ","WSJOB_71030A":"WP99986     |WP99988     |WP99987     ","WSJOB_71033A":"WP99884     |WP99886     |WP99885     "}
                                                    ,   {"ID":5,"GTTWO_PROD_GROUP":"BKSA  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74425     |WP74616     |WP74615     |WP74426     ","WSJOB_32446":"WP72673     |WP72674     ","WSJOB_61026B":"WP78436     |WP78440     |WP78438     |WP78437     ","WSJOB_61838":" ","WSJOB_71102C":"WP02831     |WP02843     |WP02842     |WP02834     ","WSJOB_71048A":"WP00468     |WP00475     |WP00472     |WP00471     ","WSJOB_62565":"WP99559     |WP99563     |WP99561     |WP99560     ","WSJOB_71056F":"WP01035     |WP01043     ","WSJOB_71030A":"WP00013     |WP00020     |WP00017     |WP00016     ","WSJOB_71033A":"WP99890     |WP99895     |WP99894     |WP99893     "}
                                                    ,   {"ID":6,"GTTWO_PROD_GROUP":"BRGA  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74482     |WP74483     ","WSJOB_32446":" ","WSJOB_61026B":"WP78426     |WP78427     ","WSJOB_61838":" ","WSJOB_71102C":"WP02832     |WP02833     ","WSJOB_71048A":"WP00469     |WP00474     |WP00473     |WP00470     ","WSJOB_62565":"WP99572     |WP99580     |WP99575     |WP99573     ","WSJOB_71056F":"WP01032     |WP01042     |WP01041     |WP01034     ","WSJOB_71030A":"WP00014     |WP00019     |WP00018     |WP00015     ","WSJOB_71033A":"WP99891     |WP99892     "}
                                                    ,   {"ID":7,"GTTWO_PROD_GROUP":"CAP   ","WSJOB_70186_1":" ","WSJOB_60607":"WP74367     |WP74876     |WP74875     |WP74430     |WP74429     |WP74369     |WP74368     ","WSJOB_32446":" ","WSJOB_61026B":"WP78430     |WP81510     |WP78705     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00458     |WP00460     |WP00459     ","WSJOB_62565":"WP00442     |WP04759     |WP04692     |WP04156     |WP04147     |WP01596     |WP01593     |WP00450     ","WSJOB_71056F":" ","WSJOB_71030A":"WP99989     |WP99991     |WP99990     ","WSJOB_71033A":"WP99887     |WP99889     |WP99888     "}
                                                    ,   {"ID":8,"GTTWO_PROD_GROUP":"CASE  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74541     |WP74569     |WP74551     |WP74550     |WP74549     |WP74548     |WP74547     |WP74546     |WP74544     |WP74543     |WP74542     ","WSJOB_32446":" ","WSJOB_61026B":"WP78408     |WP80811     |WP80004     |WP79981     |WP79980     |WP79167     |WP79166     |WP78919     |WP78425     |WP78420     |WP78419     |WP78418     |WP78417     |WP78416     |WP78415     |WP78414     |WP78413     |WP78412     |WP78410     |WP78409     ","WSJOB_61838":" ","WSJOB_71102C":"WP02847     |WP86421     |WP86420     |WP03370     |WP03286     |WP02856     |WP02855     |WP02851     |WP02850     |WP02848     ","WSJOB_71048A":"WP00227     |WP97748     |WP00485     |WP00484     |WP00483     |WP00482     |WP00481     |WP00480     |WP00478     |WP00477     |WP00451     ","WSJOB_62565":"WP99850     |WP99865     |WP99864     |WP99863     |WP99862     |WP99861     |WP99860     |WP99859     |WP99858     |WP99855     |WP99854     |WP99853     ","WSJOB_71056F":"WP01006     |WP01039     |WP01031     |WP01016     |WP01015     |WP01013     |WP01011     |WP01007     ","WSJOB_71030A":"WP00004     |WP99984     |WP00012     |WP00011     |WP00010     |WP00009     |WP00008     |WP00007     |WP00006     |WP00005     ","WSJOB_71033A":" "}
                                                    ,   {"ID":9,"GTTWO_PROD_GROUP":"FEEDER","WSJOB_70186_1":" ","WSJOB_60607":"WP74545     ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":"WP89008     |WP89770     |WP89769     |WP89044     |WP89022     |WP89010     |WP89009     ","WSJOB_71102C":" ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01014     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":10,"GTTWO_PROD_GROUP":"GBOX  ","WSJOB_70186_1":"WP71957     |WP71959     ","WSJOB_60607":"WP74262     ","WSJOB_32446":" ","WSJOB_61026B":"WP81151     |WP81152     ","WSJOB_61838":" ","WSJOB_71102C":"WP02857     |WP02868     |WP02867     |WP02858     ","WSJOB_71048A":"WP00486     |WP00494     |WP00493     |WP00487     ","WSJOB_62565":"WP99565     ","WSJOB_71056F":"WP01048     |WP01049     ","WSJOB_71030A":"WP00022     ","WSJOB_71033A":"WP00317     "}
                                                    ,   {"ID":11,"GTTWO_PROD_GROUP":"GEAR  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74513     ","WSJOB_32446":" ","WSJOB_61026B":"WP81211     |WP81218     |WP81217     |WP81216     |WP81215     |WP81214     |WP81213     |WP81212     ","WSJOB_61838":" ","WSJOB_71102C":"WP02859     |WP02872     |WP02871     |WP02870     |WP02869     |WP02862     |WP02861     |WP02860     ","WSJOB_71048A":"WP00488     |WP00498     |WP00497     |WP00496     |WP00495     |WP00491     |WP00490     |WP00489     ","WSJOB_62565":"WP99566     |WP99570     |WP99569     |WP99568     |WP99567     ","WSJOB_71056F":"WP01050     |WP01053     |WP01052     |WP01051     ","WSJOB_71030A":"WP00023     |WP00026     |WP00025     |WP00024     ","WSJOB_71033A":"WP00318     |WP00321     |WP00320     |WP00319     "}
                                                    ,   {"ID":12,"GTTWO_PROD_GROUP":"INFLBX","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP03369     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01421     |WP05578     |WP05577     |WP01423     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":13,"GTTWO_PROD_GROUP":"LUB   ","WSJOB_70186_1":" ","WSJOB_60607":"WP74469     ","WSJOB_32446":" ","WSJOB_61026B":"WP78441     ","WSJOB_61838":" ","WSJOB_71102C":"WP02864     ","WSJOB_71048A":"WP05069     ","WSJOB_62565":"WP02866     ","WSJOB_71056F":"WP01055     ","WSJOB_71030A":"WP00027     ","WSJOB_71033A":" "}
                                                    ,   {"ID":14,"GTTWO_PROD_GROUP":"MTGF  ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":"WP79165     ","WSJOB_61838":" ","WSJOB_71102C":" ","WSJOB_71048A":"WP00729     ","WSJOB_62565":"WP01394     |WP05435     |WP01492     |WP01491     ","WSJOB_71056F":" ","WSJOB_71030A":"WP00001     |WP03710     |WP03709     ","WSJOB_71033A":" "}
                                                    ,   {"ID":15,"GTTWO_PROD_GROUP":"PACKER","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02854     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":" ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":16,"GTTWO_PROD_GROUP":"SCOMB ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":"WP78421     |WP78422     ","WSJOB_61838":" ","WSJOB_71102C":"WP03371     ","WSJOB_71048A":" ","WSJOB_62565":"WP99557     |WP99558     ","WSJOB_71056F":"WP01047     ","WSJOB_71030A":"WP99994     |WP99995     ","WSJOB_71033A":" "}
                                                    ,   {"ID":17,"GTTWO_PROD_GROUP":"SEG   ","WSJOB_70186_1":" ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02822     |WP02827     |WP02825     |WP02823     ","WSJOB_71048A":" ","WSJOB_62565":" ","WSJOB_71056F":"WP01029     |WP01030     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":18,"GTTWO_PROD_GROUP":"SPUR  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74416     ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02841     |WP02945     ","WSJOB_71048A":" ","WSJOB_62565":"WP99574     ","WSJOB_71056F":"WP01033     |WP01040     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":19,"GTTWO_PROD_GROUP":"USPD  ","WSJOB_70186_1":"WP71960     ","WSJOB_60607":" ","WSJOB_32446":" ","WSJOB_61026B":" ","WSJOB_61838":" ","WSJOB_71102C":"WP02865     ","WSJOB_71048A":" ","WSJOB_62565":"WP99571     ","WSJOB_71056F":"WP01057     ","WSJOB_71030A":" ","WSJOB_71033A":" "}
                                                    ,   {"ID":20,"GTTWO_PROD_GROUP":"WPASSY","WSJOB_70186_1":" ","WSJOB_60607":"WP74666     |WP74835     ","WSJOB_32446":" ","WSJOB_61026B":"WP78423     |WP78428     ","WSJOB_61838":" ","WSJOB_71102C":"WP02817     |WP02829     |WP02828     ","WSJOB_71048A":"WP00466     ","WSJOB_62565":"WP99552     |WP99554     ","WSJOB_71056F":"WP01005     |WP01027     |WP01025     ","WSJOB_71030A":"WP99997     |WP99999     ","WSJOB_71033A":" "}
                                                    ,   {"ID":21,"GTTWO_PROD_GROUP":"WPLT  ","WSJOB_70186_1":" ","WSJOB_60607":"WP74667     |WP74832     ","WSJOB_32446":" ","WSJOB_61026B":"WP78424     |WP78429     ","WSJOB_61838":" ","WSJOB_71102C":"WP02818     ","WSJOB_71048A":"WP00467     |WP00479     ","WSJOB_62565":"WP00443     |WP99579     |WP99553     |WP01601     |WP01595     |WP00444     ","WSJOB_71056F":"WP01026     |WP01028     ","WSJOB_71030A":"WP00000     |WP99998     ","WSJOB_71033A":" "}
                                                    ]
                                    }
                                }
}

Changes to add a template and include in the colModel.

    var myJobTemplate   = {width: 100,align: "left",sortable:false, formatter:fncSplitOrders,unformat:fncReturnValue};

Then the json for the model has been updated to 

{   "colModel"  :   [   {"name": "GTTWO_PROD_GROUP","index": "GTTWO_PROD_GROUP" ,"width": 60,"align": "left", "frozen":true,"sortable":false } 
                    ,   {"name": "WSJOB_70186_1","template":"myJobTemplate" } .....

But the fncSplitOrders isn't being executed.

I have left it in the functionsMapping which you created, and also added it as it's own function, but all that gets output if the cell data without formatting.

Obviously missing something simple as to how to trigger/reference the template/function.

Thanks.

Keith
  • 781
  • 4
  • 11
  • 21
  • Hi Oleg. Everything works great except for the triggering of the formatting function within the template which you suggested. Any advise please. Thanks. Keith. – Keith May 19 '13 at 09:53
  • I'v seen changes in the text of my question only accidentally. You should write comment to *my answer* or somewhere where I previously wrote my comment. About your last changes: `myJobTemplate` is **object** so you have to use still `functionsMapping` to change `"template":"myJobTemplate"` to `"template":myJobTemplate`. I recommend remove `index": "GTTWO_PROD_GROUP","align": "left"` from the JSON response. I recommend remove `align: "left"` from the template `myJobTemplate`. – Oleg May 19 '13 at 13:45

1 Answers1

1

First of all you should fix the JSON data. You posted in the question wrong data. The part

"outerwrapper":  "page":"1", ...}

should be fixed to

"outerwrapper": { "page":"1", ...}}

Probably it was just error in the text of your question.

Your main problem with wrong size of frozen div I described already in the answer and in this one.

So you should trigger "jqGridAfterGridComplete" event and make additional call of fixPositionsOfFrozenDivs.

The results you will see on the demo which code is

$(function () {
    "use strict";
    var functionsMapping = {
            "fncSplitOrders": function (pCellValue, pOptions, pRowObject) {
                var strCell=pCellValue.replace(/\|/g,'<br />');
                return strCell;
            }
        },
        fixPositionsOfFrozenDivs = function () {
            var $rows;
            if (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 (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());
            }
        };

    $.ajax({
        type: "GET",
        url: "Keith1.json",
        data: "",
        dataType: "json",
        success: function (result) {
            var columnData = result.mypage.outerwrapper,
                columnNames = result.colNames,
                columnModel = result.colModel,
                i,
                objCol,
                $grid = $("#dataGrid");

            for (i = 0; i<columnModel.length; i++) {
                objCol = columnModel[i];
                if (objCol.hasOwnProperty("formatter") &&
                    functionsMapping.hasOwnProperty(objCol.formatter)) {
                    objCol.formatter = functionsMapping[objCol.formatter];
                }
            }
            $grid.jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: 'innerwrapper.rows',
                    repeatitems: false,
                    id: "ID"
                }
                gridview: true,
                height: 600,
                width: 1000,
                shrinkToFit: false,
                rowNum: 10000,
                autoencode: true,
                viewrecords: true
            });
            $grid.jqGrid('setFrozenColumns');
            $grid.triggerHandler("jqGridAfterGridComplete");
            fixPositionsOfFrozenDivs.call($grid[0]);
        }
    });
});

Additionally I would recommend you to simplify column model. I recommend you remove index property, move common settings cmTemplete and remove many properties having default values: "align": "left","sortable":false.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Hi Oleg. Sorry for not being clear in my earlier comments. I have the template (myJobTemplate) defined within the javascript of the main page, not in the json object. In the colModel definition included in the json data, I reference this template, but it doesn't get used. Do I need to do something like .hasOwnProperty("template") to get myJobTemplate to be used? I need to pass the template back as a string, otherwise the json obkect is invalid (it shpows as being HTML within Firebug, not json). – Keith May 19 '13 at 14:23
  • Hi Oleg. I've sorted it. I've added if (objCol.hasOwnProperty("template") && myCellAttrMapping.hasOwnProperty(objCol.template)) { objCol.template = myCellAttrMapping[objCol.template]; }, and added var myCellAttrMapping = { "myJobTemplate": myJobTemplate }; and this now runs the formatted correctly. Thanks again for your help. – Keith May 19 '13 at 15:29