I am using jqGrid version 4.6.0
My question is the same as
This Question.
The solution accepted there is to use primary key but I don't have primary key for my rows. Is there a way to force jqgrid to have unique row Ids upon sorting, changing pages Or deleting rows ?
The issue I have is if I delete a say row 2 from a grids with 5 rows the rowid for 3 is set to 2, row4 to 3...etc. I want my rows to be unique Ids and I want that to be generated in the client side
For more info: My grid is client side paged and sorted.
Here is a JsFiddle link to the sample data of my grid.
testRow = function()
{
var row2correct = $("#list").jqGrid('getRowData', 2);// {meterid:2, DocGroupName: "name2", DocList: "list2", Mandatory: "No"};
var row6wong = $("#list").jqGrid('getRowData', 6);// is empty but i was expecting {meterid:4, DocGroupName: "name6", DocList: "ggg", Mandatory: "Yes"}
}
var mydata = [
{meterid:1 , metername: "name1", DocList: "list1", Mandatory: "Yes"},
{meterid:2, metername: "name2", DocList: "list2", Mandatory: "No"},
{meterid:1, metername: "name3", DocList: "list3", Mandatory: "No"},
{meterid:3, metername: "name4", DocList: "list4", Mandatory: "Yes"},
{meterid:4, metername: "name5", DocList: "list5", Mandatory: "Yes"},
{meterid:4, metername: "name6", DocList: "ggg", Mandatory: "Yes"},
];
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['Meterid', 'metername','Document Name','No of Mandatory'],
colModel :[
{name:'meterid', index:'meterid', width:55},
{name:'metername', index:'metername', width:90},
{name:'DocList', index:'DocList', width:90, editable: true }, {name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
pager: '#pager',
rowNum:4,
rowList:[4,8,30],
sortorder: 'asc',
viewrecords: true,
gridview: true
});
You can add
var i, l = mydata.length, item;
for (i = 0; i < l; i++) {
item = mydata[i];
item.id = String(item.meterid) + "_" + item.metername;
}
before usage of mydata as the value of data parameter. It should fix your main problem. If you load the data from the server then you can assign id on the server side or to use beforeProcessing callback to modified the data returned from the server before the data will be processed by jqGrid.
Related
When i don't have any data in subgrid i am getting empty grid in subgrid. Also need to hide the expand icon. Below is the code i used.
$(document).ready(function() {
'use strict';
var myData = [
{
id: "10",
c1: "My Value 1",
c2: "My Value 1.1",
subgridData: [
{ id: "10", c1: "aa", c2: "ab" },
{ id: "20", c1: "ba", c2: "bb" },
{ id: "30", c1: "ca", c2: "cb" }
]
},
{
id: "20",
c1: "My Value 2",
c2: "My Value 2.1",
subgridData: [
{ id: "10", c1: "da", c2: "db" },
{ id: "20", c1: "ea", c2: "eb" },
{ id: "30", c1: "fa", c2: "fb" }
]
},
{
id: "30",
c1: "My Value 3",
c2: "My Value 3.1"
}
],
$grid = $("#list"),
mainGridPrefix = "s_";
$grid.jqGrid({
datatype: "local",
data: myData,
colNames: ["Column 1", "Column 2"],
colModel: [
{ name: "c1", width: 180 },
{ name: "c2", width: 180 }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
ignoreCase: true,
sortname: "c1",
viewrecords: true,
autoencode: true,
height: "100%",
idPrefix: mainGridPrefix,
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId);
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
colModel: [
{ name: "c1", width: 178 },
{ name: "c2", width: 178 }
],
height: "100%",
rowNum: 10000,
autoencode: true,
autowidth: true,
gridview: true,
idPrefix: rowId + "_"
});
$subgrid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-hdiv")
.hide();
}
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
});
My output like below screenshot. How to remove the expand icon and subgrid if we don't have any data for subgrid.
Is there any way to achieve this behavior. My output like below.
The solution of the problem depends on the version and the fork of jqGrid, which you use. I develop free jqGrid fork and have implemented hasSubgrid callback, which I described in the answer (see the demo).
The items of your input data contains subgridData property as the array of subgrid data. Thus one should create the subgrid only if subgridData property is defined and subgridData.length > 0. Thus you need just to upgrade to the current version of jqGrid (4.13.4 or 4.13.5pre) and to add the option
subGridOptions: {
hasSubgrid: function (options) {
// the options contains the following properties
// rowid - the rowid
// iRow - the 0-based index of the row
// iCol - the 0-based index of the column
// data - the item of the data, with the data of the row
var subgridData = options.data.subgridData;
return subgridData != null && subgridData.length > 0;
}
}
to the main grid. The callback subGridOptions.hasSubgrid will be called during building the grid data, thus it works very effective like rowattr, cellattr and custom formatters.
I have a jqgrid and I want to reset the grid data when it is ready.I have a reason for doing this. My actual problem is complicated but here is a simple demo I created.
Here is a demo I created but the issue is that setting data on loadcomplete does not seem to show the data in the grid. The grid is just empty.
var mydata =
[
{id:"1", DocGroupName: "x", DocList: "y", Mandatory: "z"}
];
var mydata2 = [
{id:"2", DocGroupName: "yy", DocList: "rr", Mandatory: "gg"},
{id:"3", DocGroupName: "zz", DocList: "rr", Mandatory: "gg"}
];
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
colModel :[
{name:'id', index:'id', width:55},
{name:'DocGroupName', index:'DocGroupName', width:90, editable: true},
{name:'DocList', index:'DocList', width:90, editable: true },
{name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
loadComplete: function(data)
{
$('#list').jqGrid('clearGridData').jqGrid('setGridParam', {
data: mydata
}).trigger('reloadGrid', [{ page: 1 }]);
},
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray'
});
I am using jqgrid version 4.6.0
I started using getLocalRow in jqGrid after I asked a question in
This Question
Here is a sample code I prepared When some one clicks a button I delete row2 but when I do ('getLocalRow', 2) it gives me row 3 ? Isn't the rowId param in getLocalRow the rowID of the grid which is the key? getRowData works as expected but I don't want to use that because It gives me everything as a string as noted in This Question and answered in This Answer
Here is the jsFiddle sample to test.
deleteRow = function()
{
$("#list").jqGrid('delRowData', 2);
var row2 = $("#list").jqGrid('getLocalRow', 2);
var row3 = $("#list").jqGrid('getLocalRow', 3);
var row2Corrent = $("#list").jqGrid('getRowData', 2); // Empty
var row3correct = $("#list").jqGrid('getRowData', 3);// gives {id:3, DocGroupName: "name3", DocList: "list3", Mandatory: "No"},
}
"use strict";
var mydata = [
{id:1, DocGroupName: "name1", DocList: "list1", Mandatory: "Yes"},
{id:2, DocGroupName: "name2", DocList: "list2", Mandatory: "No"},
{id:3, DocGroupName: "name3", DocList: "list3", Mandatory: "No"},
{id:4, DocGroupName: "name4", DocList: "list4", Mandatory: "Yes"},
];
$("#list").jqGrid({
//url:'php.scripts/customers.get.php',
//datatype: 'xml',
//mtype: 'POST',
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
colModel :[
{name:'id',key:true, index:'id', width:55},
{name:'DocGroupName', index:'DocGroupName', width:90, editable: true,edittype: 'select',
},
{name:'DocList', index:'DocList', width:90, editable: true },
{name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
afterSaveCell: function(rowid,name,val,iRow,iCol) {
if(name=='DocGroupName')
{
var row = $('#list').jqGrid('getRowData',currentRow);
row.DocList='';
var row = $('#list').jqGrid('setRowData',currentRow,row);
}
},
beforeSaveCell: function(rowid,name,val,iRow,iCol) {
// var row = $("#list").getRowData(rowid);
var row = $('#list').jqGrid('getRowData',rowid);
currentRow= rowid;
},
});
The only solution I found to the problem is to use
getRowData(rowId);
Since getrowdata gives everything as a string I was required to do some data conversions for example
var intValue= parseInt(intField);
When I wanted the id from string or
var trueFalse= parseBool(boolField);
function parseBool(val) {
return val === true || val === "true"
}
When I wanted boolean from string.
It is a bit of extra work but that is the only option I am left of.
I have an issue with jqGrid 4.6.0
When I try to get the row data it changes each data to a string I need to parse them to get the actual int or boolean values what is strange is that when I see the rowobject inside a custom formatter the rowdata seems correct
Here is the sample code and jsfiddle link for the sample I created
var myformatter = function (cellval, options, rowObject)
{
// rowObject is correct here {id: 1, Name: "test1", IsActive: true, Count: 10}
var active = rowObject.IsActive;// here active is true/false which is good
var count = rowObject.Count; // here count is 10,20,30 which is good
if(active )
{
// do what ever
}
return cellval;
}
var mydata = [
{id:1, Name: "test1", IsActive: true, Count: 10},
{id:2, Name: "test2", IsActive: false, Count: 20},
{id:3, Name: "test2", IsActive: false, Count: 30} ];
var grid = $("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Name','Is Active','Count'],
colModel :[
{name:'id', index:'id', width:55},
{name:'Name', index:'Name', width:90},
{name:'IsActive', index:'IsActive', width:90, editable: true ,formatter:myformatter},
{name:'Count', index:'Count', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
});
var row = $('#list').jqGrid('getRowData', 1);
// row is: {id: "1", Name: "test1", IsActive: "true", Count: "10"}
// What I was expecting {id: 1, Name: "test1", IsActive: true, Count: 10}
You should use getLocalRow method instead of getRowData to solve your problem. It's important to understand that getRowData get the text from <td> element. Thus the standard type of data is always string. The method getLocalRow just get the reference to internal element of data array with original data.
One more remark: it's recommended to define unformatter (unformat callback) formatter always if one defines custom formatter.
One can see that you use editing of data. The standard editing will change the type of data on modification. Thus you will have the same problem as before. Free jqGrid allows to fix the problem by specifying convertOnSave callback for the column. See the wiki article for more details. Additionally free jqGrid support some standard column templates, which simplifies the data conversion for Boolean, integer and numbers. On can add template: "integer" property in the Count column (see the template definition here) and to add template: "booleanCheckbox" (see here). You can debug the demo for example and verify that the types of properties of data will be hold correctly after editing.
I have this in my datatable, and in my query, i order it by latest creation date, and in datatable i also sort with the date column which is the 16th column in my datatable, but it does not sort according my need.
may i know how to sort the date so that it populate correct information for me?
$(document).ready(function() {
var asInitVals = new Array();
var oTable = $('.datatable').DataTable({
"bProcessing": true,
"oLanguage": {
"sProcessing": "Loading data..."
},
"bSortCellsTop": true,
"iDisplayLength": 10,
"bLengthChange" : false,
"aLengthMenu": {{ Config::get('crud.aLengthMenu') }},
"bServerSide": true,
"bFilter": false,
"aaSorting": [[16, 'desc']],
"sAjaxSource": "{{ url('someurl.ajax') }}",
"columnDefs": [{
"targets": [ 0 ],
"visible": false,
"searchable": false
}]
});