How to add Toolbar search for tree grid in jqgrid - jquery-plugins

I am facing an issue in jqgrid's treegrid. For local data the tool barserch is not working and if add change the treegrid as false in colModel its works fine in the sense it is acting as a ordinary grid. i have pasted my code below for your reference
$(document).ready (function () {
var mydata = [
{ id:"AA", name:"012356", num:"07/15/2009", debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
level:"0", parent:"", isLeaf:false, expanded:false },
{ id:"AB", name:"001", num:"07/15/2009", debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
level:"1", parent:"AA", isLeaf:false, expanded:false },
{ id:"AC", name:"124", num:"07/15/2009",debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
level:"2", parent:"AB", isLeaf:true, expanded:false },
{ id:"AD", name:"002", num:"07/11/2009",debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
level:"1", parent:"AA", isLeaf:true, expanded:false },
{ id:"AE", name:"012456", num:"01/13/2009",debit:"454545 ",credit:"General Motors LLC", balance:"LINKAGE, WIPER", enbl:"Bosch",
level:"0", parent:"", isLeaf:false, expanded:true },
{ id:"AF", name:"000", num:"04/1/2011",debit:"454545",credit:"General Motors LLC", balance:"LINKAGE, WIPER", enbl:"Bosch",
level:"1", parent:"AE", isLeaf:true, expanded:false },
{ id:"AG", name:"001", num:"08/15/2009",debit:"454545",credit:"General Motors LLC", balance:"LINKAGE, WIPER", enbl:"Bosch",
level:"1", parent:"AE", isLeaf:true, expanded:false },
{ id:"AI", name:"0X2345", num:"07/15/2010",debit:"2424",credit:"GM Manufacturing Poland", balance:"MOTOR-REAR WIPER", enbl:"Bosch",
level:"0", parent:"", isLeaf:true, expanded:false }
],
grid = $("#treegrid");
grid.jqGrid({
datatype: "local",
data: mydata, // will not used at the loading,
// but during expanding/collapsing the nodes
colNames:["id","Contract#","Eff Date","Part#","Legal Entity","Part Description","Buyer Name"],
colModel:[
{name:'id', index:'id', width:1, hidden:true, key:true},
{name:'name', index:'name', width:180},
{name:'num', index:'acc_num', width:80, align:"center"},
{name:'debit', index:'debit', width:80, align:"right"},
{name:'credit', index:'credit', width:80,align:"right"},
{name:'balance', index:'balance', width:80,align:"right"},
{name:'enbl', index:'enbl', width: 60, align:'center'}
],
height:'100%',
rowNum: 1000,
//pager : "#ptreegrid",
// rowList : [5,10,20],
sortname: 'id',
viewrecords: true,
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'name',
//altRows:true,
//altclass:'myAltRowClass',
caption: "Search Screen Output",
loadComplete : function(){
$("#treegrid").setGridWidth(1085,true);
$("#treegrid").setGridHeight(470,true);
},
gridComplete: function ()
{
$(".treeclick","#treegrid").each(function() {
if($(this).hasClass("tree-plus"))
$(this).trigger("click");
});
}
});
// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
});

There are probably a misunderstanding with my previous answer on the trirand forum. Tree Grid feature of jqGrid work almost only with remote data received from the server per ajax. With respect of some tricks which you use it is do possible to display the local data in the tree grid. Nevertheless you still has very restricted features. For example the local data filtering will not works.
In my answer on your question I supposed that you will use server side data filtering and the server will gives back the subset of tree nodes which corresponds the filter criteria. I'am sorry for the misunderstanding.

Related

JQGrid - How can i reload the dataurl of one select based on another select

