The grid displays and retrieves the data from the rest service but does not show up. I'm pretty sure I'm just missing something stupid but I've checked the documentation and a few other answers on here and nothing has fixed it. I can see in the debugger the data is coming across (which is where I pulled the sample from) and there are no JavaScript errors on the page. I also checked the data and it's valid JSON. What am I missing/doing wrong?
Code:
<table id="custSearch">
<tr><td></td></tr>
</table>
<div id="custSearchPager"></div>
$("#custSearch").jqGrid({
url : '/rebate/rest/customer/getCustomers',
datatype : 'json',
mtype : 'GET',
colNames : ['customerID', 'Company', 'First Name', 'Last Name','Address', 'City', 'State', 'Zip Code', 'Phone', 'Fax', 'EMail'],
colModel : [
{ name:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
{ name:'Company', index:'company', width:150, sortable:true},
{ name: 'First Name', index: 'firstName', length: 50, search: false},
{ name: 'Last Name', index: 'lastName', width: 80},
{ name: 'Address', index: 'address', width: 100, search: false},
{ name: 'City', index: 'city', width: 40, search: false},
{ name: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} },
{ name: 'Zip', index: 'zip', width: 80},
{ name: 'Phone', index: 'phone', width: 80},
{ name: 'Fax', index: 'fax', width: 80, search: false},
{ name: 'EMail', index: 'email', width: 80}
],
rowNum: 20,
rowList:[10,20,30],
pager : '#custSearchPager',
sortname : 'company',
sortorder : 'desc',
viewrecords: true,
gridview: true,
caption : 'Customers',
height: '300',
jsonReader: {cell:"", id:"customerID"}
});
jQuery("#custSearch").jqGrid('navGrid','#custSearchPager',{edit:false,add:false,del:false,search:true});
Data:
{"page":"1","total":"30","records":"20","rows":[
{"customerID":144,"firstName":"Keefe","lastName":"Abbott","company":"Vulputate LLC","address":"P.O. Box 688, 4718 Urna Street","country":"USA","city":"Detroit","state":"MI","zip":"61733","phone":"(411) 256-3885","fax":"(712) 531-0718","email":"Etiam#Integereu.org"},
{"customerID":91,"firstName":"Jerome","lastName":"Allison","company":"Vulputate Inc.","address":"Ap #519-7407 Orci Road","country":"USA","city":"Kansas City","state":"MO","zip":"22551","phone":"(245) 214-4028","fax":"(202) 531-5933","email":"sed.dolor.Fusce#risusDonec.ca"},
{"customerID":293,"firstName":"Hyacinth","lastName":"Fuentes","company":"Vulputate Corporation","address":"Ap #899-7402 Donec Road","country":"USA","city":"Jackson","state":"MS","zip":"27829","phone":"(342) 945-6263","fax":"(260) 216-3339","email":"felis.Donec.tempor#sitamet.org"},
{"customerID":235,"firstName":"Charde","lastName":"England","company":"Vulputate Associates","address":"2803 Odio Street","country":"USA","city":"Racine","state":"WI","zip":"17971","phone":"(421) 324-5019","fax":"(559) 946-7839","email":"pretium#eu.org"}
. . .
]}
The names in colModel can't contain spaces. I think you have mixed the name and the label property in colModel to display headers of the table.
The wrong in your code is that the name property does not match the data from the response and second your name property contain space, which is not allowed. To work this your colModel should be:
colModel : [
{ name:'customerID', label:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
{ name:'company', label:'Company', index:'company', width:150, sortable:true},
{ name: 'firstName', label: 'First Name', index: 'firstName', length: 50, search: false},
{ name:'lastName', label: 'Last Name', index: 'lastName', width: 80},
{ name: 'address', label: 'Address', index: 'address', width: 100, search: false},
{ name: 'city', label: 'City', index: 'city', width: 40, search: false},
{ name:'state', label: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} },
{ name:'zip', label: 'Zip', index: 'zip', width: 80},
{ name:'phone', label: 'Phone', index: 'phone', width: 80},
{ name: 'fax', label: 'Fax', index: 'fax', width: 80, search: false},
{ name: 'email', label: 'EMail', index: 'email', width: 80}
],
Related
Facing problem in "DOMContentLoaded" in jquery. without this jqgrid is loading , when adding this "DOMContentLoaded" not loading
document.addEventListener("DOMContentLoaded", function() {
$("#table").jqGrid({
url: ROOT + 'PCM/DataToDisplayPCM',
datatype: "JSON",
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
colModel: [{
name: 'ProdPriority',
label: 'Priority',
index: 'ProdPriority',
width: 50
}, {
name: 'ProductCode',
label: 'Product Code',
index: 'ProductCode',
width: 80
}, {
name: 'ProductName',
label: 'Product Name',
index: 'ProductName',
width: 200
}, {
name: 'DIV',
label: 'Division',
index: 'Division',
width: 60
}, {
name: 'Category',
label: 'Categary',
index: 'Category',
width: 150
}, {
name: 'SubCategory',
label: 'SubCategary',
index: 'SubCategory',
width: 150
}, {
name: 'Priority_1',
label: 'Priority_1',
index: 'Priority_1',
width: 80
}, {
name: 'Priority1per',
label: 'Priority_1%',
index: 'Priority1per',
width: 80
}, {
name: 'Priority_2',
label: 'Priority_2',
index: 'Priority_2',
width: 80
}, {
name: 'Priority2per',
label: 'Priority_2%',
index: 'Priority2per',
width: 80
}, {
name: 'Priority_3',
label: 'Priority_3',
index: 'Priority_3',
width: 80
}, {
name: 'Priority3per',
label: 'Priority_3%',
index: 'Priority3per',
width: 80
}, ],
pager: "#prowed1",
sortname: 'P_CODE',
viewrecords: true,
sortorder: "desc"
});
jQuery("#table").jqGrid('navGrid', "#prowed1", {
edit: false,
add: false,
del: false
});
});
I try to disable column only in edit mode with EJ2 Grid Syncfusion
Columns Code
columns: [
{ type: 'checkbox', field: 'CheckBox', width: 50 },
{ field: 'id', isPrimaryKey: true, visible: false, headerText: 'id', textAlign: 'Right', width: 120, type: 'number' },
{
field: 'modulID', headerText: 'Nama Modul', width: 80, validationRules: { required: true }, allowEditing :false ,
foreignKeyField: 'id', foreignKeyValue: 'modulName', dataSource: modulComplete
},
{
field: 'departmentID', headerText: 'Department', width: 80, validationRules: { required: false },
foreignKeyField: 'id', foreignKeyValue: 'departmentName', dataSource: department
},
{
field: 'pegawaiApprover1ID', headerText: 'Pegawai Approver 1', width: 80, validationRules: { required: false },
foreignKeyField: 'id', foreignKeyValue: 'nama', dataSource: pegawai
},
{
field: 'pegawaiApprover2ID', headerText: 'Pegawai Approver 2', width: 80, validationRules: { required: false },
foreignKeyField: 'id', foreignKeyValue: 'nama', dataSource: pegawai
},
{ field: 'officePerusahaanID', visible: false, headerText: 'officeid', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'isApprovedByApprover', width: 40, headerText: 'isApprovedByApprover', type: 'checkbox' },
{ field: 'isApprovedByGA', width: 40, headerText: 'isApprovedByGA', type: 'checkbox' },
{ field: 'isApprovedByCheckin', width: 40, headerText: 'isApprovedByCheckin', type: 'checkbox' },
],
But it will disable the column from add action too
Any info how to disable column on edit mode only?
Thanks.
We have analysed your query and you can achieve your requirement by enabling the isIdentity column property of the grid. Please find the code snippet below,
columns: [
{ type: 'checkbox', field: 'CheckBox', width: 50 },
{ field: 'id', isPrimaryKey: true, visible: false, headerText: 'id', textAlign: 'Right', width: 120, type: 'number' },
{
field: 'modulID', headerText: 'Nama Modul', width: 80, validationRules: { required: true }, allowEditing :false , isIdentity: true,
foreignKeyField: 'id', foreignKeyValue: 'modulName', dataSource: modulComplete
},
],
Please get back to us if you need further assistance.
Regards,
Hariharan
I want to sort my grid with a combobox, I want that when I select a value on the combobox, the content of the grid change for example by type can anyone help me? thanks
this a snippet of my code:
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
store: pagingStore,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
},
{
text: 'Type',
dataIndex: 'type'
}],
bbar: {
xtype: 'pagingtoolbar',
store: pagingStore,
displayInfo: true,
items: [
'-', {
xtype: 'combo',
fieldLabel: 'List account',
labelAlign: 'right',
store: storeCombo,
displayField: 'name'
}]
},
renderTo: Ext.getBody()
});
You probably want something like this:
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
store: {
fields: ['name', 'email', 'phone', 'type'],
data: [{
name: 'Homer',
email: 'homer#simpsons.com',
phone: '111-222-333',
type: 'Foo'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '111-222-334',
type: 'Foo'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '111-222-335',
type: 'Bar'
}, {
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '111-222-336',
type: 'Bar'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'Type',
dataIndex: 'type'
}],
bbar: {
xtype: 'toolbar',
items: [
'-', {
xtype: 'combo',
fieldLabel: 'List account',
labelAlign: 'right',
forceSelection: true,
emptyText: '-- Select --',
store: {
fields: ['type'],
data: [{
type: 'Foo'
}, {
type: 'Bar'
}]
},
displayField: 'type',
valueField: 'type',
listeners: {
change: function(combo, value) {
var grid = this.up('grid'),
store = grid.getStore();
if (!value) {
store.getFilters().removeAll();
} else {
store.filter([{
property: 'type',
value: value
}]);
}
}
}
}
]
},
renderTo: Ext.getBody()
});
https://fiddle.sencha.com/#fiddle/1hn4
guys i am trying to display json using online library .. but only the table appears without items .. here is my code
[{"OrderID":"1","CustomerID":"WILMK","OrderDate":"1996-07-04 00:00:00","Freight":"32.3800","ShipName":"Vins et alcools Chevalier"},
{"OrderID":"2","CustomerID":"TRADH","OrderDate":"1996-07-05 00:00:00","Freight":"11.6100","ShipName":null},
{"OrderID":"3","CustomerID":"HANAR","OrderDate":"1996-07-08 00:00:00","Freight":"65.8300","ShipName":"Hanari Carnes"}];
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: "index.jsp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
width: 780,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
});
According to the JQGrid docs, you would do it like this:
var rows= [{"OrderID":"1","CustomerID":"WILMK","OrderDate":"1996-07-04 00:00:00","Freight":"32.3800","ShipName":"Vins et alcools Chevalier"},
{"OrderID":"2","CustomerID":"TRADH","OrderDate":"1996-07-05 00:00:00","Freight":"11.6100","ShipName":null},
{"OrderID":"3","CustomerID":"HANAR","OrderDate":"1996-07-08 00:00:00","Freight":"65.8300","ShipName":"Hanari Carnes"}];
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: "index.jsp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
width: 780,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
for (var i= 0; i < rows.length; ++i) {
$("#jqGrid").jqGrid("addRowData", i+1, rows[i]);
}
});
In here i'm going to expand subgrid using InvoiceId but i have no idea how to get InvoiceId and pass it to the subgrid url.my main grid has InvoiceId.This is JqGrid.When i hardcode the Invoice ID to the subgrid url then it's working.
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/'
});
My Controller accept Id,
[HttpGet]
public JsonResult GetSalesItemsByInvoiceId(int InvoiceId)
{
//Some code here
}
You can use subGridBeforeExpand to set new value of subGridUrl: $(this).jqGrid("setGridParam", {subGridUrl: newValue});.
Alternatively you can consider to use subGridRowExpanded to implement grid as subgrid. Grid as subgrid allows you maximal control over content of subgrid. jqGrid just create empty <div> for the right part of the additional row added under expended one. One need place empty <table> inside for the subgrid and optionally <div> for the pager. After that one just create new grid. The url of the grdi is the URL for subgrid. I see that you use loadonce: true in the main grid. Probably you can download full subgrid for every grid directly during loading of the main grid. The answer provides an example of such implementation.
In jqGrid, the default querystring parameter for subgrid url is id. You can change that using below code:
...
prmNames: {
subgridid: "InvoiceId",
}
...
Therefore, your subgrid url will be
/Sales/GetSalesItemsByInvoiceId?InvoiceId=
instead of
/Sales/GetSalesItemsByInvoiceId?id=
Also you can change unique id of row using below code, you can give any one of the names specified in "colModel" (in this case it will be "InvoiceId"):
...
jsonReader: {
id: 'InvoiceId'
}
...
So your final code will be like this:
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/',
prmNames: {
subgridid: "InvoiceId",
},
jsonReader: {
id: 'InvoiceId'
}
});