$("#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 key
rowId = 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 Item
if (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

Hello Ashish,

 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) {

    var url = getPeggingDemandList + sPdCode + '&serverName=' + '&companyName=' + companyName + '&psPlanItem=' + rowId;

    …

    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. 

Best Regards,

Maya Kirova

Infragistics, Inc.

http://es.infragistics.com/support

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

Hello Ashish,

Could you check your browser’s console after the call to collapse the row:

$("#treegrid").igTreeGrid("collapseRow", paggingData.O_PLAN_ITEM + "#@#" + paggingData.O_DEMAND_ID); //* If now I wants to collapse it this won't work

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?

Best Regards,

Maya Kirova

Infragistics, Inc.

http://es.infragistics.com/support

Hey Maya, Thanks for the sample,I go through it but have some problem facing in the customizations.

Let me clear one thing, here customEncodeUrlFunc: myUrlParamsEncoding  here the myUrlParamsEncoding method  returns a url but I want here to return a dataset for the Child Data which can be filled in the Grid, as I have to use AJAX which will return a JSON String here.