Author Topic: Error when using "checkBoxSelection" in Grids  (Read 6112 times)

lsl

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 67
    • View Profile
Error when using "checkBoxSelection" in Grids
« on: January 29, 2014, 11:41:48 am »
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 "

Code: [Select]
@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>
}

}


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: Error when using "checkBoxSelection" in Grids
« Reply #1 on: January 29, 2014, 01:25:41 pm »
Thanks for reporting this issue.

Confirmed an issue with selections when used with dataModel.location == 'remote'

I would send the fix within this week.


Regards

lsl

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 67
    • View Profile
Re: Error when using "checkBoxSelection" in Grids
« Reply #2 on: February 17, 2014, 12:03:19 pm »
dear

do we have new patch to this issue yet?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: Error when using "checkBoxSelection" in Grids
« Reply #3 on: February 18, 2014, 12:51:36 am »
You would get the fixed version by this Wednesday.

Edit
========================================
It has been sent to you as v2.0.3.a
« Last Edit: February 19, 2014, 11:51:59 pm by paramquery »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: Error when using "checkBoxSelection" in Grids
« Reply #4 on: February 26, 2014, 07:46:08 pm »
This issue has been corrected in 2.0.4