Hi Support Team.
Checkbox is not visible in Grid after screen refresh.
1) Create a Grid by adding a checkbox.
2) Update data and screen by adding additional conditions.
3) I can not see the checkbox on the Grid.
add Source]
// ---------------------------------------------
// init Create Grid
// ---------------------------------------------
function gridView( )
{
if( grid != "" && grid != null && grid != undefined )
{
setData( "" );
}
var option = selectCheckDepth( );
var gridOption = "currtime=" + toCurrTime() + option;
colModel= [
{ dataIndx: "MIN", maxWidth: 40, minWidth: 40, align: "center", resizable: false,
title: "<br>Min",
menuIcon: false,
type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editor: false,
dataType: 'bool',
cb: {
all: false, //checkbox selection in the header affect current page only.
header: true //show checkbox in header.
}
},
{ dataIndx: "MAX", maxWidth: 40, minWidth: 40, align: "center", resizable: false,
title: "<br>Max",
menuIcon: false,
type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editor: false,
dataType: 'bool',
cb: {
all: false, //checkbox selection in the header affect current page only.
header: true //show checkbox in header.
}
},
{ dataIndx: "AVG", maxWidth: 40, minWidth: 40, align: "center", resizable: false,
title: "<br>Avg",
menuIcon: false,
type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editor: false,
dataType: 'bool',
cb: {
all: false, //checkbox selection in the header affect current page only.
header: true //show checkbox in header.
}
},
{ dataIndx: "STD", maxWidth: 40, minWidth: 40, align: "center", resizable: false,
title: "<br>Dev",
menuIcon: false,
type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editor: false,
dataType: 'bool',
cb: {
all: false, //checkbox selection in the header affect current page only.
header: true //show checkbox in header.
}
},
{ dataIndx: "CNT", maxWidth: 40, minWidth: 40, align: "center", resizable: false,
title: "<br>Count",
menuIcon: false,
type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editor: false,
dataType: 'bool',
cb: {
all: false, //checkbox selection in the header affect current page only.
header: true //show checkbox in header.
}
},
{ title: "ITEM_KEY" , dataIndx: "ITEM_KEY" , width:200, dataType: "string" , hidden:true }, // , type: 'checkbox', useLabel: true
{ title: "TABLE_ID" , dataIndx: "TABLE_ID" , width:100, dataType: "string" , hidden:true},
{ title: "ITEM ID" , dataIndx: "ITEM_ID" , width:100, dataType: "string" , hidden:true},
{ title: "Column" , dataIndx: "ITEM_NAME" , width:300, dataType: "string" },
];
var groupModel = {
on: true,
summaryInTitleRow: 'all', //to display summary in the title row.
dataIndx: [ 'DEPT_NAME', 'FAC_NAME' ],
//showSummary: [true], //to display summary at end of every group.
title: [
"{0} ({1})",
"{0} - {1}"
]
};
//Define Paramquery Object
var obj = {
width: 560,
height: 630,
scrollModel: {autoFit: true},
numberCell: { resizable: true, width: 50, title: '#'},
resizable: true,
showTitle:false,
showBottom: false,
stripeRows: false,
roundCorners: false,
freezeCols:5,
scrollModel: {
autoFit:false
},
toolbar: {
items: [
{
type: 'button',
label: "Chart",
listener: function () {
var data = this.option('dataModel.data'),
cols = [];
tbl = "";
for (var i = 0, len = data.length; i < len; i++) {
var rowData = data;
tbl = rowData.TABLE_ID;
if (rowData.MIN) {
cols.push( "MIN_" + rowData.ITEM_ID + " as '" + rowData.ITEM_NAME + "Min Value'" );
}
}
//sort the ids.
// cols = cols.sort(function (a, b) { return (a - b); })
chartView( tbl, cols );
}
} ]
},
selectionModel: { type: 'row', mode :'block', fireSelectChange: true },
//groupModel: groupModel,
// swipeModel: {on: false},
};
//Adds ColModel from AJAX Call
obj.colModel = colModel;
obj.dataModel = {
dataType: "JSON",
location: "remote",
url: '../ajax/jqgrid_P021.jsp?' + gridOption,
getData: function (dataJSON) {
return { data: dataJSON.data };
}
}
//Set Object
grid = $("#grid_view").pqGrid(obj);
$('#grid_view').css('fontSize', '13px');
}
// ---------------------------------------------
// data Refresh
// ---------------------------------------------
function setData( basedate )
{
var option = selectCheckDepth( );
var gridOption = "currtime=" + toCurrTime() + "&basedate=" + basedate + option;
$("#grid_view").pqGrid( 'option', 'dataModel.url', '../ajax/jqgrid_P021.jsp?' + gridOption ) ;
$("#grid_view").pqGrid( 'refreshDataAndView');
}
