I'm manually updating all data in my treegrid. I do this via a jQuery Ajax call which works fine for the grid and for the paging. But, I added an event for expanding the tree so it will execute my Ajax call and after receiving the data I put that data on the correct place in the dataSource. The tree does however not expand while if I check the dataSource it does have the data in the correct format.
This is my TreeGrid definition:
var treeGrid = $("#" + this.tableId[documentClassListId]).igTreeGrid({ autoAdjustWidth: true, dataSourceType: "json", rendered: function (event, args) { //Request data this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, documentObjectId), tableColumns); }.bind(this), requestError: function (event, args) { this.showError(JSON.parse(args.response.responseJSON).ErrorMessage); }.bind(this), autoGenerateColumns: false, initialExpandDepth: 0, enableRemoteLoadOnDemand: true, columns: tableColumns, rowExpanding: function (event, ui) { var newDocumentObjectId = $(ui.row[0]).children().last().attr("data-documentObjectId"); this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, newDocumentObjectId), tableColumns, ui.row[0].rowIndex); }.bind(this), responseDataKey: "items", childDataKey: "children", features: [ { name: 'Paging', type: "remote", mode: 'rootLevelOnly', pageSizeChanging: function (event, args) { this.pageSize = args.newPageSize; this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, documentObjectId), tableColumns); }.bind(this), pageIndexChanging: function (event, args) { this.pageIndex = args.newPageIndex; this.refreshTreeData(documentClassListId, this.createMessage(ruleCode, documentObjectId), tableColumns); }.bind(this) } ] });
and my AjaxCall is:
$.ajax({ url: 'MyUrlToTheData', dataType: "text", type: "POST", global: false, data: { "message": JSON.stringify(message), "columns": JSON.stringify(tableColumns), "path": this.objectPath }, success: function (data) { var dataObj = JSON.parse(JSON.parse(data)); var treeGrid = $("#" + this.tableId[documentClassListId]); if (row === undefined) { treeGrid.igTreeGrid("option", "responseTotalRecCountKey", "AvailableRowCount"); treeGrid.igTreeGrid("option", "dataSource", dataObj); } else { var dataSource = treeGrid.igTreeGrid("option", "dataSource"); dataSource.items[row - 1].children = dataObj.items; // dataSource = dataSource.items.splice(0, 3); treeGrid.igTreeGrid("dataSourceObject", dataSource); // treeGrid.igTreeGrid("option", "dataSource", dataSource); treeGrid.igTreeGrid("dataBind"); } return true; }.bind(this), error: function (data) { this.showError(JSON.parse(data.responseText).ErrorMessage); }.bind(this) });
The part where I put the data in the dataSource when a row is expanded is:
var dataSource = treeGrid.igTreeGrid("option", "dataSource");
dataSource.items[row - 1].children = dataObj.items;
treeGrid.igTreeGrid("dataSourceObject", dataSource);
// treeGrid.igTreeGrid("option", "dataSource", dataSource);
treeGrid.igTreeGrid("dataBind");
After this code, the data in the dataSource is correct. I'm also not getting any error messages. But the plussign keeps a plussign and the row is not expanding.
I've tried a lot already and searched though your forums and Google, but no luck so far. Any idea's?
Hello Marco,
Thank you for contacting Infragistics Support.
I created and isolated sample in order to investigate the issue, but I was unable to reproduce the behavior you describe.
I used the code that I am sending you – it has two different data source objects, Selection and Paging features enabled, and I am using some of the code from your ajax call – the “dataSourceObject” option and the “dataBind” method. Still the igTreeGrid works as expected after I change the data source at runtime.
Please test this sample on your side; whether or not it works correctly may help indicate the nature of this problem - if it shows the API method working correctly, this indicates a possible problem in the code of your application. It would help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
If you need any additional assistance, feel free to contact me.
<!DOCTYPE html> <html> <head> <title>Sample</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.loader.js"></script> <style> #btn-div{ text-align: center; } #table-div, #btn-div{ margin: 50px auto; width: 800px } </style> </head> <body> <div id="btn-div"> <input id="changeDS" type="button" value="Change DataSourceObject" disabled> </div> <div id="table-div"> <table id="treeGrid"></table> </div> <script> $.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/", cssPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/", resources: "igGrid.*,igTreeGrid.*,igHierarchicalGrid.*,igCombo", ready: function() { var hierarchicalDS = [ { "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "52%", "products": [ { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "10%" }, { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "10%" }, { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "10%" }, { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "10%" }, { "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [ { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "10%" }, { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" }, { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" } ] }, { "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "15%", "products": [ { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "15%" }, { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "10%" }, { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "10%" }, { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "10%" } ] }, { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" } ] } ] var hierarchicalDS2 = [ { "id": 0, "tasks": "Project Plan 2", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [ { "id": 1, "tasks": "Planning 2", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "10%" }, { "id": 2, "tasks": "Write a specification 2", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" }, { "id": 3, "tasks": "Create a demo application 2", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" }, { "id": 4, "tasks": "Collect a feedback 2", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" }, { "id": 5, "tasks": "Design 2", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [ { "id": 8, "tasks": "Conceptual Design 2", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" }, { "id": 9, "tasks": "Preliminary Design 2", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" }, { "id": 10, "tasks": "Final Design 2", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" } ] }, { "id": 6, "tasks": "Development 2", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "15%", "products": [ { "id": 11, "tasks": "Implementation 2", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "15%" }, { "id": 12, "tasks": "Testing 2", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "10%" }, { "id": 13, "tasks": "Bug fixing 2", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "10%" }, { "id": 14, "tasks": "Documenting 2", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "10%" } ] }, { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" } ] } ] $("#changeDS").on("click", function(){ $("#treeGrid").igTreeGrid("dataSourceObject", hierarchicalDS2); $("#treeGrid").igTreeGrid("dataBind"); $(this).prop("disabled", true) }); $("#treeGrid").igTreeGrid({ width: "100%", dataSource: hierarchicalDS, autoGenerateColumns: false, autoCommit: true, height: 500, width: 800, primaryKey: "id", columns: [ { headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true }, { headerText: "Tasks", key: "tasks", width: "30%", dataType: "string" }, { headerText: "Start", key: "start", width: "20%", dataType: "string" }, { headerText: "Finish", key: "finish", width: "20%", dataType: "string" }, { headerText: "Duration", key: "duration", width: "20%", dataType: "string" }, { headerText: "Progress", key: "progress", width: "10%", dataType: "string" } ], childDataKey: "products", rendered: function(){ $("#changeDS").prop("disabled", false) }, features: [ { name: "Selection", multipleSelection: true, }, { name: "Paging", pageSize: 10, mode: 'allLevels' } ] }); } }); </script> </body> </html>
Hi Vasil,
Thanks for your answer and example. The thing i was not doing was defining a primary key. I don't really have a primary key in the data there and don't need one. I now add a hidden column to the grid and add my own unique created key to it and define that as primary key. And magically, the tree started working as expected.
So, for others with the same problem. The tree is not working correctly if you don't define a primary key..