We are using cshtml with razor syntax
we find that when we define the grid to use remote data source with a "checkBoxSelection", we will see this error when we creating the grid
below code shows 2 grids with same definitions, except the datamodel type is remote or local.
local datamodel success without any problem.
remote datamodel failed when creating the grid: grid is shown but error shown
when we ignore it and try to use the grid, we ticked some boxes and use the scrollbar to scroll down, the changes we made on the checkboxcolumn disappeared.
attachment show the error message.
"Uncaught TypeError: Cannot read property 'length' of undefined "
@using WebMatrix.Data;
@{
if(Request["action"]=="data")
{
var xdatatoshow = @"[{""rank"":1, ""company"":""Exxon Mobil"",""revenues"": ""339,938.0"",""profits"": ""36,130.0"", ""state"": true},{""rank"":2, ""company"":""Wal-Mart Stores"",""revenues"": ""315,654.0"", ""profits"":""11,231.0"", ""state"": false},{""rank"":3, ""company"":""Royal Dutch Shell"", ""revenues"":""306,731.0"", ""profits"":""25,311.0"", ""state"": false},{""rank"":4, ""company"":""BP"", ""revenues"":""267,600.0"",""profits"": ""22,341.0"", ""state"": false},{""rank"":5, ""company"": ""General Motors"",""revenues"": ""192,604.0"", ""profits"":""-10,567.0"", ""state"": true}]";
@Html.Raw(xdatatoshow)
}
else
{
<html lang="en">
<head>
<link rel="stylesheet" href="./pqgrid/jquery-ui.css">
<script type="text/javascript" async="" src="./pqgrid/ga.js"></script>
<script src="./pqgrid/jquery-2.0.3.min.js"></script>
<script src="./pqgrid/jquery-ui.min.js"></script>
<script type="text/javascript" src="./pqgrid/shCore.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushJScript.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushxml.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcSharp.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcss.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushphp.js"></script>
<link type="text/css" rel="stylesheet" href="./pqgrid/shCoreDefault.css">
<link type="text/css" rel="stylesheet" href="./pqgrid/syntaxhighlighter.css">
<link rel="stylesheet" href="./pqgrid/pqgrid.min.css">
<script src="./pqgrid/touch-punch.js"></script>
<script src="./pqgrid/pqgrid.min.js"></script>
<script src="./pqgrid/localize/pq-localize-zh.js"></script>
<script src="./pqgrid/localize/pq-localize-es.js"></script>
<script src="./pqgrid/localize/pq-localize-it.js"></script>
<script src="./pqgrid/localize/pq-localize-ja.js"></script>
<script src="./pqgrid/localize/pq-localize-hu.js"></script>
<script src="./pqgrid/localize/pq-localize-nl.js"></script>
<script src="./pqgrid/localize/pq-localize-de.js"></script>
</head>
<body>
<div id="TESTGRID1"></div>
<div id="TESTGRID2"></div>
<script>
//TESTGRID1
console.log('GRID1 STARTED');
var xdata = [
{rank:1, company:'Exxon Mobil',revenues: '339,938.0',profits: '36,130.0', state: true},
{rank:2, company:'Wal-Mart Stores',revenues: '315,654.0', profits:'11,231.0', state: false},
{rank:3, company:'Royal Dutch Shell', revenues:'306,731.0', profits:'25,311.0', state: false},
{rank:4, company:'BP', revenues:'267,600.0',profits: '22,341.0', state: false},
{rank:5, company: 'General Motors',revenues: '192,604.0', profits:'-10,567.0', state: true}
];
var obj = {
width:700,
height:150,
editable: false,
title:"Checkbox selections",
selectionModel: { type: 'none' },
minWidth: 30,
flexWidth: true,
colModel:
[
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 200, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"profits" },
{ title: "", dataIndx: "state", width: 30, align: "center", type:'checkBoxSelection', cls: 'checkboxColumn', resizable: false }
],
dataModel: {
data: xdata,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
}
};
var $grid = $("#TESTGRID1").pqGrid(obj);
console.log('GRID1 CREATED');
//END OF TESTGRID1
console.log('DIVISION BETWEEN 2 GRIDS');
//TESTGRID2
console.log('GRID2 STARTED');
var dataM = {
location: "remote"
,sorting: "remote"
,paging: "local"
,dataType: "JSON"
,method: "POST"
,getData: function (dataJSON) {var data = dataJSON; return {data: data };}
,postData : xdata
,url: "g_grid_test.cshtml?action=data"
,recIndx:"rank"
};
var obj = {
width:700,
height:150,
editable: false,
title:"Checkbox selections",
selectionModel: { type: 'none' },
minWidth: 30,
flexWidth: true,
colModel:
[
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 200, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"profits" },
{ title: "", dataIndx: "state", width: 30, align: "center", type:'checkBoxSelection', cls: 'checkboxColumn', resizable: false }
],
dataModel: dataM
};
var $grid = $("#TESTGRID2").pqGrid(obj);
console.log('GRID2 CREATED');
//END OF TESTGRID2
</script>
</body>
</html>
}
}
