I have a problem getting my jqgrid to display the data in a treegrid format.
The jqGrid is defined as follows:
$("#grid").jqGrid({
dataType: 'local',
colNames: columnHeaders,
colModel: columnModel,
gridview: true,
treeGrid: true,
treedatatype: 'local',
loadonce: true,
treeGridModel: 'adjacency',
ExpandColumn: 'DFECode',
ExpandColClick: true,
height: 'auto',
caption: 'Multi Site Support',
autowidth: true,
shrinktofit: true,
multiselect: false,
sortable: false,
ignorecase: true,
rowNum: 20,
scroll: true,
loadComplete: function () { gridLoadComplete(); },
onSelectRow: function (id) { gridOnSelectRow(id); },
jsonReader: { repeatitems: false },
onCellSelect: function(rowId, colId, cellContent, evt) {gridOnCellSelect(rowId, colId, cellContent, evt)}
});
With the column headers defined by a call to an MVC action method which returns the following Json:
[ "SiteID", "DFECode", "Site Name", "Role1_ID", "Admin", "Role2_ID", "Support", "Action" ]
The jqGrid Model is defined like this (again generated from an MVC controller action):
[{
"name": "SiteID",
"index": "SiteId",
"width": "0",
"hidden": true,
"sortable": false
},
{
"name": "DFECode",
"index": "DFECode",
"width": "120",
"hidden": false,
"sortable": false
},
{
"name": "SiteName",
"index": "SiteName",
"width": "200",
"hidden": false,
"sortable": false
},
{
"name": "Role1_ID",
"index": "Role1_ID",
"width": "0",
"hidden": true,
"sortable": false
},
{
"name": "Role1_Value",
"index": "Role1_Value",
"width": "90",
"hidden": false,
"sortable": false,
"formatter": "checkbox",
"align": "center",
"editable": true,
"edittype": "checkbox",
"formatoptions": {
"disabled": false
}
},
{
"name": "Role2_ID",
"index": "Role2_ID",
"width": "0",
"hidden": true,
"sortable": false
},
{
"name": "Role2_Value",
"index": "Role2_Value",
"width": "90",
"hidden": false,
"sortable": false,
"formatter": "checkbox",
"align": "center",
"editable": true,
"edittype": "checkbox",
"formatoptions": {
"disabled": false
}
},
{
"name": "Action",
"index": "Action",
"width": "90",
"hidden": false,
"sortable": false,
"formatter": "updateButtonFormatter",
"editable": false,
"formatoptions": {
"disabled": false
}
}]
The initial load of the data returns the following (once more from an MVC controller action:
[{
"SiteID": "25966",
"DFECode": "205",
"SiteName": "Hammersmith and Fulham",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_25966' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "0",
"parent": "",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"SiteID": "224",
"DFECode": "205-1034",
"SiteName": "Randolph Beresford Early Years Centre(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_224' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
},
{
"SiteID": "225",
"DFECode": "205-1039",
"SiteName": "Vanessa Nursery School(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_225' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
},
{
"SiteID": "226",
"DFECode": "205-1056",
"SiteName": "James Lee Nursery School(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_226' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
},
{
"SiteID": "227",
"DFECode": "205-1059",
"SiteName": "Bayonne Nursery School(Hammersmith and Fulham)",
"Role1_ID": 1,
"Role1_Value": true,
"Role2_ID": 2,
"Role2_Value": false,
"Action": "<button type='button' id='action_227' class='btn btn-info select-tag btn-sm'>Update</button>",
"level": "1",
"parent": "25966",
"isLeaf": true,
"expanded": false,
"loaded": true
}]
I've looked at a few examples found on the internet including some on StackOverflow linking to some on Fiddler and I cannot work out for the life of me what I am doing wrong. I would like the data to be displayed as a tree but instead the data seems to be displayed in the standard grid format (please see the attached screen shot). (I am aware it needs some styling but I will do that once I can resolve my treegrid issue !!!)
Screen shot of jqGrid Tree view with incorrect layout
I'd be grateful if someone could take a look and show me the error of my ways.
Thanks @Oleg ...
The jqGrid I use is the latest one from nuget ...
I get the data using the following method and populate the jqGrid as follows ...
var treeData;
$.getJSON("/UserMgmt/Home/GetTreeData", { userId: userId }).done(function (rawData) {
if (rawData !== undefined && rawData !== null) {
treeData = $.parseJSON(rawData);
var grid = $("#grid");
grid[0].addJSONData({
total: treeData.length,
page: 1,
records: treeData.length,
rows: treeData
});
// Set the correct rowId for retrieving the updated row data.
var rowIds = grid.getDataIDs();
for (var i = 0; i < rowIds.length; i++) {
var rowId = rowIds[i];
grid.setCell(rowId, "Action", "<input type='button' value='Update' id='action_" + rowId + "' class='btn btn-info select-tag btn-sm' />");
}
}
});
@Oleg ... The nuget package i use(d) is this one ...
