I am using the navgrid function for pagination. But the navGrid function is not getting called. I tried to put an alert in the jqgrid.js file where navGrid is defined. But this alert is also not getting called.
$("#order-list-table").jqGrid({
autowidth: true,
datatype : "json",
url: "order-list.htm",
height: '90%',
width: '100%',
mtype: 'POST',
colNames: [
jQuery.i18n.prop('columnExternalOrderID'),
jQuery.i18n.prop('columnInternalOrderID'),
jQuery.i18n.prop('columnState'),
jQuery.i18n.prop('columnDate'),
jQuery.i18n.prop('columnErrorState'),
jQuery.i18n.prop('columnAction'),
],
colModel : [
{name: "Ext Order ID", index: "externalOrderId",jsonmap:"externalOrderId"},
{name: "Int Order ID", index: "id", jsonmap: "id"},
{name: "State", index: "tkOrderStateId", jsonmap: "tkOrderStateId"},
{name: "Date", index:"timestampOrderentry", jsonmap:"timestampOrderentry"},
{name: "Error State", index: "tkErrorStateId", jsonmap: "tkErrorStateId"},
{name: "Action", index: "realty", jsonmap: "realty"}
],
forceFit: true,
altRows: true,
rowNum:2,
rowList:[1,2],
page: 1,
pager: '#order-list-pager',
sortname : "Ext Order ID",
sortorder: "desc",
shrinkToFit: true,
viewrecords: true,
jsonReader : { repeatitems: false },
onSelectRow: function(){
alert(jQuery("#order-list-table").getGridParam('selrow'));
},
gridComplete: function() {
// resize the datagrid to fit the page properly:
$('#order-list').width('100%');
$('#order-list').css('overflow','hidden');
$('#order-list').children('div').width('100%');
$('#order-list').children('div').each(function() {
$("div", this).width('100%');
$("table", this).width('100%');
$("div", this).css('overflow','hidden');
$("table", this).css('overflow','hidden');
$("td", this).css('text-align','center');
$(this).find('#order-list-table').width('100%');
});
}
});
var gwdth = $("#order-list").width();
$("#order-list-table").jqGrid().setGridWidth(gwdth);
jquery("#order-list-table").jqgrid('navGrid',
'#order-list-pager',{edit:true,add:true,del:true});
Above is the jqGrid function that I call.
It seems that your error is very simple: you should replace jquery to jQuery and jqgrid to jqGrid (a capical 'G') in the last line of your code. The following statement should work:
jQuery("#order-list-table").jqGrid('navGrid',
'#order-list-pager',{edit:true,add:true,del:true});
Related
I am using free version (latest) of jqgrid with MVC c#.
I have form fields setup. When the user clicks add in the footer button (add) it shows a modal popup with all the form fields.
I want my first textbox in the form field to autocomplete, ie when they start typing their empployee number in the textbox, I should query my mvc controller and fetch the data and then prefill if there is a match. Once that prefills I also want to update 2 more label on the form, firstname & lastname. Also the button should be disabled until the correct id is fetched in the employee textbox.
Not sure how should I go about this. I can share my sample grid that I have used.
Thanks
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '#Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
colModel: [
{ name: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "uid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13]
}
caption: "MyData"
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
Updated:
If there is also option to use onkeyup, mouseover etc on the textbox so that I can validate whats entered in the textbox and then also update other textbox based on this value
I have done this by using keyup event instead of using autocomplete.
Relevant code as below:
colModel: [
{
name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
editoptions:
{
dataEvents: [
{
type: 'keyup',
fn: function (e) {
$.ajax({
url: //call to my method in my mvc controller,
data: "empid=" + $(this).val(),
type: "GET",
success: function (data) {
//validate and populate other fields here
}
else {
}
},
error: function (passParams) {
// code here
}
});
}
}
]
}
]
My jqgrid is working perfectly but now i am implementing the subgrid. It shows the + sign and when i click on it the blank row displayed with loading.... this is the client side code
$(document).ready(function () {
$("#Grid").jqGrid({
url: '/Home/GetDetails',
datatype: 'json',
myType: 'GET',
colNames: ['id','Name', 'Designation', 'Address', 'Salary'],
colModel: [
{ key: false, name: 'Id', index: 'Id', },
{ key: false, name: 'Name', index: 'Name', editable: true },
{ key: false, name: 'Designation', index: 'Designation', editable: true },
{ key: false, name: 'Address', index: 'Address', editable: true },
{ key: false, name: 'Salary', index: 'Salary', editable: true }
],
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
id: '0',
repeatitems: true
},
pager: $('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
width: 600,
viewrecords: true,
multiselect: true,
sortname: 'Id',
sortorder: "desc",
caption: 'Employee Records',
loadonce: true,
gridview: true,
autoencode: true,
subGrid: true,
subGridUrl: '/Home/Subgrid',
subGridModel: [{
name: ['No', 'Item','Quantity'],
width: [55, 55,55]
}
],
}).navGrid('#pager', { edit: true, add: true, del: true },
{
zIndex: 100,
url: '/Home/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText)
{
alert(response.responseText);
}
}
},
{
zIndex: 10,
url: '/Home/Add',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
zIndex: 100,
url: '/Home/Delete',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}
);
});
Subgrid url action method is as below:
public JsonResult Subgrid(String id)
{
Database1Entities db = new Database1Entities();
Product p= new Product {No=1,Item="Juice",Quantity=23};
var jsondata = new { rows=2,
cell = new string[] { p.No.ToString(),
p.Item,p.Quantity.ToString()}.ToArray()
};
return Json(jsondata, JsonRequestBehavior.AllowGet);
}
I am doing this first time. What is the mistake?Thanks in advance
I don't recommend you to use subGridModel. Instead of that it's much more flexible to use Subgrid as Grid. If the user clicks "+" icon (expand subgrid) then jqGrid just inserts empty row under selected with simple structure described in the answer for example. The id of the <div> where some custom "subgrid" information need be displayed will be the first parameter of subGridRowExpanded callback which you need to implement. The second parameter is the rowid of the expending row. By implementing the corresponding callback you can create any custom "subgrid". See the old answer for very simple demo.
So what you need to do is just write the code which creates grid which will be placed in subgrid row. It's only strictly recommended to use idPrefix parameter which used any values which depends from subgriddivid or parent rowid. Additionally you can consider to use autowidth: true option for subgrid, which will make the width of subgrid be exact correspond to the width of the main grid. Of cause to have rowid of the parent row send as id parameter to '/Home/Subgrid' you need use postData: { id: rowid }. See the code from the answer for example which I referenced previously.
I have a customer details where I am showing the customers bill status which is working fine,
Is it possible to rebind the grid once we loaded the data in grid for example:
when I am coming from another page how to apply search on the existing grid data and rebind it to grid.
Below is my colmodel and other properties which I am using but not working properly,
$("#BillDetails").jqGrid({
url: '../Handler.ashx,
datatype: "json",
colNames: [ 'S.No', 'Bill NO', 'Customer Name', 'Customer Type', 'Bill Date',Bill Status'],
colModel: [
{ name: 'SERIAL', sortable: false, search: true, stype: 'text', width: 40, hidden: false,
align: 'right', sorttype: 'int' },
{ name: 'BILL_NO', sortable: false, search: true, width: 80, hidden: false,
align: 'right',formatter: editLink,},
{ name: 'CUSTOMER_NAME', search: true, align: 'left', width: 150, aligh: 'left',
sortable: false },
{ name: 'CHECK_TYPE', align: 'left', width: 150, search: true, aligh: 'left',
sortable: false},
{ name: 'BILL_DATE', width: 85, sortable: false, search: true, align: 'center',
sorttype: 'date', formatter: "date", formatoptions: { newformat: 'd/m/Y' } },
{ name: 'BILL_STATUS', width: 90, align: 'left', search: true, stype: 'select',
searchoptions: { value: 'Pending:Pending;
On Hold:On Hold;Clear:Clear;Incompelete:InComplete,sortable: false } },
],
width: '980',
height: '450',
shrinkToFit: false,
sortable: true,
mtype: 'GET',
scrollbar: true,
sortname: 'BILL_NO',
sortorder: 'asc',
hidegrid: false,
loadonce: true,
ignoreCase: true,
rowNum: 50,
pager: '#Pager',
viewrecords: true,
// Search on page load from grid data
gridComplete: function () {
var searchFilter = "Clear"; // In this I will receive the the status from query string,
//for now i have provided the the hard core value to test
var gridData = $("#jQGridDemo").jqGrid('getGridParam', 'data');
console.log(gridData);
if (searchFilter != "") {
var grid = $("#BillDetails"), f;
f = { rules: [] };
f.rules.push({ field: "STATUS", op: "eq", data: searchFilter });
grid[0].p.search = true;
$("#BillDetails").setGridParam({ data: gridData, postData: { filters: f },
datatype: "local", });
}
}
});
If you want to reload jqGrid when coming from another page with search parameters you could use postData property of jqGrid.
Something like this:
$("#BillDetails").jqGrid({
url: '../Handler.ashx',
datatype: "json",
mtype: 'GET',
postData:
{
Page: 'Dashboard',
strUserID: strUserID,
}
You can populate this property with js or on server side as you need.
UPDATE
You also can use setGridParam method of jqgrid:
$("#BillDetails").jqGrid('setGridParam',
{
postData: {
Page: 'Dashboard',
strUserID: strUserID,
}
});
$("#BillDetails").trigger("reloadGrid");
But as i understand this way you also just add values to postData property.
Also you can try it this way:
$("#BillDetails").trigger('reloadGrid', [{page:1}]);
You can pass there your new params as on grid init.
When i use "loadonce" set to be "true",my problem is searching or filtering works ,but pagination doesn't work.If i change loadonce to be false,searchong can't work,but pagination works.
How do I make sure I set the data type to be json during the pagination alone.
$grid = $("#list"),
numberTemplate = {
formatter: 'number',
align: 'right',
sorttype: 'number',
editrules: {
number: true,
required: true
},
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']
}
};
var myDelOptions = {
onclickSubmit: function (rp_ge, rowid) {
// we can use onclickSubmit function as "onclick" on "Delete" button
// alert("The row with rowid="+rowid+" will be deleted");
// delete row
grid.delRowData(rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
grid.trigger("reloadGrid", [{
page: grid[0].p.page
}]);
}
return true;
},
processing: true
};
$.extend($.jgrid.inlineEdit, {
keys: true
});
$grid.jqGrid({
url: $('#contextPath').val() +"/globalcodes/getList?masterCodeSysid="+$('#Sysid').val(),
datatype: 'json',
colNames: ['Sequence', 'Detail Code', 'Code Description', 'Status', 'Cross Referrences', '', ''],
colModel: [ {
name: 'seqNumber',
width: 50,
editable: false,
search:true
}, {
name: 'dtlCode',
width: 50,
editable: true,
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'codeDesc',
width: 200 ,
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'statusFlag',
width: 150,
edittype:"select",
formatter : 'select',
editoptions:{value:"Y:Active;N:Inactive"},
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'crossReferrenced',
width: 100,
editable: false,
searchoptions:{sopt:['cn','eq','ne']}
},{
name: 'act',
index: 'act',
width: 55,
align: 'center',
search: false,
sortable: false,
formatter: 'actions',
searchoptions:{sopt:['cn','eq','ne']} ,
editable: false,
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit: function (rowid) {
$('#add_detail_code').attr('disabled','disabled').addClass("btnDisabled").removeClass("btnNormalInactive");
},
onSuccess: function (jqXHR) {
$grid.setGridParam({ rowNum: 10 }).trigger('reloadGrid');
},
afterSave: function (rowid) {
$('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
},
afterRestore: function (rowid) {
$('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
},
delOptions: myDelOptions
}
},{
name: 'dtlCodeSysid',
hidden: true
}],
cmTemplate: {
editable: true
},
jsonReader: {id:'dtlCodeSysid',
},
rowList: [5, 10, 20],
pager: '#detailCodePager',
gridview: true,
ignoreCase: true,
rowNum:10,
rownumbers: false,
sortname: 'col1',
loadonce:true,
viewrecords: true,
sortorder: 'asc',
height: '100%',
deepempty: true,
editurl: $('#contextPath').val() +"/globalcodes/saveMasterCodeDetails?masterCodeSysId="+$('#masterCodeSysid').val(),
//caption: 'Usage of inlineNav for inline editing',
});
$grid.jqGrid('filterToolbar', {
searchOperators: true
});
$grid.jqGrid('navGrid', '#detailCodePager', {
add: false,
edit: false,
del: false,
search:false,
refresh:true
});
You don't posted any code which you use, so I try to guess. Probably you implemented pagination on the server side and returns only one page of data in case of usage loadonce: true option. Correct usage of loadonce: true on the server side would be returning all data, the data need be just correctly sorted based on sorting parameters sent by jqGrid. By the way the format of returned data from the server could be just array of items instead of wrapping results in { "total": "xxx", "page": "yyy", "records": "zzz", "rows" : [...]}. In case of usage loadonce: true option the data from total, page and records will be ignored and calculated based on the size of array returned data.
How to do edit on popup dialog in jqgrid.
Below is jqgrid stuff. I dont' need inline editing. I want to popup dialog.
To popup dialog, we already have dialog which can be popup.
To achieve this, I need to call - javascript function which can allow to popup dialog.
please guide me how I could call javascript function on click of edit icon ?
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
postData: { categoryId: 1 },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
colModel: [
{ name: 'Id', index: 'Id', hidden: false, key: true },
{ name: 'Code', index: 'Code', width: 170},
{ name: 'Description', index: 'Description', width: 170},
{ name: 'IsActive', index: 'IsActive', width: 170 },
{
name: 'actions', index: 'actions', formatter: 'actions',
formatoptions: {
keys: true,
editbutton: true,
delOptions: { url: '#Url.Action("DeleteCategory", "Categories")' }
}
}
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 3,
rowList: [3, 6, 9],
width: '500',
height: '100%',
viewrecords: true,
multiselect: false,
caption: "Categories",
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: true, add: false, del: false, search: false, refresh: true });
Pleae guide me.
To Make your own Edit actions/buttons in JQGrid, you need to set the default Edit navGrid buttons/actions to false, then add custom buttons to the navigation grid.
Here is an example below - remember to remove the navGrid setup in jqgrid chained functions above:
$('#CategoriesGrdList').jqGrid('navGrid', '#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true})
.navButtonAdd('#CategoriesGrdPager', {
title: "Edit",
caption: "Edit",
buttonicon: "ui-icon-pencil", // JQuery UI Icon
onClickButton: function () { /*CALL YOUR FUNCTION HERE*/ },
position: "last" // Position of the button on Nav
})'