I have set up a demo on this page : http://permanaj.net/jqgrid/index.html
code:
<html>
<head>
<title>JqGrid</title>
<link rel="stylesheet" type="text/css" href="smoothness/jquery-ui-1.8.16.custom.css" />
<link href="jqgrid/ui.jqgrid.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jqgrid/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jqgrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* test save cart */
$('#test-save').click(function(){
var qtyOrder = new Array(), tmpVal, tmpKdProd;
$('.qty-order').each(function(k, v){
tmpVal = $(v).val();
tmpKdProd = '';
if (tmpVal > 0) {
tmpKdProd = $(v).attr('title');
qtyOrder.push( tmpKdProd+'='+tmpVal);
}
});
console.log('Recap Order : ' + qtyOrder.join(','));
return false;
});
/* jqgrid */
function qadQuantityFormatter(cellvalue, options, rowObject){
return '<input type="text" class="qty-order" value="'+cellvalue+'" class="text" title="'+rowObject[3]+'" id="qty-'+rowObject[3]+'"/>';
}
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$('#the-grid').jqGrid({
url: 'data.json',
datatype: 'json',
mtype: 'GET',
colNames: ['Produk Line', 'Produk Group', 'Satuan Ukuran', 'Kode Produk', 'Nama Produk', 'Harga', 'Order Qty.'],
colModel: [
{name:'NAMA_PRODUK_LINE', index: 'NAMA_PRODUK_LINE', width:200, jsonmap: 'cell.NAMA_PRODUK_LINE'},
{name:'NAMA_PRODUK_GROUP', index: 'NAMA_PRODUK_GROUP', width:200, jsonmap: 'cell.NAMA_PRODUK_GROUP'},
{name:'SATUAN', index: 'SATUAN', width:200, jsonmap: 'cell.SATUAN'},
{name:'KODE_PRODUK', index: 'KODE_PRODUK', width:200, jsonmap: 'cell.KODE_PRODUK'},
{name:'NAMA_PRODUK', index: 'NAMA_PRODUK', width:200, jsonmap: 'cell.NAMA_PRODUK'},
{name:'HARGA', index: 'HARGA', width:200, jsonmap: 'cell.HARGA'},
{name:'order', index: 'order', width:200, jsonmap: 'cell.order', formatter: qadQuantityFormatter}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#the-grid-pager',
sortname: 'NAMA_PRODUK_LINE',
sortorder: 'ASC',
caption: 'Daftar Produk',
viewrecords: true,
loadonce: true,
height: 250,
autowidth: true,
onPaging : function(but) {
//alert("Button: "+but + " is clicked");
}
});
$('#the-grid').jqGrid('navGrid','#the-grid-pager',{edit:false,add:false,del:false});
/* cart quantity */
$('#the-grid').delegate('.qty-order', 'blur', function(){
console.log('Order Quantity : ' + $(this).val());
});
});
</script>
</head>
<body>
<div id="wrapper">
<table id="the-grid"></table>
<div id="the-grid-pager"></div>
</div>
</body>
json data:
{
"page":1,
"total":38,
"records":375,
"rows":[
{
"id":"MA0201001",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0201001",
"Hal Color Black HC 969.50",
"0.00",
0
]
},
{
"id":"MA0202002",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0202002",
"CaCO3 BAP-800 Bukit Ashar",
"0.00",
0
]
},
{
"id":"MA0202004",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0202004",
"CaCo3 OM 1 TGD",
"0.00",
0
]
},
{
"id":"MA0204001",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0204001",
"Stab CRC Power ex Taiwan",
"0.00",
0
]
},
{
"id":"MA0205001",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0205001",
"Dioxtyl Ptalate Oil",
"0.00",
0
]
},
{
"id":"MA0206002",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0206002",
"PX 105 ex Malaysia",
"0.00",
0
]
},
{
"id":"MA0206026",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0206026",
"Rikemal AS-005 ex Malaysia",
"0.00",
0
]
},
{
"id":"MA0208003",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208003",
"Tribasic Chemson Naftovin T3A ex China",
"0.00",
0
]
},
{
"id":"MA0208004",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208004",
"Naftomix GRD 19043-I Chemson ex China",
"0.00",
0
]
},
{
"id":"MA0208005",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208005",
"Tribasic Naftovin T3 Chemson ex UK",
"0.00",
0
]
},
{
"id":"MA0208006",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208006",
"Naftomix PRD 2088 Chemson RRC",
"0.00",
0
]
},
...
{
"id":"MA0103003",
"cell":[
"Resin",
"MA01",
"KILOGRAM",
"MA0103003",
"PVC Resin K-65 ST",
"0.00",
0
]
}
]
}
For example, I change the number of Order Qty to 20 for all items, when I click Next once and then click Back once, the number on textfield is reset to 0, not 20
How to achieve when page change, the number on textfield is still 20
Since the quantity field is populated from the remote ajax data,
I think you can only use the onPaging event to save the changes at server side first before the page changes.
Probably using the saveRow method offered.
Related
tried server processing for jQuery data table but getting error:
when run my program shows error like that
DataTables warning: table id=data-table - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 when this site open i cannot understand anything
var table;
//$('#data-table').dataTable().fnDestroy();
$(document).ready(function() {
$('#data-table tfoot th').each( function () {
var title = $('#data-table thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
getall();
table.columns().every( function () {
var that = this;
$(this.footer() ).find('input').on( 'keyup change', function () {
// console.log(this.footer());
if ( that.search() !== this.value ) {
// alert(this.value);
that.search( this.value ).draw();
}
} );
} ); });
function getall()
{
table = $("#data-table").DataTable({
"bDestroy": true
,
"bFilter": true,
"bProcessing": true,
"bDeferRender": true,
"bSort": true,
"bSearchable": true,
"sSearch":true,
"iDisplayStart" : 0,
"iDisplayLength" : 100,
"oLanguage": {
"sEmptyTable": " table is empty "
},
"bServerSide": true,
"sAjaxSource": "fetch.htm",
"sServerMethod": "GET",
"aoColumns":
[
{"mData": "name"},
{"mData": "email"},
{"mData": "fee"},
{"mData": "sname"},
{"mData": "contactno"} ,
{ "mData": "id",
"render" : function(mData,type,row,meta)
{
return ' <button class="btn btn-warning" onclick="get_details('+ mData +')"> Edit </button> <button class="btn btn-danger" onclick="get_delete('+ mData +')">Delete</button>';
}}
],
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax
({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (res, stat)
{
// console.log(res);
fnCallback(res);
}
});
},
"sPaginationType": "full_numbers", "aLengthMenu": [[2,5, 10, 15, 25, 50, 100], [2,5, 10, 15, 25, 50, 100]],// iDisplayLength: 100,
"fnDrawCallback": function () {
$(".tool").tooltip();
}
});
}
var dataTable = [{
id: '10',
date_create: '27-06-2019',
department_name: 'Отдел информационных систем',
status_name: 'В очереди на выполнение',
type_work_name: 'Не работает Интернет',
phone: '99-99-99',
auditory_name: 'В-200',
inventory_number: '24274',
comment: 'something goes wrong',
extra_fields: [{
"tw_value_field_id": "4",
"tw_field_value": "Microsoft Excel",
"type_work_name_field_id": "1",
"field_name": "Название программного обеспечения",
"field_datatype": "select",
"type_work_name_field_value": "Microsoft Word:Microsoft Word;Microsoft Excel:Microsoft Excel;Microsoft PowerPoint:Microsoft PowerPoint"
},
{
"tw_value_field_id": "5",
"tw_field_value": "Problem №1",
"type_work_name_field_id": "3",
"field_name": "Примечание",
"field_datatype": "textarea",
"type_work_name_field_value": null
},
{
"tw_value_field_id": "6",
"tw_field_value": "99-99-55",
"type_work_name_field_id": "2",
"field_name": "Телефон",
"field_datatype": "input",
"type_work_name_field_value": null
}
]
},
{
id: '20',
date_create: '28-06-2019',
department_name: 'Отдел информационных систем',
status_name: 'В очереди на выполнение',
type_work_name: 'Не работает Интернет',
phone: '99-99-98',
auditory_name: 'В-201',
inventory_number: '24275',
comment: 'something goes wrong',
extra_fields: [{
"tw_value_field_id": "7",
"tw_field_value": "Microsoft PowerPoint",
"type_work_name_field_id": "1",
"field_name": "Название программного обеспечения",
"field_datatype": "select",
"type_work_name_field_value": "Microsoft Word:Microsoft Word;Microsoft Excel:Microsoft Excel;Microsoft PowerPoint:Microsoft PowerPoint"
},
{
"tw_value_field_id": "8",
"tw_field_value": "Problem №2",
"type_work_name_field_id": "3",
"field_name": "Примечание",
"field_datatype": "textarea",
"type_work_name_field_value": null
},
{
"tw_value_field_id": "9",
"tw_field_value": "88-99-55",
"type_work_name_field_id": "2",
"field_name": "Телефон",
"field_datatype": "input",
"type_work_name_field_value": null
}
]
},
{
id: '30',
date_create: '20-06-2019',
department_name: 'Подготовительное отделение',
status_name: 'В очереди на выполнение',
type_work_name: 'Переустановка ОС',
phone: '99-99-00',
auditory_name: 'В-202',
inventory_number: '24276',
comment: 'something goes wrong',
extra_fields: [{
"tw_value_field_id": "10",
"tw_field_value": "Microsoft Word",
"type_work_name_field_id": "1",
"field_name": "Название программного обеспечения",
"field_datatype": "select",
"type_work_name_field_value": "Microsoft Word:Microsoft Word;Microsoft Excel:Microsoft Excel;Microsoft PowerPoint:Microsoft PowerPoint"
},
{
"tw_value_field_id": "11",
"tw_field_value": "Problem №3",
"type_work_name_field_id": "3",
"field_name": "Примечание",
"field_datatype": "textarea",
"type_work_name_field_value": null
},
{
"tw_value_field_id": "12",
"tw_field_value": "77-99-55",
"type_work_name_field_id": "2",
"field_name": "Телефон",
"field_datatype": "input",
"type_work_name_field_value": null
}
]
}
];
$(document).ready(function () {
$("#table-application").jqGrid({
datatype: "local",
data: dataTable,
colNames: ["Номер заявки в системе", "Дата создания", "Отдел", "Статус",
"Тип работ", "Номер телефона для связи", "Аудитория", "Инвентарный номер",
"Описание проблемы", ""
],
colModel: [{
name: "id",
id: "id"
},
{
name: "date_create",
id: "date_create"
},
{
name: "department_name",
id: "department_name",
},
{
name: "status_name",
id: "status_name",
editable: true,
edittype: "select",
editoptions: {
value: "1:В очереди на выполнение;2:Принята в работу;3:Закрыта"
}
},
{
name: "type_work_name",
id: "type_work_name",
editable: true,
edittype: "select",
editoptions: {
value: "1:Установка телефона; 2:Переустановка ОС; 3:Ремонт ПК и техники; 4:Заправка/замена картриджа; 5:Не работает Интернет"
}
},
{
name: "phone",
id: "phone",
editable: true
},
{
name: "auditory_name",
id: "auditory_name",
editable: true,
edittype: "select",
editoptions: {
value: "1:В-200; 2:В-201; 3:В-202; 4:K-300"
}
},
{
name: "inventory_number",
id: "inventory_number",
editable: true,
edittype: "select",
editoptions: {
value: "1:876547; 2:453213; 3:342123; 4:567496; 5:409325; 6:24274; 7:24275; 8:24276",
dataInit: function (el) {
$(el).select2({
language: 'ru',
width: '100%'
});
}
}
},
{
name: "comment",
id: "comment",
editable: true,
edittype: "textarea"
},
{
name: "extra_fields",
id: "extra_fields",
classes: "extra-field",
hidden: true,
title: false,
editable: false,
jsonmap: "extra_fields",
formatter: function (cellvalue) {
if (cellvalue != null) {
return JSON.stringify(cellvalue);
} else
return cellvalue;
}
}
],
pager: "#pager",
height: "auto",
autowidth: true,
forceFit: true,
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Список заявок",
rownumbers: true,
subGrid: true,
subGridBeforeExpand: function (pID, id) {
//получаем значение поля extra_fields по id выбранной строки
extra_field_val = $('#table-application').jqGrid('getCell', id, 'extra_fields');
var jsonArray = $.parseJSON(extra_field_val);
//если дополнительная информация по заявке есть, раскрываем список
if (jsonArray.length > 0) {
console.log(true);
return true;
}
return false;
},
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id +
"' class='scroll'></table>");
extra_field_val = $('#table-application').jqGrid('getCell', row_id,
'extra_fields');
var response = $.parseJSON(extra_field_val);
//задаем массив для подтаблицы
var element_name, element_mode, col_name, objData;
var subColNames, subColModel, subData, selectValue;
subColNames = [];
subColModel = [];
subData = [];
objData = {};
for (var i = 0; i < response.length; i++) {
element_name = {};
element_name = response[i]['field_name'];
subColNames.push(element_name);
element_mode = {};
element_mode = {
name: "col_" + response[i]['tw_value_field_id'],
id: "col_" + response[i]['tw_value_field_id'],
editable: true
};
subColModel.push(element_mode);
if (response[i]['field_datatype'] == 'select') {
element_mode['edittype'] = "select";
selectValue = response[i]['type_work_name_field_value'];
element_mode['editoptions'] = {
value: selectValue
};
}
col_name = "col_" + response[i]['tw_value_field_id'];
objData[col_name] = response[i]['tw_field_value'];
}
subColNames.push("");
subColModel.push({
name: "id",
id: "id",
hidden: true,
editable: true,
editrules: {
edithidden: false
}
});
console.log(subColModel);
objData['id'] = response[0]['id'];
subData.push(objData);
var lastSel;
jQuery("#" + subgrid_table_id).jqGrid({
datatype: "local",
data: subData,
colNames: subColNames,
colModel: subColModel,
height: '75%',
caption: "Дополнительная информация",
onSelectRow: function (id) {
if (id && id !== lastSel) {
jQuery("#" + subgrid_table_id).restoreRow(lastSel);
lastSel = id;
}
jQuery("#" + subgrid_table_id).editRow(id, true);
},
editurl: 'clientArray'
});
},
editurl: 'clientArray'
});
$("#table-application").navGrid("#pager", {
edit: true,
add: false,
del: false,
search: false,
refresh: false,
editicon: "none",
edittext: "Редактировать",
}, {
/*hier setting of edit form*/
});
});
.ui-jqgrid {
font-size: 12px;
}
table {
table-layout: fixed;
}
table th,
table td {
word-wrap: break-word;
}
.table-light tbody+tbody,
.table-light td,
.table-light th,
.table-light thead th {
border-color: #b8c3c3;
}
th.ui-th-column div {
white-space: normal !important;
height: auto !important;
padding: 2px;
}
.ui-jqdialog-content .FormGrid {
margin: 0;
overflow: inherit;
}
.ui-jqdialog .ui-jqdialog-titlebar {
height: 30px;
}
.fm-button {
height: auto;
}
.ui-jqgrid .ui-jqgrid-titlebar {
height: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jqGrid Edit Rows Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href=" https://js.kintone.com/jqgrid/v5.4.0/css/ui.jqgrid.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://js.kintone.com/jqgrid/v5.4.0/js/i18n/grid.locale-ru.js"></script>
<script src="https://js.kintone.com/jqgrid/v5.4.0/js/jquery.jqGrid.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div id="grid_container" class="mt-5">
<table id="table-application">
<tr>
<td></td>
</tr>
</table>
<div id="pager"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I use together jqGrid and select2. In edition mode, when navigation rows, values from row is not substituted in select. If I click button with arrow "next" or "previous" value of inputs, textarea are changed but value of select are not changed.
This happens if I use select2, without select2 it works right. How can I fix it go on using select2?
setting select2 is below
{name: "status_name", id: "status_name", editable: true, edittype: "select", editoptions: {
dataUrl:"/Operator/OperatorApplicationController/getSelect&table=status",
dataInit: function (el) {
$(el).select2({
language: 'ru',
width: '100%'
});
}}}
Since the select2 is external plugin used in jqGrid, maybe you will need to refresh its value when the prev/next button is click.
I have never try this, but you can use the afterclickPgButtons for the form edit button click event - see docs here and undocumented change event in select2 - see here
This can look like this
$('#grid'). jqGrid('navGrid', pager, {params},
...
{ afterclickPgButtons : function(button, form, id ) {
$("#status_name").val(null).trigger('change.select2');
},...
} // edit options parameter
);
Mybe you will need to check if the id of the element is correct.
I want to remove horizontal Gridlines from background of the chart. I am able to remove vertical gridlines successfully.
majorGridLines: { visible: false} hides gridlines for y axes.
If I use same code to hide xAxes gridlines, it wont hide it.
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bar-charts/multiple-axes">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
majorGridLines: {
visible: false,
},
legend: {
position: "bottom"
},
series: [ {
type: "column",
data: [2989, 270, 420, 890, 910, 1394, 1444],
stack: true,
name: "Room Revenue",
color: "#4472c3",
majorGridLines: {
visible: false,
},
}, {
type: "line",
data: [23, 5, 6, 22, 20, 16, 40],
name: "Room Sold",
color: "#12ccbe",
axis: "l100km",
majorGridLines: {
visible: false,
},
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 4000,
visible: false,
}, {
// name: "km",
// title: { text: "km" },
min: 0,
max: 161,
majorUnit: 32,
visible: false
}, {
// name: "mpg",
// title: { text: "miles per gallon" },
// color: "#ec5e0a"
visible: false
}, {
name: "l100km",
// title: { text: "liters per 100km" },
color: "#4e4141",
visible: false
}],
majorGridLines: {
visible: false,
},
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
majorGridLines: {
visible: false,
},
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
You just have the majorGridLine setting in the wrong place. Put it in the valueAxis:
function createChart() {
$("#chart").kendoChart({
legend: {
position: "bottom"
},
series: [ {
type: "column",
data: [2989, 270, 420, 890, 910, 1394, 1444],
stack: true,
name: "Room Revenue",
color: "#4472c3",
}, {
type: "line",
data: [23, 5, 6, 22, 20, 16, 40],
name: "Room Sold",
color: "#12ccbe",
axis: "l100km",
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 4000,
visible: false,
majorGridLines: {
visible: false,
},
}, {
// name: "km",
// title: { text: "km" },
min: 0,
max: 161,
majorUnit: 32,
visible: false,
majorGridLines: {
visible: false,
},
}, {
// name: "mpg",
// title: { text: "miles per gallon" },
// color: "#ec5e0a"
visible: false,
majorGridLines: {
visible: false,
},
}, {
name: "l100km",
// title: { text: "liters per 100km" },
color: "#4e4141",
visible: false,
majorGridLines: {
visible: false,
},
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
majorGridLines: {
visible: false,
},
}
});
}
DEMO
did you try using below?
yAxis: {
majorGridLines: {
color: "#aa00bb",
width: 3,
visible: false
}
}
I an new to jqgrid with json. I have reviewed the various questions and answers; however, I am still not able to get the data to display in the grid. Below are my results from the PERL script, the HTML page, and a screen shot of the results. Any help will be very much appreciated.
PERL Results
{"addressInfo": { "page": "1", "total": "5","records": "61","rows:"[ { "Id": 1, "lname": "Adams", "fname": "Mr and Mrs David ", "address": "3800 Maplewood Dr", "address2": "", "city": "Lafayette","state": "IN", "zip": "47905", "got-card": "2015", "status": "Active"}, { "Id": 2, "lname": "Baker", "fname": "Mrs Ellen ", "address": "1857 North Colebrook Rd", "address2": "", "city": "MANHIEM","state": "PA ", "zip": "17545", "got-card": "2015", "status": "Active"}, { "Id": 3, "lname": "Banzhof", "fname": "Mr and Mrs Don ", "address": "107 Wellington Rd", "address2": "", "city": "Lancaster","state": "PA ", "zip": "17603", "got-card": "2015", "status": "Active"}] }}
HTML code
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<script src="jqgrid/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
//<![CDATA[
jQuery(document).ready(function () {
jQuery("#list2").jqGrid({
url:'/perl/addrlist2x.pl',
datatype: "json",
mtype: 'GET',
colNames:['Id','Last Name', 'Name','Address','Address 2','City','State','Zip','Got-Card','Status'], //define column names
colModel:[
{name:'id', index:'id', width:25},
{name:'lname', index:'lname', width:100, formatter:'showlink', formatoptions:{baseLinkUrl:'http://localhost/html/addr-update2.html', idName:'Id'}},
{name:'fname', index:'lname', width:200},
{name:'address', index:'lname', width:250},
{name:'address2', index:'lname', width:250},
{name:'city', index:'lname', width:100},
{name:'state', index:'lname', width:45},
{name:'zip', index:'lname', width:40},
{name:'got-card', index:'lname', width:40},
{name:'status', index:'lname', width:50}
], //define column models
jsonReader: {
repeatitems: false,
id: "Id",
root: 'addressInfo.rows',
page: function (obj) { return 1; },
total: function (obj) { return 1; },
rows: function (obj) { return obj.addressInfo.rows.length; }
},
width: 900, //specify width; optional
rowNum:10,
loadonce: true,
rowList:[15,30,45, 60],
pager: '#pager2',
sortname: 'lname',
viewrecords: true,
sortorder: "asc",
caption:"Christmas Address List"
});
});
//]]>
</script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
Screen Shot of Resultsenter image description here
The JSON data is wrong. You should fix "rows:" [{ to "rows": [{. I'd recommend you to validate JSON data in http://jsonlint.com/.
I've tried and I finally give up trying to figure out why my jqGrid doesn't display data.
Let me try and go step-by-step:
The below is what is included for the script...
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
The JSON returned:
{
"total": 1,
"page": 1,
"records": 1,
"rows": [
{
"id": "0001",
"cell": [
"0001",
"XXXXX",
"XXXX",
"XXX",
"XXX",
"XXXXX",
"XXXX",
"7/27/2012 1:46:22 PM",
"XXXXX",
"7/30/2012 3:48:25 PM"
]
}
]
}
The jqGrid Code is as follows:
jQuery(function ($) {
jQuery('#tblManageApplication').jqGrid({
url: '/AdminView/ManageApplicationsJQGridData',
datatype: 'json',
loadError: function (xhr, status, error) { alert(status + " " + error); },
mtype: 'GET',
colNames: ['Application ID', 'Application Name', 'Application Description', 'Country Code', 'Country Name', 'Source Indicator Code', 'Insert User ID', 'Insert User Timestamp', 'Update User ID', 'Update User Timestamp'],
colModel: [
{ name: 'ApplicationID', jsonmap: 'cell.ApplicationID', width: 150 },
{ name: 'ApplicationName', jsonmap: 'cell.ApplicationName', width: 200 },
{ name: 'ApplicationDescription', jsonmap: 'cell.ApplicationDescription', width: 250 },
{ name: 'CountryCode', jsonmap: 'cell.CountryCode', width: 100 },
{ name: 'CountryName', jsonmap: 'cell.CountryName', width: 100 },
{ name: 'SourceIndicatorCode', jsonmap: 'cell.SourceIndicatorCode', width: 100 },
{ name: 'InsertUserID', jsonmap: 'cell.InsertUserID', width: 100 },
{ name: 'InsertUserTimestamp', jsonmap: 'cell.InsertUserTimestamp', width: 100, formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, datefmt: 'd-m-Y' },
{ name: 'UpdateUserID', jsonmap: 'cell.UpdateUserID', width: 100 },
{ name: 'UpdateUserTimestamp', jsonmap: 'cell.UpdateUserTimestamp', width: 175, formatter: 'date', formatoptions: {newformat: 'd-m-Y'}, datefmt: 'd-m-Y' }
],
pager: jQuery('#pager'),
sortName: 'ApplicationID',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [10, 20, 50],
sortorder: 'desc',
height: 300,
width: 1200,
caption: 'Manage Applications',
onCellSelect: function (rowid, index, contents, event) {
alert('onCellSelect: ' + index + ' : ' + contents);
},
success: function (data, textStatus) {
if (textStatus == 'success') {
alert('Successful');
}
},
error: function (data, textStatus) {
alert('An error has occurred');
}
});
});
Wanted to add the corresponding HTML for your reference:
<table id="tblManageApplication"></table>
<div id="pager"></div>
Any help will be greatly appreciated.
first, can you confirm that that data you are sending from controller and colModal names are same alphabetically?
second check your json reader
check this link
http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm i think you need to specify a couple of things here like id and records.
The main error in your code is the usage of jsonReader: { repeatitems: false } option and jsonmap in the case where you don't need there at all. You produce the data in the standard format. So you have to remove the options to be able to fill the grid.
Additionally I would recommend you to change the data format to ISO 8601 format (you can use "o" format of DateTime on the server code) or at least define correct srcformat:
formatoptions: {srcformat: 'm/d/Y g:i:s A', newformat: 'd-m-Y'}
The demo demonstrate that the changes which I described above working.