How to activate navigation in jqgrid in asp.net? - jqgrid

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

Related

jqgrid table comlumns crowded

Please see the image.
Not sure why the table doesn't stretch out. I want it stretch out from left to right.
The script:
<script type="text/javascript">
var jqgrid_data = [
{
id: "1",
name: "Test 1",
note: "Note 1",
amount: "150.00",
tax: "15.00",
total: "210.00"
}, {
id: "2",
name: "Test 2",
note: "Note 2",
amount: "220.00",
tax: "22.00",
total: "320.00"
}, {
id: "3",
name: "Test 3",
note: "Note 3",
amount: "40.00",
tax: "4.00",
total: "430.00"
}, {
id: "4",
name: "Test 4",
note: "Note 4",
amount: "510.00",
tax: "51.00",
total: "210.00"
}, {
id: "5",
name: "Test 5",
note: "Note 5",
amount: "210.00",
tax: "21.00",
total: "320.00"
}, {
id: "6",
name: "Test 6",
note: "Note 6",
amount: "70.00",
tax: "7.00",
total: "430.00"
}, {
id: "7",
name: "Test 7",
note: "Note 7",
amount: "80.00",
tax: "10.00",
total: "210.00"
}, {
id: "8",
name: "Test 8",
note: "Note 8",
amount: "300.00",
tax: "10.00",
total: "320.00"
}, {
id: "9",
name: "Test 9",
note: "Note 9",
amount: "90.00",
tax: "10.00",
total: "430.00"
}, {
id: "10",
name: "Test 10",
note: "Note 10",
amount: "200.00",
tax: "20.00",
total: "210.00"
}, {
id: "11",
name: "Test 11",
note: "Note 11",
amount: "77.00",
tax: "9.00",
total: "320.00"
}, {
id: "12",
name: "Test 12",
note: "Note 12",
amount: "56.00",
tax: "8.00",
total: "430.00"
}, {
id: "13",
name: "Test 13",
note: "Note 13",
amount: "554.00",
tax: "10.00",
total: "210.00"
}, {
id: "14",
name: "Test 14",
note: "Note 14",
amount: "265.00",
tax: "2.00",
total: "320.00"
}, {
id: "15",
name: "Test 15",
note: "Note 15",
amount: "765.00",
tax: "3.00",
total: "430.00"
}, {
id: "16",
name: "Test 16",
note: "Note 16",
amount: "89.00",
tax: "1.00",
total: "210.00"
}, {
id: "17",
name: "Test 17",
note: "Note 17",
amount: "99.00",
tax: "2.00",
total: "320.00"
}, {
id: "18",
name: "Test 18",
note: "Note 18",
amount: "49.00",
tax: "3.00",
total: "430.00"
}
];
</script>
<script>
$(document).ready(
function () {
jQuery("#jqgrid").jqGrid({
url: API_URL,
data: jqgrid_data,
datatype: "local",
height: '350',
colNames: ['Actions', 'Inv No', 'Client', 'Amount', 'Tax', 'Total'],
colModel: [
{ name: 'act', index: 'act', width:80, sortable: false },
{ name: 'id', index: 'id', width: 80 },
{ name: 'name', index: 'name', width: 80, editable: true },
{ name: 'amount', index: 'amount', align: "right", width: 80, editable: true },
{ name: 'tax', index: 'tax', align: "right", width: 80, editable: true },
{ name: 'total', index: 'total', align: "right", width: 80, editable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager_jqgrid',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
gridComplete: function () {
var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>";
jQuery("#jqgrid").jqGrid('setRowData', ids[i], { act: be + se + ca });
}
},
editurl: "dummy.html",
caption: "Vendor Managerment",
multiselect: true,
autowidth: true
});
});
</script>
<table id="jqgrid"></table>
<div id="pager_jqgrid"></div>
It seems that the width of the table is fixed.
I had the code which is similar with:
gridComplete: function() {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
de = "<input style='height:22px;width:70px;' type='button' value='Delete' onclick='deleteRow('" + cl + "' );' />";
jQuery("#list").jqGrid('setRowData', ids[i], { Delete: de });
}
}
After I removed it, it stretches out.

