add row function
when the grid do not have rows showing, when clicking the "add" button, it shows error
which is working good in the old stable version
attached the screen and code for testing
@using WebMatrix.Data;
@{
if(Request["action"]=="data")
{
//var xdatatoshow = @"[{""rank"":1, ""company"":""Exxon Mobil"",""revenues"": ""339,938.0"",""profits"": ""36,130.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":2, ""company"":""Wal-Mart Stores"",""revenues"": ""315,654.0"", ""profits"":""11,231.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":3, ""company"":""Royal Dutch Shell"", ""revenues"":""306,731.0"", ""profits"":""25,311.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":4, ""company"":""BP"", ""revenues"":""267,600.0"",""profits"": ""22,341.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":5, ""company"": ""General Motors"",""revenues"": ""192,604.0"", ""profits"":""-10,567.0"", ""date"": ""2014-01-26T10:32:28""}]";
var xdatatoshow = @"[]";
@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>
var dateEditor = function (ui) {
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
cls = ui.cls,
dc = $.trim(rowData[dataIndx]);
$cell.css('padding', '0');
var $inp = $("<input type='text' id='" + dataIndx + "' name='" + dataIndx + "' class='" + cls + " pq-date-editor' style='position: relative; z-index: 100;border: 3px solid rgba(0,0,0,0);'/>")
.appendTo($cell)
.val(dc).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:"dd/mm/yy",
onClose: function () {
$inp.focus();
}
});
}
var xdataSource=[];
//var xdataSource = [{"rank":1, "company":"Exxon Mobil","revenues": "339,938.0","profits": "36,130.0", "date": "2014-01-26T10:32:28"}];
var dataM = { data: xdataSource};
var obj = {
width:600,
height:300,
editable: true,
title:"Checkbox selections",
selectionModel: { type: 'none' },
minWidth: 30,
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listeners: [
{
"click": function (evt, ui)
{
var rowData = { UnitPrice: 0, Discontinued: false }; //empty row
var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
]
}
]
},
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" }
],
dataModel: dataM
,type: dateEditor
};
var $grid = $("#TESTGRID1").pqGrid(obj);
</script>
</body>
</html>
}
}
