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,
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
I am currently looking into this matter for you. I will keep you posted on my progress and I get back to you soon with more information or questions.
Please feel free to contact me if you need any further assistance with this matter..
$("#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
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: