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>
Related
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'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 });).
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
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.
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**