java JQGrid TreeGrid - expand node after reloadgrid - jqgrid

ON select row i m calling
$('#grid').trigger('reloadGrid');
after which when the grid reloads, i want this node expanded and show children.
i tried doing somethinglike
var rootNode = $('#grid').jqGrid('getRowData')[0];
$('#grid').jqGrid('expandRow' ,rootNode);
$('#grid').jqGrid('expandNode' ,rootNode);
$('#grid').jqGrid('setSelection',rootNode.id);
But this doesnt seem like working,
Any Help is appreciated.
My grid object is as below
var grid = $('#grid').jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'businessAreaName',
ExpandColClick : false,
url:'/records.do',
datatype: 'json',
mtype: 'GET',
colNames:['Id'
, 'Business Area'
, 'Investment'
],
colModel:[
/*00*/ {name:'Id',index:'Id', width:0, editable:false,hidden:true},
/*01*/ {name:'businessAreaName',index:'businessAreaName', width:160, editable:false}
],
treeReader : {
level_field: 'level',
parent_id_field: 'parent',
leaf_field: 'leaf',
expanded_field: 'expanded'
},
autowidth: true,
height: 240,
pager: '#pager',
sortname: 'id',
sortorder: 'asc',
caption:'ATP ScoreCard',
emptyrecords: 'Empty records',
loadComplete: function() {
designtable();
},
jsonReader : {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
cell: 'cell',
id: 'agileProgrammeId'
},
beforeProcessing : function(data, status, xhr){
}
}
});

First of all there are hidden expanded column which you can fill in the (see here and here). So if you include the children of the node which you need to open directly after the to opened node and set expanded: true in its properties the tree node will be displayed opened.
It can be that you want to trace which nodes opens the user and restore the nodes at the next visit of the same page. In the case I would forward you to the answer and to this one.

Related

How to perform toolbar searching based on certain condition in free jqgrid 4.15.4

Though I have spent a lot of time on looking for similar QA here but Can't able to find out. If You think that I missed checking something please let me know.
question metadata:
So I am using free jqGrid 4.15.4 for showing data in view. I am able to do all things with awesome documentation. but one certain condition where I am not getting about steps.
In my grid, I have 4 columns named as Id, Name, Group, and Status. Group(Section A/ Section B....) are coming from database. Status(New/Pass /Fail) column consist dropdown and by default value is "New" for all records.
question statement :
There are 5 records and I have Selected "Pass" status for 2 out of 5. Now I want to see all 5 records if I select "New" in filter toolbar for that particular group(section A). Since I don't how many names belongs to that particular group, so I want to check this by filtering all records with "New" status. Is this possible with jqgrid? StudentGrid.png
Here is the code snippet:
$("#grid").jqGrid({
url: '/StudentsView/GetAllData',
mtype: "GET",
datatype: "json",
colNames: ['Id','Name', 'Group','Status'],
colModel: [
{label: "Id",name: 'Id',hidden: true,search: false,key:true},
{label: "Name",name: 'Name', search: true, stype: 'text'},
{label: "GroupNo",name: 'GroupNo',searchoptions: {searchOperators: true,sopt: ['eq', 'cn', 'nc'] }, search: true, multipleSearch: true, multipleGroup:true},
{
label: "Status",
name: 'Status',
cellEdit: true,
edittype: 'select',
editable: true,
editoptions: {
value: getStatusOptions(),
dataEvents: [{
type: 'change',
fn: function (e) {
if (statusid != 0)
{
ChangeStatus(row.Id, row.Name, row.Group, statusid);
}
}
}],
}
}
pager: jQuery('#pager'),
loadonce: true,
viewrecords: true,
gridview: true,
iconSet: "fontAwesome",
emptyrecords: "No records to display",
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "Id"
}
});
$('#grid').jqGrid('filterToolbar', { stringResult: true,searchOnEnter:false, defaultSearch: "cn", multipleSearch: true, searchOperators: true,
search: true, loadFilterDefaults: true });
$('#grid').jqGrid('navGrid', "#pager", {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
});
I have added a diagram for better understanding. Thanks in Advance.

How to show subgrid in jqgrid in ASP.NET MVC 5?

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.

jqgrid, alert with arror after failet add record to database

it's my code:
<script type="text/javascript">
var grid = $("#list");
$(function(){
var grid = $("#list");
grid.jqGrid({
url:'grid.php',
datatype: 'xml',
mtype: 'GET',
colNames:['ID sprzętu','Kod sprzętu', 'Właściciel','Konfiguracja'],
colModel :[
{name:'SprzetID', index:'SprzetID', width:90},
{name:'Kod', index:'Kod', width:120, editable: true},
{name:'Wlasciciel', index:'Wlasciciel', width:200, align:'left', editable: true},
{name:'Konfiguracja', index:'Konfiguracja', width:400, align:'left', editable: true},
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'SprzetID',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Lista sprzętu'
});
grid.jqGrid('navGrid','#pager',
{add: true, edit: true, del: true, search: true}, //options
{width:400, }, // edit options
{width:400,closeAfterAdd: true, url:'add.php'}, // add options
{reloadAfterSubmit:false}, // del options
{width:600} // search options
);
});
All is great, when adding record to database is correctly, but when for example field "Kod" is duplicate (it's unique field), record can't be add to database... and isn't. I want to display alert with error message, but I can't find in documentation how to do it... I gues,I should use "afterSubmit", but how... I don't know.
Resolved. In add parameters I added code:
afterSubmit: function(response, postdata) {
if(response.responseText != ""){
return [false, response.responseText];
}else{
return [true,"Ok"];
}}

JQgrid get number of rows (loadonce:true)

I have a jqgrid with inline client-side search. When the database returns 0 records I am trying to hide the grid and show a custom message. The problem is that now when I use the filters the same thing happens. I need to get the number of rows from the back-end response and none of the below lines work. When the page loads I get 5 and 5, and when I filter I get 0 and 0. How can this be achieved?
.jqGrid('getGridParam', 'records')
.jqGrid('getGridParam', 'reccount')
var contratsAC=$("#ContratsAC");
contratsAC.jqGrid({
url:'<?php echo base_url().'rest/AC_Rest/get_contrats/'?>',
mtype : "post",
datatype: "json",
colNames:['Nr dossier','Type','Nom','Statut','Date creation','Date derniere maj','Commentaires','Auteur'],
colModel:[
{name:'nr_dossier',index:'nr_dossier',search:false, align:"center"},
{name:'type',index:'type',search:false, align:"center"},
{name:'nomClient',index:'nomClient',search:false, align:"center"},
{name:'statut',index:'statut',search: true, sortable: false, width:180, stype:'select',
searchoptions:{ value:statuts}, editable: false},
{name:'date_cre',index:'date_cre',search:false, align:"center"},
{name:'dern_date_maj',index:'dern_date_maj',search:false, align:"center"},
{name:'commentaires',index:'commentaires',search:false, align:"center"},
{name:'auteur',index:'auteur',search:false, align:"center"}
],
rowNum:10,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "nr_dossier",
userdata: "userdata"
},
width: 960,
height: "100%",
rowList:[10,20,30],
pager: '#pager1',
sortname: 'nr_dossier',
viewrecords: true,
rownumbers: true,
gridview: true,
loadonce: true,
loadComplete: function(data){
alert(contratsAC.jqGrid('getGridParam', 'records'));
alert(contratsAC.jqGrid('getGridParam', 'reccount'));
if (0==contratsAC.jqGrid('getGridParam', 'records'))
{
contratsAC.jqGrid('GridUnload');
$("#contratsACNoDataMessage").html('<span>Aucun enregistrement a afficher.</span>');
}
else $("#ContratsACContainer").show();
},
pagination:true,
}).navGrid('#pager1',
{add: false,
edit:false,
del:false});
contratsAC.jqGrid('filterToolbar',{searchOnEnter:true,stringResult: true});
You may try getting the length of the data array holded by the grid:
$("#ContratsAC").jqGrid('getGridParam', 'data').length;
The below will give you all the rows - initial data source based
contratsAC.jqGrid('getGridParam', 'records');
To get the number of rows on the current page, lets say after filtering, use
contratsAC.jqGrid('getGridParam', 'reccount');
To get all the records across all pages after filtering, use below
loadComplete: function (gridData) {
var isSearchPerformed = $grid.getGridParam("postData")._search;
if (isSearchPerformed) {
$("#spanFilterTotal").text(gridData.records);
}

jqGrid navgrid problem

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});

Resources