jquery - jqGrid Trying to freeze column with colmodel defined in json . Only freezes header row -

i have grid load server columns controlled data selection. have part working fine, want freeze column 1.

i've set frozen:true attribute in json model definition, freezes header.

i try set columns frozen within success event 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;              (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 firefug i've reformatted 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 add template , include in colmodel.

    var myjobtemplate   = {width: 100,align: "left",sortable:false, formatter:fncsplitorders,unformat:fncreturnvalue}; 

then json model has been updated

{   "colmodel"  :   [   {"name": "gttwo_prod_group","index": "gttwo_prod_group" ,"width": 60,"align": "left", "frozen":true,"sortable":false }                      ,   {"name": "wsjob_70186_1","template":"myjobtemplate" } ..... 

but fncsplitorders isn't being executed.

i have left in functionsmapping created, , added it's own function, gets output if cell data without formatting.

obviously missing simple how trigger/reference template/function.

thanks.

first of should fix json data. posted in question wrong data. part

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

should fixed to

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

probably error in text of question.

your main problem wrong size of frozen div described in the answer , in this one.

so should trigger "jqgridaftergridcomplete" event , make additional call of fixpositionsoffrozendivs.

the results see on the demo 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");              (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 recommend simplify column model. recommend remove index property, move common settings cmtemplete , remove many properties having default values: "align": "left","sortable":false.