Keith
Reputation: 801
jqGrid Trying to freeze column with colmodel defined in json . Only freezes header row
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.
Upvotes: 0
Views: 2189
Answers (1)
Oleg
Reputation: 222017
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.
Upvotes: 1
Related Questions
- JQgrid Length of colNames and colModel error
- Freezing column in jqgrid is not working
- JQGrid - frozen column - freezing column to right end of the grid
- jqGrid Frozen Columns in a Subgrid
- Freezing Columns in JQGrid
- jqgrid frozen column issue with chrome browser
- why doesn't Jqgrid frozen column seem to work with filter rows and filter heading?
- jqgrid freeze columns
- jqgrid - json looping issue with colModel in JSON response
- Setting JqGrid's colName and colModel from JSON data