Disable drag and drop when filter criteria is present in JQGRID

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>

Programmatic search on custom formatted column in jQGrid

I'm trying to do a programmatic search on a custom formatted column in jQGrid, but it's not working. Here's my code. I just compiled this code from different internet sources, so don't get me wrong if you someone finds pieces of code they wrote.
In the snippet below, the custom formatted column is the delCol, but searching with the column doesn't work.
$(document).ready(function () {
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Tom" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Jerry" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Dog" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Cat" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Mouse" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Keller" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Jekyll" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Hyde" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Superman" },
{ id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Spiderman" },
{ id: "11", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "He-man" },
{ id: "12", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Cat" },
{ id: "13", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Bat" },
{ id: "14", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Rat" },
{ id: "15", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Pat" },
{ id: "16", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00", custText: "Gate" },
{ id: "17", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00", custText: "Claw" },
{ id: "18", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00", custText: "Jerry" }
],
getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel');
for (var i = 0, l = cm.length; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
grid = $('#list'), firstButtonColumnIndex, buttonNames = {};
grid.jqGrid({
data: mydata,
loadonce: true,
datatype: 'local',
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', 'Custom'],
colModel: [
{ name: 'id', index: 'id', key: true, width: 70, 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: 100, sortable: true },
{ name: 'delCol', width: 70, sortable: true, index: 'custText',search:true,
formatter: function (cellvalue, options, rowObject) {
return "<img src='/gr_focus.gif'/><span>" + rowObject.custText + "</span>"
},
unformat: function (cellvalue, options, cell) {
return cellvalue;
}
}
],
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
viewrecords: true,
gridview: true,
height: '100%',
rownumbers: true,
caption: 'How to select columns',
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol >= firstButtonColumnIndex) {
alert("rowid=" + rowid + "\nButton name: " + buttonNames[iCol]);
}
// prevent row selection if one click on the button
return (iCol >= firstButtonColumnIndex) ? false : true;
}
});
firstButtonColumnIndex = getColumnIndexByName(grid, 'add');
buttonNames[firstButtonColumnIndex] = 'Add';
buttonNames[firstButtonColumnIndex + 1] = 'Edit';
buttonNames[firstButtonColumnIndex + 2] = 'Remove';
buttonNames[firstButtonColumnIndex + 3] = 'Details';
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false });
});
function searchGridFn() {
grid = $("#list");
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, { filters: "" });
}
f = { groupOp: "OR", rules: [] };
f.rules.push({ field: "name", op: "cn", data: searchFiler });
f.rules.push({ field: "delCol", op: "cn", data: searchFiler });
grid[0].p.search = true;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1, current: true}]);
}
<table id="list">
</table>
<div id="pager">
</div>
<br />
<fieldset style="float: left">
<input id="filter" />
<button id="searchButton" onclick="searchGridFn()">
Search</button>
</fieldset>
<br />
<br />
<button style="clear: left" id="sortGridButton" onclick="sortGridFn()">
Sort Grid</button>
I can't reproduce your problem. The demo where I use the code which you posted do work. Just type 3 or 2 in the input field and click on "Search" button. You will see the filtered items in the grid.
By the way you use "delCol" in the filter which not exist in colModel so the filtering can be done only by content of "name" column.
UPDATED: If you use datatype: 'local' (or if you use datatype: 'json' or datatype: 'xml' together with loadonce: true) you have to use values of index property of colModel the same as the value of name property. I recommend you don't specify index property of colModel. In the case the value of index property will be copied from name property internally.
So what you should do is
change name: 'delCol' to name: 'custText' which corresponds to input data which you use.
(optionally) remove all index properties from colModel.
use "custText" instead of "delCol" during building the filter (use f.rules.push({ field: "custText", op: "cn", data: searchFiler });).

jqgrid add data to grid without postback

