Hi All,
I am using nodeContentTemplate for rending nodes. I have a situation where I have to control the image display using Knockout properties or methods, for that I tried below code but is not working . does invoking knockout function is support from codecontroltemplate? If yes can you please share the details. If Knockout is not supported what are ways to control the image rending using global variable??
if I use the same method in tree events like nodeCheckstateChanged,nodeCheckstateChanging & nodeExpanding...etc , it is working fine.
ko.bindingHandlers.edmTreeData = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
}, update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { var edmData = valueAccessor(); var vm = bindingContext.$root; $(element).igTree({ height: 310, dataSource: $.extend(true, [], edmData), singleBranchExpand: true, dataSourceType: 'json', checkboxMode: 'triState', initialExpandDepth: -1, pathSeparator: '.', bindings: { textKey: 'Text', valueKey: 'Value', imageUrlKey: "ImageUrl", childDataProperty: 'Folder', nodeContentTemplate: "${Text} {{if ${Hierarchy} == 'field'}} data-bind='click: vm.AddEDMTreeNode(this)' src='http://png.findicons.com/files/icons/1156/fugue/16/plus.png' /> {{elseif ${Hierarchy} == 'Newplatforminfo'}} {{/if}}" },
}); } };
Hello,
nodeContentTemplate is supported with the knockout extension for the igTree . You could see my runnable code attachment for reference. In short, there is imageUrl observable pointing to the images location. Upon changing it to reference to one of the other images, each node’s image will be updated accordingly. Please notice, our templating engine is used in order to achieve this and this kind of approach is supported. This sample also illustrates some more igTree interactions with Knockout like updating node names for example, so you will get a better overview of the functionality.
Additional resources you may find helping you:
KnockoutJS Binding Online sample: http://igniteui.com/tree/bind-tree-with-ko
igTree templating Blog Article: How to use templates to style the different nodes of the Ignite UI Tree control
General Templating engine samples: http://igniteui.com/templating-engine/overview