Hello I am using the IgTree Grid consisting of a parent node, when I loads it, it generates in the collapsed form for the First time but here the parent node consisting of Child data and here further the Child data node is again acting as parent node for other child nodes,suppose
(-)parent0
|
|_ _(-)parent1
| |
| |_ _(-)parent1-1
| |_ _Child1-1
|_ _(-)parent2
The parent1 and parent2 are always opening with (-) icon but the data consisting in that not expanded, we have to click (-) two time in such that first it becomes (+) and then after clicking one more time it expands, here I am using $("#treegrid").igTreeGrid("collapseRow", "0"); method to make every sub parent to be collapsed but it is not working here, as i thinks the problem aries when I again make the Child node to be parent node by using addChild mehod, because an blank lines adds into it. After all the issue is the grid works but by double clicking on the nodes to open i.e. on 1st Click it (+) collapses then on 2nd Click it actually now expands (-). Help me out.
Hello Ashish,
Thank you for posting in our community.
In order to ensure your issue is addressed correctly I will need a small sample illustrating your scenario. Attaching an isolated working sample, along with steps to reproduce is going to be highly appreciated. Having a small application to debug on my side will help me clarify your issue and find the root cause for the behavior.
Additionally, you might consider following topics from our documentation helpful:
$("#treegrid").igTreeGrid({
columns: [{ headerText: "ID", key: "ID", dataType: "string", hidden: true },{ headerText: "Plan Item", key: "O_PLAN_ITEM", dataType: "string", width: "2%", Type: "File Folder" },{ headerText: "Item Code", key: "O_ITEM_CODE", dataType: "string", width: "10%", Type: "File Folder" },//Bug no. 13654... Company Name was not showing{ headerText: "Company Name", key: "CompanyName", dataType: "string", width: "30%", Type: "File Folder" }
.....
],
autoAdjustHeight: true,// autoAdjustWidth: true,autofitLastColumn: true,defaultColumnWidth: 550,autoGenerateColumns: false,primaryKey: "ID",dataSource: obj.PaggingListRecord,childDataKey: "files",initialExpandDepth: 0,autoCommit: true,features: [.....]
});
$(document).delegate("#treegrid", "igcontrolcreated", function (evt, ui) {treeGridData = $("#treegrid").igTreeGrid("option", "dataSource");
// Loop for adding Child in all parents and made them in collapse mode.for (var i = 0; i < treeGridData.length; i++) {
var TreeData = treeGridData[i];$("#treegrid").igTreeGridUpdating("addChild", { "ID": "0" + TreeData.ID }, TreeData.ID)
//*I concatinated 0 to make the every parent root node differ from each other
//For the Item having Space in it, the Tree was not generating the root node thats why ' ' is replaced with '_'if ((TreeData.ID).contains(' ') == true){TreeData.ID = (TreeData.ID).split(' ').join('_');}
$("#treegrid").igTreeGrid("collapseRow", TreeData.ID); //*this code for collapsing working here fine
}});
$(document).delegate("#treegrid", "igtreegridcellclick", function (evt, ui) {//return row keyrowId = ui.rowKey; //*This will act as the parent node for its child});
$(document).delegate("#treegrid", "igtreegridrowexpanded", function (evt, ui) {
var PlanItem, DemandId, SupplyId;
var id = rowId.split("#@#");if (rowId.indexOf("##") == 0) {return;}//It will load all the demand list of a Plan Itemif (id.length == 1) {var url = getPeggingDemandList + sPdCode + '&serverName=' + '&companyName=' + companyName + '&psPlanItem=' + rowId
$.get(url, function (data, status) {obj = JSON.parse(data);
if (obj.PaggingListRecord.length > 0) {if ($("#treegrid").igTreeGrid("rowById", "0" + rowId) != undefined) {$("#treegrid").igTreeGridUpdating("deleteRow", "0" + rowId)}
//*paggingData is my DataSet}
for (var i = 0; i < obj.PaggingListRecord.length; i++) {var paggingData = obj.PaggingListRecord[i];if (DemandId != paggingData.O_DEMAND_ID) {var DemandDate = new Date(paggingData.O_DEMAND_DATE);var day = DemandDate.getDate();var month = DemandDate.toDateString().substr(4, 3);var year = DemandDate.getFullYear();
if (paggingData.O_DEMAND_TYPE == "FCST") {paggingData.O_DEMAND_TYPE = "Forecast Demand";}else if (paggingData.O_DEMAND_TYPE == "ORDR") {paggingData.O_DEMAND_TYPE = "Sales Order Demand";}else if (paggingData.O_DEMAND_TYPE == "WOR1") {....}else if (paggingData.O_DEMAND_TYPE == "OWTQ") {.....}else if (paggingData.O_DEMAND_TYPE == "DEPD") {....}
$("#treegrid").igTreeGridUpdating("addChild", {"ID": paggingData.O_PLAN_ITEM + "#@#" + paggingData.O_DEMAND_ID, "O_ITEM_CODE": paggingData.O_ITEM_CODE, "CompanyName": paggingData.CompanyName, "Whse": paggingData.O_FROMWHS, "DemandId": paggingData.O_DEMAND_ID, "SupplyId": "", "DemandSupplyType": paggingData.O_DEMAND_TYPE,"DemandSupplyDate": day + '-' + month + '-' + year, "CustomerVendorCode": paggingData.O_CARDCODE, "CustomerVendorName": paggingData.O_CARDNAME, "DEMANDQTY": paggingData.O_OPENQTY, "SUPPLYQTY": "", "PEGGEDQTY": "","DemandSupplyDoc": paggingData.DEMAND_DOCNUM, "DemandSupplyLine": paggingData.DEMAND_LINE_NO}, rowId);
DemandId = paggingData.O_DEMAND_ID;
//$("#treegrid").igTreeGrid("commit");
$("#treegrid").igTreeGridUpdating("addChild", { "ID": "0" + paggingData.O_PLAN_ITEM + "#@#" + paggingData.O_DEMAND_ID }, paggingData.O_PLAN_ITEM + "#@#" + paggingData.O_DEMAND_ID)} //*This Code line Iam needing here as I want to create this again as the root node for furhter child data, I thinks by again using addChild the data opens in weired mode i.e one blank line shows their and data is in collapsed mode but with (-) sign
$("#treegrid").igTreeGrid("collapseRow", paggingData.O_PLAN_ITEM + "#@#" + paggingData.O_DEMAND_ID); //* If now I wants to collapse it this won't work
PlanItem = paggingData.O_PLAN_ITEM;}$("#treegrid").igTreeGrid("commit");$("#treegrid").igTreeGridUpdating("updateRow", rowId, { ID: "##" + rowId });});}
//*My Requirement here is to click the (+) icon and expand the data I have to do it twice i.e. First it collapses and then expands on second click, here for every (+) in the row the futher row data fetches from the server
Based on the code snippets provided it seems that you’re aiming to implement manual load on demand when the parent row is expanded.
If that’s the case instead of manually adding the related child data as child rows via the addChild method you can directly utilize the existing load on demand functionality of the TreeGrid.
You can enable it by setting the enableRemoteLoadOnDemand option to true. This will ensure that if you have an empty array as a value for the field corresponding to the childDateKey (in this case “files”) option of the the grid will treat the data as not yet loaded and will automatically render a “+” sign for the record allowing you to expand it and loading the data on demand only once you’ve expanded it.
If you’d like to customize the format of the remote request so that it can match the format expected by your backend service you can use customEncodeUrlFunc option of the data source.
It allows you to define a custom function for formatting the whole url that will be used for the remote request.
For example:
var myUrlParamsEncoding = function (item, params) { var getPeggingDemandList = "", sPdCode = "", companyName = item.CompanyName, rowId = item.ID ; //generate the custom url that will be used for the remote request for the child data. var url = "http://myService?" + sPdCode + '&serverName=' + '&companyName=' + companyName + '&psPlanItem=' + rowId; … return url;}var ds = new $.ig.TreeHierarchicalDataSource({ dataSource: data, type: "json", schema: {searchField: "PaggingListRecord"}, treeDS: { customEncodeUrlFunc: myUrlParamsEncoding, childDataKey: "files", initialExpandDepth: 0, enableRemoteLoadOnDemand: true } });
$("#treegrid").igTreeGrid({ enableRemoteLoadOnDemand : true,dataSource: ds,…});
You can find more detailed information on the Load on demand feature here: https://www.igniteui.com/help/igtreegrid-load-on-demand
I’ve attached a small sample that demonstrates this approach. Please refer to it and let me know if you’re aiming to achieve something similar.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://es.infragistics.com/support
enableRemoteLoadOnDemand: true won't work for me, can you help me with a jquery/javascript snippet in which I can also make the Child Key acting as parent for further child keys, earlie I used addChild method for achieving that but, these cause the unnecessary adding of one blank line and may be because of these the signs ("-") is with that node element, herer I am using VB.net Controller as my Service which return a JSON String, and by converting that string to JSON Object I put these data to grid by addChild method
The customEncodeUrlFunc cannot be used to populate the child data.Its purpose is to customize the url used when making the remote request to get the child data.
Instead of manually triggering an ajax call to get the data you can let the grid initiate the call when a row is expanded and customize the url that will be used for that requets in the customEncodeUrlFunc.
For example, instead doing this on rowExpanded:
var url = getPeggingDemandList + sPdCode + '&serverName=' + '&companyName=' + companyName + '&psPlanItem=' + rowId;
$.get(url, function (data, status) {
…
}
Use the loadonDemand functionality (set enableRemoteLoadOnDemand) and modify the url so that it matches the url format your backend expects:
customEncodeUrlFunc: myUrlParamsEncoding
var myUrlParamsEncoding = function (item, params) {
return url;
In this way the grid will initiate the remote ajax request and will process and bind the child data returned by the service automatically.
Let me know if you have any additional questions.
Hello Maya,
It works but as you said i removed the "#@#" concatenation from my Id and have putted some simple string in place of it, I am not using the enableRemoteLoadOnDemand: true here. Let me know about some quires asked above for your sample code you attached
Could you check your browser’s console after the call to collapse the row:
It seems that the row id contains special characters, which is not supported for the grid so the following call may throw an exception.
Could you remove the special characters from the id and let me know if that solves your issue?