I would like to size a grid to a fixed height like 500px. If lets say only two records are placed in the grid I would like to fill the remaining rows as empty rows, and not make them clickable, so the grid fills 100% of its available height. Is there an easy way to do this?
Thanks,
Bob
1)Set height:100%
2)you can change jqgrid background color
otherwise you can do like this...
This is sample...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test </title>
<link href="css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var EditableID = 0;
jQuery("#list1").jqGrid({
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 75 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right" },
{ name: 'tax', index: 'tax', width: 80, align: "right" },
{ name: 'total', index: 'total', width: 80, align: "right" },
{ name: 'note', index: 'note', width: 150, editoptions: { size: "20", maxlength: "200" }, editable: true, edittype: 'text', width: 75, sortable: true }
],
rowNum: 22,
height: 500,
loadComplete: function(data) {
var NoOfCellAdd = Number($("#list1").parent().parent().css('height').split('px')[0]) / 23;
for (var i = data.records; i <= NoOfCellAdd; i++) {
$("#list1").addRowData(i + 1, {});
}
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
if (rowid <= EditableID) {
if ($("#lastCellId").val() != -1)
$("#list1").saveRow($("#lastCellId").val(), false, 'clientArray');
$('#list1').editRow(rowid, iCol, true);
$("input, text", e.target).focus();
$("#lastCellId").val(rowid);
}
},
autowidth: true,
rowList: [10, 20, 30],
pager: jQuery('#pager1'),
//sortname: 'id',
viewrecords: true,
// sortorder: "desc",
caption: "XML Example"
}).navGrid('#pager1', { edit: false, add: false, del: false });
var mydata = [
{ id: 1, invdate: "2007-10-01", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: 2, invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: 3, invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: 4, invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: 5, invdate: "2007-10-04", name: "test5", note: "note5", amount: "200.00", tax: "10.00", total: "210.00" },
{id: 6, invdate: "2007-10-02", name: "test30", note: "note30", amount: "300.00", tax: "20.00", total: "320.00" }
];
EditableID = mydata.length;
$("#list1").jqGrid('setGridParam', { datatype: 'local', data: mydata }).trigger("reloadGrid");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="list1">
</table>
<div id="pager1">
</div>
</div>
<input type="hidden" id="lastCellId" name="Language" value="-1">
</form>
</body>
</html>
// --------------------------------------------------------------------------------
// This is working fine...but this is not right way to do...
// **rowNum: 22,height:500px**
Related
I am new to jqgrid and i had created two buttons one for edit and another to save the edited works but the function that i had created is not working :( what will be the reason for that pls sugggest me a soln below is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
//$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function () {
"use strict";
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "3note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "3note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "3note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "3note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "3note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "3note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "3note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "3note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-02", name: "test9", note: "3note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "3note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "3note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "3note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDatepicker = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
$grid.jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "name", width: 65, editrules: {required: true} },
{ name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
{ name: "amount", width: 75, template: numberTemplate },
{ name: "tax", width: 52, template: numberTemplate },
{ name: "total", width: 60, template: numberTemplate },
{name: "closed", width: 70, align: "center", formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{name: "ship_via", width: 105, align: "center", formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:Intim" } },
{ name: "note", width: 60, sortable: false, search: false, edittype: "textarea" }
],
cmTemplate: { editable: true },
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
shrinkToFit: false,
height: "100%",
loadui: "block",
loadtext: "Processing...",
caption: "Demonstrate how to block the grid manually"
});
});
jQuery("#ed4").click( function() {
jQuery("#list").jqGrid('editRow',"1");
this.disabled = 'true';
jQuery("#sved4").attr("disabled",false);
});
jQuery("#sved4").click( function() {
jQuery("#list").jqGrid('saveRow',"1", checksave);
jQuery("#sved4").attr("disabled",true);
jQuery("#ed4").attr("disabled",false);
});
function checksave(result) {
if (result.responseText=="") {alert("Update is missing!"); return false;}
return true;
$(this).focus();
}
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<br />
<input type="button" id="ed4" value="Edit row 1" />
<input type="button" id="sved4" value="Save row 1" />
</body>
</html>
I have a jqgrid with sortable property where I can Drag and Drop the records to change the sequence.If filter search is performed ,then I have to prevent the Drag Drop or Reorder operation
One thought I got was to disable the drag /drop by setting sortable:false inside the after search.
$grid.jqGrid('filterToolbar', {
searchOperators: true,
afterSearch: function(){alert("hi");
$grid.jqGrid('setGridParam',{sortable :false});
}
});
But this is not working? Also I want to enable the reorder when no filter search is present.
UPDATE: I have find a work around for this problem.
afterSearch: function(){
var filters = JSON.parse($grid.getGridParam("postData").filters);
if(filters.rules.length)
{
$grid.jqGrid('sortableRows',{disabled: true});
}
else
{
$grid.jqGrid('sortableRows',{disabled: false});
}
}.
But not sure is it right. How to enable the sortableRows when no filter inputs are there.
The method sortableRows just uses jQuery UI Sortable on <tbody> (see here). So one can use
$grid.find(">tbody").sortable("disable");
to disable and
$grid.find(">tbody").sortable("enable");
to re-enable sortableRows. To destroy sortable one can use
$grid.find(">tbody").sortable("destroy");
The demo can be used to see the results. The snippet below do the same
$(function () {
"use strict";
var mydata = [
{ id: "1", invdate: "2007-10-21", name: "test", note: "3note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-22", name: "test2", note: "3note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "3note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-14", name: "test4", note: "3note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "3note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "3note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "3note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "3note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-22", name: "test9", note: "3note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "3note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-28", name: "test11", note: "3note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "3note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
initDatepicker = function (elem) {
$(elem).datepicker({
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }},
$grid = $("#list");
$grid.jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "name", editrules: {required: true}, width: 65 },
{ name: "invdate", align: "center", sorttype: "date", width: 80,
formatter: "date",
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
{ name: "amount", template: numberTemplate, width: 75 },
{ name: "tax", template: numberTemplate, width: 52 },
{ name: "total", template: numberTemplate, width: 60 },
{name: "closed", align: "center", formatter: "checkbox", width: 70,
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{name: "ship_via", align: "center", formatter: "select", width: 105,
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "FE" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:Intim" } },
{ name: "note", sortable: false, search: false, edittype: "textarea", width: 60 }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
shrinkToFit: false,
height: "auto"
});
$grid.jqGrid("sortableRows");
$("#enableSortableRows").button().click(function () {
$grid.find(">tbody").sortable("enable");
});
$("#disableSortableRows").button().click(function () {
$grid.find(">tbody").sortable("disable");
});
$("#destroySortableRows").button().click(function () {
$grid.find(">tbody").sortable("destroy");
});
});
.ui-jqgrid-hdiv { overflow-y: hidden; }
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<div style="float:left;font-size:11px" class="ui-widget">
<fieldset class="ui-widget-content ui-corner-all ui-jqgrid" style="float:left;margin:5px">
<legend class="ui-widget-header ui-corner-top">Enable/Disable/Destroy of sortableRows</legend>
<button type="button" id="enableSortableRows">Enable sortableRows</button>
<button type="button" id="disableSortableRows">Disable sortableRows</button>
<button type="button" id="destroySortableRows">Destroy sortableRows</button>
</fieldset>
</div>
<div style="clear:left">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
I am trying to implement sortable rows in jqgrid, I have searched a lot but still sortable rows is not working. Here is my js files I have included
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.6.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.layout.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src.js")"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
here is my code
function BindGridView(columnNames, colModel) {
myData = [
{ ID: "1", Name: "Aswin", Value: "2" },
{ ID: "3", Name: "bshley", Value: "2" },
{ ID: "2", Name: "sgnel", Value: "4" },
{ ID: "4", Name: "dnoop", Value: "6" }
];
var gridimgpath = '/Scripts/jqgrid/themes/redmond/images';
$("#dataList").jqGrid('GridUnload');
jQuery("#dataList").jqGrid({
datatype: "local",
data: myData,
loadonce: true,
colNames: ["ID", "Name", "Value"],
colModel: [
{ name: "ID", width: 80 },
{ name: "Name", width: 90 },
{ name: "Value", width: 80, align: "right" }
],
autowidth: true,
width: 'auto',
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
scrolling: true,
shrinktofit: true,
pager: '#pager',
sortable: true,
sortname: 'Name',
rownumbers: false,
rownumWidth: 30,
viewrecords: true,
sortorder: "desc",
multiselect: false,
imgpath: gridimgpath,
}).navGrid("#pager",
{ refresh: false, add: false, edit: false, search: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{} // Search options. Some options can be set on column level
);
}
jQuery("#dataList").jqGrid(
'sortableRows',
{
update: function (e, ui) {
console.log("sortable");
alert("item with id=" + ui.item[0].id + " is droped");
}
});
jQuery("#dataList").setGridParam({ data: myData }).trigger("reloadGrid");
Grid is loaded with data but drag drop functionality of sortable row is not working.
I've tried and I finally give up trying to figure out why my jqGrid doesn't display data.
Let me try and go step-by-step:
The below is what is included for the script...
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
The JSON returned:
{
"total": 1,
"page": 1,
"records": 1,
"rows": [
{
"id": "0001",
"cell": [
"0001",
"XXXXX",
"XXXX",
"XXX",
"XXX",
"XXXXX",
"XXXX",
"7/27/2012 1:46:22 PM",
"XXXXX",
"7/30/2012 3:48:25 PM"
]
}
]
}
The jqGrid Code is as follows:
jQuery(function ($) {
jQuery('#tblManageApplication').jqGrid({
url: '/AdminView/ManageApplicationsJQGridData',
datatype: 'json',
loadError: function (xhr, status, error) { alert(status + " " + error); },
mtype: 'GET',
colNames: ['Application ID', 'Application Name', 'Application Description', 'Country Code', 'Country Name', 'Source Indicator Code', 'Insert User ID', 'Insert User Timestamp', 'Update User ID', 'Update User Timestamp'],
colModel: [
{ name: 'ApplicationID', jsonmap: 'cell.ApplicationID', width: 150 },
{ name: 'ApplicationName', jsonmap: 'cell.ApplicationName', width: 200 },
{ name: 'ApplicationDescription', jsonmap: 'cell.ApplicationDescription', width: 250 },
{ name: 'CountryCode', jsonmap: 'cell.CountryCode', width: 100 },
{ name: 'CountryName', jsonmap: 'cell.CountryName', width: 100 },
{ name: 'SourceIndicatorCode', jsonmap: 'cell.SourceIndicatorCode', width: 100 },
{ name: 'InsertUserID', jsonmap: 'cell.InsertUserID', width: 100 },
{ name: 'InsertUserTimestamp', jsonmap: 'cell.InsertUserTimestamp', width: 100, formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, datefmt: 'd-m-Y' },
{ name: 'UpdateUserID', jsonmap: 'cell.UpdateUserID', width: 100 },
{ name: 'UpdateUserTimestamp', jsonmap: 'cell.UpdateUserTimestamp', width: 175, formatter: 'date', formatoptions: {newformat: 'd-m-Y'}, datefmt: 'd-m-Y' }
],
pager: jQuery('#pager'),
sortName: 'ApplicationID',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [10, 20, 50],
sortorder: 'desc',
height: 300,
width: 1200,
caption: 'Manage Applications',
onCellSelect: function (rowid, index, contents, event) {
alert('onCellSelect: ' + index + ' : ' + contents);
},
success: function (data, textStatus) {
if (textStatus == 'success') {
alert('Successful');
}
},
error: function (data, textStatus) {
alert('An error has occurred');
}
});
});
Wanted to add the corresponding HTML for your reference:
<table id="tblManageApplication"></table>
<div id="pager"></div>
Any help will be greatly appreciated.
first, can you confirm that that data you are sending from controller and colModal names are same alphabetically?
second check your json reader
check this link
http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm i think you need to specify a couple of things here like id and records.
The main error in your code is the usage of jsonReader: { repeatitems: false } option and jsonmap in the case where you don't need there at all. You produce the data in the standard format. So you have to remove the options to be able to fill the grid.
Additionally I would recommend you to change the data format to ISO 8601 format (you can use "o" format of DateTime on the server code) or at least define correct srcformat:
formatoptions: {srcformat: 'm/d/Y g:i:s A', newformat: 'd-m-Y'}
The demo demonstrate that the changes which I described above working.
i'm starter in jqgrid, i want active Navigation JQgrid panel ,But I do not know how to do it
<div style="direction: rtl;">
<table id="list" dir="rtl">
</table>
<div id="pager">
</div>
<br />
<br />
<table id="list1">
</table>
<div id="pager1">
</div>
<div id="navgrid"></div>
</div>
thanks all.
I Write this code, but is n't work
$(document).ready(function () {
jQuery("#list1").jqGrid({
direction: "rtl",
toppager: false,
onSelectRow: function (id) {
var b = $("#list1 tr").eq(id);
alert(b.text());
},
recordpos: "left",
pgtext: "صفحه {0} از {1}",
datatype: "local",
colNames: ['کد', 'تاریخ', 'نام', 'مبلغ', 'تلفکس', 'جمع', 'توضیحات'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
multiselect: true,
rowNum: 10,
rowList: [5, 10, 20, 50, 100],
pager: jQuery('#navgrid'),
sortorder: "desc",
viewrecords: true,
caption: "اطلاعات تعرفه ها"
});
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
for (var i = 0; i <= mydata.length; i++)
jQuery("#list1").jqGrid('addRowData', i + 1, mydata[i]);
jQuery("#list1").jqGrid('navGrid', "#navgrid", { edit: true, add: true, del: true });
});
This should be written
$("#list1").navGrid('#navgrid', { refresh: true }, { height: 280, reloadAfterSubmit: false }, { height: 280, reloadAfterSubmit: false }, { reloadAfterSubmit: false });
Thanks