How to de-select node in kendo treeview ?
I tried with removing class 'k-state-selected' from node.It works fine, but is there any direct method to do that.
There is a better way to deselect all nodes in Kendo UI now:
var tree = $("#treeview").data("kendoTreeView");
treeControl.select($());
https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/methods/select
First get selected node then find specific span using 'k-state-selected' class then remove it.
var treeControl = $("#tree-control ").data("kendoTreeView");
treeControl .select().find("span.k-state-selected")
.removeClass("k-state-selected");
Related
I need activate the last tab in tabpanel in extjs. I have a button that adds new tabs and I need to change the last added.
You can get the length of the items array and setActiveTab using that.
var last = tabPanel.items.length -1;
tabPanel.setActiveTab(last)
Here is fiddle demonstrating a simple working example.
Sencha docs is a huge help in figuring these things out.
I have a dialog box with a dropdown (name="number", xtype="selection") widget in a tab. While loading the dialog, I need to fetch the value in this dropdown to display/hide another tab.
Both the tabs are in the same dialog (xtype="tabpanel")
I tried adding a ExtJS code as a 'listener' in the 2nd tab (which needs to be hidden/displayed) but it didn't work:
<listeners
jcr:primaryType="nt:unstructured"
render="function() {alert(this.findParentByType('tabpanel').getFieldValues('number')); }"/>
If you take a look at the OOB list component, it has the functionality you are after.
It implements two listeners for a drop-down selection that contains the different choices for which tab to show:
listeners
loadcontent ->
function(){
this.findParentByType('tabpanel').manageTabs(this.getValue(),true);
}
selectionchanged ->
function(box,value){
box.findParentByType('tabpanel').manageTabs(value);
}
Whenever the selection changes it will manage the tab with the selected value, also it will do this when the content
is loaded so you wont have to change the value all the time for the changes to take effect.
You will also see the actual tabs and that they are implementing a listener for rendering:
render ->
function() {
//The different panels will have to have the index corresponsing to their order in the node structure
this.findParentByType('tabpanel').hideTabStripItem( 'the index for the tab' );
}
Finally for this to work, the main tabpanel needs to have the function "manageTabs" defined as a property:
function(tab,noSwitch){
//Here you will have to specify the different node names for the panels
var tabs=['tab1','tab2','tab3',....,'tab n'];
var index=tabs.indexOf(tab);
if(index==-1) return;
for(var i=1;i<tabs.length;i++){
if(index==i){
this.unhideTabStripItem(i);
}else{
this.hideTabStripItem(i);
}
}
this.doLayout();if(!noSwitch)this.activate(index);
}
So this would be possible to just modify a little for your example to work :)
Hope it helps
/Johan
expand/collapse icon is not shown after adding the child node to tree panel in extjs.
here i have a scenario where i get only immediate childrens of the node. on getting the immediate childrens i want to add those to the selected node.
i can add the child nodes but the expand/collapse icon does not come up after adding the node.
following is my code.
onItemExpand : function(nodeinterface,eOpts)
{
if(!nodeinterface.hasChildNodes())
{
nodeinterface.appendChild(dataFromES[0]);
}
}
here the data contains the property leaf:false so that it can have more childs.
any help is really appreciated.
Thanks
Set the parent node (in your case the nodeinterface variable) "leaf" property to false before you append a new child.
if(!nodeinterface.hasChildNodes())
{
nodeinterface.set('leaf', false);
nodeinterface.appendChild(dataFromES[0]);
}
I've experienced the same problem and in my case the problem was related with the lack of the id property in the nodes.
I've added a random id when creating the nodes to append and then the expand/collapse icon is properly shown.
Alex
I want to highlight a particular item after loading the list in sencha. I think we need to do something with the tpl of the list.So how is it possibe?
If you are using Ext.list.ListView or its parent Ext.DataView, use getNode() to get the HTML element that you want to highlight, then highlight it.
Something like:
var node = list.getNode('something');
Ext.fly(node).highlight();
In ExtJS 4.1.1 or newer you can use component method setHighlightedItem(item) for that purpose.
My Form Panels need to be rendered based on a selection in an XML tree structure. However, my form panel for a specific node is only rendered the first time. When I change the selection to something else and return to the original selection, the form panel is not re-rendered.
It was rendering correctly based on the selection before when I had a simple Ext.Template and I did
var temp = Ext.getCmp('details-panel').body;
and then
(Ext.Template's name).overwrite(temp, node.attributes).
When I changed this overwrite line to
(Form Panel's name).render(temp), it only works the first time.
Any idea what I am missing? Thanks!
A component will only render once in ExtJS, after this you need to make use of doLayout() after adding and removing child components.
formPanel.doLayout();
I'm not sure I quite understand. I basically have
tp.getSelectionModel().on('selectionchange', function(tree, node){
var el = Ext.getCmp('temp-panel').body;
el.update("");
if(node && node.....){
myForm.render(el);
}
I want different form panels to show up based on which node I click on. So in the if (node && ...) block I need to render a specific formpanel everytime I switch my selection to this node. Right now it is only happening on the first time. Would calling myForm.doLayout() solve this issue?