I have a JQgrid, i click to add a row and editform opens.
In the editform I have 2 select, loaded using php and mysql.
When I change the first select, i need to reload the 2nd select passing the new id.
I managed to make it work, but I lose bootstrap style and alignment.
Could anybody help me? Id would be fine like i did but I just want to reload the new dataurl, I don't want to lose the style and alignment.
thank you!
$("#gDett").jqGrid({
regional:lingua_attiva,
url:'include/dettagli/grid_esiti_sped.php?idquery=1',
datatype: "json",
mtype: 'GET',
colNames:['ID',
],
colModel :[
{name:'ID', index:'ID', width:80, sortable:false, hidden:true},
{name:'IdUtenteEsi', index:'IdUtenteEsi', width:200, sortable:false, hidden:true,
stype:'select', searchoptions:{dataUrl:'include/dettagli/trovautenti.php'},
editable:true, edittype:'select',
editoptions:{
dataUrl:'include/dettagli/trovautenti.php',
dataEvents: [
{type: 'change',
fn: function (e) {
$("#tr_TipoCella").load('include/dettagli/trovatipicella.php?IdUtente=' + e.target.value);
}
}
]
},
editrules:{required: true, edithidden: true}
},
{name:'TipoCella', index:'TipoCella', width:200, sortable:false, hidden:true,
stype:'select', searchoptions:{dataUrl:'include/dettagli/trovatipicella.php'},
editable:true, edittype:'select',
editoptions:{
dataUrl:'include/dettagli/trovatipicella.php',
postData: function (rowid) {
return {
action: "getState",
IdUtente: $(this).jqGrid("getCell", rowid, "IdUtenteEsi")
};
}
},
editrules:{required: true, edithidden: true}
}
],
editurl:'include/dettagli/grid_esiti_sped.php?idquery=2',
pager: '#pDett',
rowNum:100,
rowList:[10,20,30,50,100],
sortname: '',
sortorder: '',
viewrecords: true,
gridview: true,
caption: 'Service status',
autowidth:false,
shrinkToFit: false,
forceFit:false,
width:'860',
height:'200',
altRows: false,
hiddengrid:false,
hidegrid:false
});

ReSetting the grid data on LoadComplete

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

jqGrid treegrid, Expand Node Programmatically

I am experimenting with the jqGrid treegrid feature. Can anyone explain why the 'expandNode' method doesn't work in this example? (Testing under Chrome and JQ 1.4.2).
Note 1: I can't get any of the expand or collapse methods to do anything. They change the appearance of the icon, but the child rows don't disappear. If I click the icon manually, the appearance changes AND the child rows get hidden as expected.
Note 2: What's the difference between expand/collapse ROW and expand/collapse NODE?
Note 3: I found some entries on the jqGrid wiki about using setTimeOut, but I think that is
relating to wanting to expand everything on initial load. I want to do it based on a click, as indicated here.
$(document).ready(function() {
var table = $("<table id=treegrid></table>");
$("body").append(table);
grid = $("#treegrid");
/* DIRECT COPY FROM SO http://stackoverflow.com/questions/6788727/jqgrid-tree-grid-with-local-data */
var mydata = [
{ id:"1", name:"Cash", num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
level:"0", parent:"", isLeaf:false, expanded:false, loaded:true },
{ id:"2", name:"Cash 1", num:"1", debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
{ id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
level:"2", parent:"2", isLeaf:true, expanded:false, loaded:true },
{ id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },
{ id:"5", name:"Bank\'s", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
level:"0", parent:"", isLeaf:false, expanded:true, loaded:true },
{ id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },
{ id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },
{ id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
level:"0", parent:"", isLeaf:true, expanded:false, loaded:true }
],
grid = $("#treegrid");
grid.jqGrid({
datatype: "jsonstring",
datastr: mydata,
colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
colModel:[
{name:'id', index:'id', width:1, hidden:true, key:true},
{name:'name', index:'name', width:180},
{name:'num', index:'acc_num', width:80, align:"center"},
{name:'debit', index:'debit', width:80, align:"right"},
{name:'credit', index:'credit', width:80,align:"right"},
{name:'balance', index:'balance', width:80,align:"right"},
{name:'enbl', index:'enbl', width: 60, align:'center',
formatter:'checkbox', editoptions:{value:'1:0'},
formatoptions:{disabled:false}}
],
height: 'auto',
gridview: true,
rowNum: 10000,
sortname: 'id',
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'name',
caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
});
/* END DIRECT COPY */
var f = $("<button>ExpandCash</button>");
$("body").append(f);
// Test reloading and summarization changes
f.bind("click",function() {
var rec = $("#treegrid").getRowData("1");
//console.log(JSON.stringify(rec));
$("#treegrid").expandNode(rec);
$("#treegrid").expandRow(rec);
});
});
I was able to get it to expand by aiming for the root nodes (and then second headers; my grid was 3 levels deep) using this code:
function Expand() {
var rows = $("#treeGrid").jqGrid('getRootNodes');
for (var i = 0; i < rows.length; i++){
var childRows = $("#treeGrid").jqGrid('getNodeChildren', rows[i]);
$("#treeGrid").jqGrid('expandNode', rows[i]);
$("#treeGrid").jqGrid('expandRow', rows[i]);
for (var j = 0; j < childRows.length; j++) {
$("#treeGrid").jqGrid('expandNode', childRows[j]);
$("#treeGrid").jqGrid('expandRow', childRows[j]);
}
}
}
Placed inside a simple click function, this would expand all nodes. Data format shouldn't matter, but I used json data. Nested 'for' loops isn't always the best way to go, but I didn't see another solution that worked for me; it shouldn't be bad though unless you have a large number of nested nodes.
NOTE: this code is sensitive to the number of levels your treegrid has; you will need additional loops (or another method) for more than 3 levels (level 0 = root, level 1 = first header, level 2 = leaf), and won't need the inner loop for a 2 level tree

How to disable field column in jqgrid?

How to disable field column in jqgrid?
this is my code :
jQuery("#penanggungJawab").jqGrid({
mtype: "GET",
datatype:"json",
height: 50,
width:900,
colNames:['ID Card','Type Id Card','NO Id Card', 'Expired Date'],
colModel:[ {
name:'idCardIdPnggungJwb',
index:'idCardIdPnggungJwb',
width:310,
editable:true,
hidden:false,
***disabled:true***
}, {
name:'typeIdCardPnggungJwb',
index:'typeIdCardPnggungJwb',
width:310,
editable:true,
edittype:"select",
editoptions:{value:"KTP:KTP;IDC:ID Card Company"},
jsonmap:'typeIdCard'
}, {
name:'nomorIdCardPnggungJwb',
index:'nomorIdCardPnggungJwb',
width:310,
editable:true
},{
name:'expiredDatePnggungJwb',
index:'expiredDatePnggungJwb',
width:310,
editable:true,
editoptions:{size:12, dataInit:function(el) {
$(el).datepicker({dateFormat:"yy/mm/dd",changeMonth: true,changeYear: true});
},
}}],
rowNum:10,
rowList:[10,20,30],
pager: '#Keuangan',
sortname: 'typeIdCardPenanggungJawabKeuangan',
viewrecords: true,
sortorder: "desc",
caption:"Grid No Kartu Identitas",
editurl: "noabjad.json"
}); jQuery("#penanggungJawab").jqGrid('navGrid','#Keuangan',{
del:false,
search:false,
edit:false
},{
reloadAfterSubmit:false
},{
reloadAfterSubmit:false
});
Can I disable one of the columns, that can not be edited?
If I understand your requirements correct you need use
editoptions: {disabled: true}
option for the 'idCardIdPnggungJwb' column. The results you will see here.

jqGrid subgrid is not expanding

I've followed the way shown in www.trirand.com / blog / jqgrid / jqgrid.html
but the subgrid was not expanded
This is my jqgrid code:
jQuery("#list").jqGrid({
url:"../ajax_request/user_table_request.php",
datatype: "json",
mtype : "post",
autoheight:true,
autowidth:true,
colNames:[
"Kode Jabatan Pengguna",
"Id Pengguna",
"Username",
"Nama Pengguna",
"Email",
"Id Jabatan",
"Nama Jabatan"
],
colModel:[
{
name:"id",
index:"kode_jabatan",
align: "center",
width:15,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
name:"id_pengguna",
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
width:20,
editable:false,
editoptions:{readonly:true,size:20},
hidden:false
},
{
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
name:"id_jabatan",
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
},
{
width:10,
editable:false,
editoptions:{readonly:true,size:10},
hidden:false
}
],
rowNum:10,
rowList:[10,20,30,40,50,60,70,80,90,100],
pager: '#pager',
sortname: 'kode_jabatan',
sortorder: "asc",
subGrid : true,
subGridUrl: '../ajax_request/grid_jabatan_request.php',
subGridModel: [
{
name : ['Id Jabatan','Jabatan'],
width : [55,200],
params:['kode_jabatan']
}
],
scrollbar: true
});
jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:false,del:false,search:false});
jQuery("#list").jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
what am I doing wrong?
Anybody have any ideas?
I confused subgrid.js and grid.subgrid.js are they same?
You should define name property for all columns of jqGrid. Currently 4 from 7 columns has no name.
You should not use blanks in the name property of colModel or subGridModel. You use currently 'Id Jabatan' in the name property of subGridModel.
The data for the subgrid will be provided by url defined by subGridUrl parameter. You should verify that it receive the request and answer with crrect JSON data.
When the main grid loads, all the subgrids will automatically be expanded with the following code:
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
"expandOnLoad" : true,
"reloadOnExpand" : true,
"selectOnExpand" : true
},

Resources