My requirement is I need to display a data in a grid with pagination.Its going to be readonly and no editing is necessary.I looked for lot of plugins and I finally found this ParamQuery Grid from jquery.
Now my controller is sending me a ViewModel object which has two properties in it. One is a Customer property which is of type CustomerModel and one is a PaymentSummary property which is a list. So I m populating both and sending it to the View. And in the view I m trying the below code. The result is I m getting the number of rows appropriately but the rows are all blank. Meaning, my recordset from db is returning 125 rows and I can see 125 rows in the grid but I can t see the data. Not sure what is the issue. I am assuming its with the data format. Could somebody please help me with this ? I am converting my model to json object but looks like its taking an array. So not sure if that may be the reason.
<html>
<head>
<!--jQuery dependencies-->
<script src="~/Scripts/jquery.min.js"></script>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<script
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-
ui.min.js"></script>
<!--PQ Grid files-->
<link href="~/Content/pqgrid.min.css" rel="stylesheet" />
<script src="~/Scripts/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link href="~/Content/pqgrid_office_theme.css" rel="stylesheet" />
<title>Test</title>
<script type="text/javascript">
$(function () {
//var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
//[2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
// [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
// [4, 'BP', '267,600.0', '22,341.0'],
// [5, 'General Motors', '192,604.0', '-10,567.0'],
// [6, 'Chevron', '189,481.0', '14,099.0'],
// [9, 'Ford Motor', '177,210.0', '2,024.0'],
// [10, 'ConocoPhillips', '166,683.0', '13,529.0'],
// [11, 'General Electric', '157,153.0', '16,353.0'],
// [12, 'Total', '152,360.7', '15,250.0'],
// [13, 'ING Group', '138,235.3', '8,958.9'],
// [14, 'Citigroup', '131,045.0', '24,589.0'],
// [15, 'AXA', '129,839.2', '5,186.5'],
// [16, 'Allianz', '121,406.0', '5,442.4'],
// [20, 'American Intl. Group', '108,905.0', '10,477.0']];
var data = @Html.Raw(Json.Encode(@Model.PaymentSummaryList));
var obj = {
width: 700, height: 300,
title: "Grid From Array",
numberCell: { resizable: true, title: "#" },
editable: false,
flexWidth: true,
showBottom: false,
resizable: true
};
obj.colModel = [
{ title: "Payment Received", width: 100, dataType: "string" },
{ title: "Interest", width: 200, dataType: "string" },
{ title: "PaymentDue", width: 150, dataType: "string", align:
"right" },
{ title: "Principal", width: 150, dataType: "string", align: "right"
}
];
obj.dataModel = { data: data };
var $grid = $("#grid_array").pqGrid(obj);
});
</script>
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
</body>
</html>
答案 0 :(得分:0)
我认为你遇到的问题与this相同;我回答了类似的问题,但不幸的是我没有收到有关建议结果的反馈。你可以尝试这样做,因为我认为它发生了同样的事情。
你的obj.colModel设置中缺少dataIndx字段:
{ title: "Payment Received", width: 100, dataType: "string" dataIndx: "payment_rec" } //if payment_rec is the name of the field
您必须正确绑定模型中的数据;当数据是静态的时,无关紧要,但是当你链接动态源时,你必须这样做。