I need to have users add data to a grid without it posting back. I thought cellsubmit: 'clientArray' would accomplish that, but I still get the "No URL is set" error. The following code is a grid I 'borrowed' from Oleg, but with the cellsubmit set.
$(document).ready(function () {
'use strict';
var myData = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2011-07-30", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2011-07-30", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
myGrid = $("#list"),
lastSel = -1,
inEdit;
myGrid.jqGrid({
datatype: 'local',
data: myData,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int', formatter: 'int', editable: true,
editoptions: {
//readonly: 'readonly',
disabled: 'disabled',
dataInit: function (elem) {
if (!inEdit) {
$(elem).val($.jgrid.randId());
}
}
}
},
{ name: 'invdate', index: 'invdate', width: 75, align: 'center', sorttype: 'date',
formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y',
editable: true
},
{ name: 'name', index: 'name', width: 65, editable: true },
{ name: 'amount', index: 'amount', width: 75, sorttype: 'int', formatter: 'int', editable: true,
editoptions: {
dataInit: function (elem) {
$(elem).mask("99:99");
}
}
},
{ name: 'tax', index: 'tax', width: 52, sorttype: 'int', formatter: 'int', editable: true },
{ name: 'total', index: 'total', width: 60, sorttype: 'int', formatter: 'int', editable: true },
{ name: 'closed', index: 'closed', width: 67, align: 'center', formatter: 'checkbox', editable: true,
edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }
},
{ name: 'ship_via', index: 'ship_via', width: 95, align: 'center', formatter: 'select', editable: true,
edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' }
},
{ name: 'note', index: 'note', width: 60, sortable: false, editable: true,
editoptions: {
dataInit: function (elem) {
$(elem).val(inEdit ? "in Edit" : "in Add");
}
}
}
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
ignoreCase: true,
rownumbers: true,
sortname: 'invdate',
viewrecords: true,
cellsubmit: 'clientArray',
sortorder: 'desc',
caption: 'Combining Advanced Searching and Toolbar Searching in one grid',
height: 'auto'
});
myGrid.jqGrid('navGrid', '#pager',
{ del: false, search: false },
{ // Edit
recreateForm: true,
beforeInitData: function () {
inEdit = true;
}
},
{ // Add
recreateForm: true,
beforeInitData: function () {
inEdit = false;
}
});
});
What you try to do is to use form editing to edit local data which is not supported by jqGrid currently. Nevertheless, how I described here, one do can implement this.
I get the demo from the answer and modified a little to use the current version of jqGrid. The corresponding demo. The demo do more as you need, for example context menu. You can remove features which you don't need.

Builtin search panel disable whole grid with search panel. 2 more questions

1 - Is it possible to change the layout of Add and Edit popups?
2 - How to disable navigation in the Edit popup?. Right and left buttons to navigate through records.
3 - I am testing JQGrid built in search. Problem is when ever I click on that small search icon
popup disable whole grid with it search panel on top of it. Tried alot but no success.
Note: All the other panels like Edit, Add etc are working fine
jQuery().ready(function () {
jQuery("#list10").jqGrid({
//url: 'server.php?q=2',
data: mydata1,
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 55 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name asc, invdate', 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, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager10',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "JSON Example"
});
jQuery("#list10").jqGrid('navGrid', '#pager10', { edit: false, add: false, del: false });
});
var mydata1 = [
{ id: "1", invdate: "2010-05-24", name: "test", note: "note", tax: "10.00", total: "2111.00" },
{ id: "2", invdate: "2010-05-25", name: "test2", note: "note2", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "21.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00"
You asked many questions at once. So one after other.
You don't described what you mean under "the layout of Add and Edit popups". All standard settings of the dialogs like position, width, height and so on you can find here. All other dynamic changes of layout you can do inside of beforeShowForm event handler which you could define.
The easiest way to disable navidation buttons is to include .navButton { display:none; } in you CSS.
Parameters of the search dialog you can find here. The setting overlay:false should help you.
So you can replace the line
jQuery("#list10").jqGrid('navGrid', '#pager10', {edit:false, add:false, del:false});
with something like following
jQuery("#list10").jqGrid('navGrid', '#pager10',
{edit:false, add:false, del:false},
{top:200,left:300,recreateForm:true}, // edit settings
{top:100,left:200,recreateForm:true}, // add settings
{overlay:false} // search settings
);

Resources