How to make the child checkboxs checked when loading parent node children dynamically

120

raghu k posted over 9 years ago

Hi all,

below is my scenario

I am loading all the tree nodes children on demand(on nodeExpanding event). My requirement is, if user selects the parent node checkbox first & expands the node later all the child node checkboxs should be selected automatically without triggering nodeCheckstateChanging or nodeCheckstateChanged event(in these events we have written some server action) .

I tried option in below url. this invokes nodeCheckstateChanging or nodeCheckstateChanged event .

is there any way to disable & enable events or any other way to achieve this ?

http://www.infragistics.com/community/forums/t/91434.aspx

2671

Offline Damyan Petev posted over 9 years ago

Hello Raghu,

Thank you for posting in our community.

I can suggest using the ‘triState’ checkboxMode as it seems to match your requirements. You won’t need to do anything else to have newly loaded children match the parent selection state as it will “cascade up and down in this mode”.
//Initialize

$(".selector").igTree({

checkboxMode : "triState"

//…

});

Also no additional events are triggered by this functionality. I’ve made a quick sample demonstrating that: http://jsfiddle.net/damyanpetev/d3q1qzvo/

Let me know if this resolves your issue and don’t hesitate to ask if you need any further assistance.

Regards,

Damyan Petev

Software Developer

Infragistics, Inc.
Cancel
Reply

Cancel
120

raghu k posted over 9 years ago in reply to Damyan Petev

Hi Damyan ,

Thanks for response.

we are already using igtree with checkboxMode : "triState" , but we are loading child nodes in nodeExpanding event using custom code, we are not using loadOnDemand property. below is the code which we are using to load nodes dynamically.

is it possible to get the behavior as in above shared example(using loadOnDemand ) using below approach.

self.loadEDMTree = function (data, hierarchy, parentPath, parentText) {

if (parentPath) {
var parentNode = $("#edmTree").igTree("nodeByPath", parentPath);
var loadingNodePath = parentPath + ".0";
$("#edmTree").igTree("removeAt", loadingNodePath);
for (var i = 0, len = data.length; i < len; i++) {
$("#edmTree").igTree("addNode", data[i], parentNode);
}
$("#edmTree").igTree("expand", parentNode);
}
else {
self.edmTreeData(data);
}

};
Cancel
Reply

Cancel
120

raghu k posted over 9 years ago in reply to raghu k

I changed my code as given in shared example. In my case data source is Odata. I am loading top level nodes through edmdata object in below code. when we expand the top level node, I am getting below error in console. In fiddler I notice that Json array is returned by server, and is in proper format. below is the code snippets related to it.

Uncaught TypeError: Cannot read property 'length' of undefined
$.ig.DataSource.$.ig.DataSource.Class.extend._successCallback
jQuery.Callbacks.fire
jQuery.Callbacks.self.fireWith
done
jQuery.ajaxTransport.send.callback

Json from Service

[{\"Text\":\"Serendipity\",\"Value\":\"Serendipity\",\"Hierarchy\":\"field\",\"Type\":\"Project\",\"PrimaryKeys\":[\"field_name=Serendipity\"],\"ImageUrl\":\"..\/images\/dt\/field.jpg\",\"Folder\":[]}]

$(element).igTree({
height: 310,
dataSource: $.extend(true, [], edmData),
checkboxMode: 'triState',
initialExpandDepth: -1,
pathSeparator: '.',
loadOnDemand: true,
dataSourceUrl: "/DataTransfer/_vti_bin/DSP%20Services/OWEDMTransferManager.svc/GetEDM/EDM/GetChild/root" + "?$format=json&$callback=?",
responseDataKey: "data",
responseDataType: "json",
bindings: {
textKey: 'Text',
valueKey: 'Value',
imageUrlKey: "ImageUrl",
childDataProperty: 'Folder',
nodeContentTemplate: $('#edmtemplate').html(),
},
nodePopulating: function (event, ui) {
$("#edmTree").igTree('option', 'dataSourceUrl', '/DataTransfer/_vti_bin/DSP%20Services/OWEDMTransferManager.svc/GetEDM/EDM/GetChild/company?id=Neptune Oil Company of Canada Limited');

return true;
}

not sure what I am missing. any thoughts on this would be helpful.

if any one has samples of load-on-demand with OData in igtree please share.
Cancel
Reply

Cancel
2671

Suggested Answer
Offline Damyan Petev posted over 9 years ago in reply to raghu k

Hello Raghu,

Thanks for sharing more details – I think those would help a lot to narrow down the problems you are facing.

As you are using custom loading/adding nodes, to achieve the functionality in the first question you can simply wrap the API calls in with flag sets to help you avoid unnecessary calls to the server actions. So if you are using an approach similar to the other thread:

var isLoadingChildren = false;
// somewhere after loading the nodes, on expanding:
isLoadingChildren = true;
for (var i = 0; i < nodes.length; i++) {
    $tree.igTree("toggleCheckstate", nodes[i].element);
}
isLoadingChildren = false;

And then you can filter the events by ignoring when this flag is on:

$(elemnt).igTree({
                //...
                nodeCheckstateChanged: function(evt, ui) {
                                if(isLoadingChildren) return;
                                // handle user check..
                }
});

To answer the second question: It looks like your “responseDataKey” is set to the wrong value looking at the data response as there is where the controls will look for their data and it is not wrapped in such property. So it should be set to either empty or null:

$(element).igTree({
    //…
    responseDataKey: null,
});

This help topic on Tree Performance has a section that can help you and here’s an updated sample using oData:

http://jsfiddle.net/damyanpetev/3LnovaaL/

Keep in mind response keys vary by oData implementations and in some cases server capabilities. Let me know if these helped.

Regards,
Damyan Petev
Software Developer
Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel