[CLOSED] Ext.Net : How can I disable check one specific node in a treepanel?

  1. #1

    [CLOSED] Ext.Net : How can I disable check one specific node in a treepanel?

    Hi!
    I am developping a software and i have to make some chechnodes always checked. SO i would like to disable checked change on thoose nodes.
    Some can help me do so?
    Best Regards!
    Last edited by Daniil; Nov 12, 2013 at 9:21 AM. Reason: [CLOSED]
  2. #2
    Hello!

    By default, it's not possible. However, we can add this functionality using the overriding:

    Ext.override(Ext.tree.View, {
        onCheckboxChange: function (e, t) {
            var me = this,
                item = e.getTarget(me.getItemSelector(), me.getTargetEl());
    
            if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
                return;
                        
            if (item) {
                me.onCheckChange(me.getRecord(item));
            }
        }
    });
    Full sample:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <script>
                Ext.override(Ext.tree.View, {
                    onCheckboxChange: function (e, t) {
                        var me = this,
                            item = e.getTarget(me.getItemSelector(), me.getTargetEl());
    
                        if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
                            return;
                        
                        if (item) {
                            me.onCheckChange(me.getRecord(item));
                        }
                    }
                });
                
                var myBeforeCheckboxChange = function (item) {
                    if (this.getRecord(item).data.text == "Clean house")
                        return false;
                    else
                        return true;
                }
            </script>
            
            <ext:TreePanel 
                ID="TreePanel1" 
                runat="server" 
                Title="My Task List"
                Icon="Accept"
                Height="400"
                Width="250"
                UseArrows="true"
                AutoScroll="true"
                Animate="true"            
                RootVisible="false">
                <Listeners>
                    <BeforeSelect Handler="return false;" />
                </Listeners>
                <Root>
                    <ext:Node>
                        <Children>
                            <ext:Node Text="To Do" Icon="Folder">
                                <Children>
                                    <ext:Node Text="Go jogging" Leaf="true" Checked="False" />
                                    <ext:Node Text="Take a nap" Leaf="true" Checked="False" />
                                    <ext:Node Text="Clean house" Leaf="true" Checked="False">
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            
                            <ext:Node Text="Grocery List" Icon="Folder">
                                <Children>
                                    <ext:Node Text="Bananas" Leaf="true" Checked="False" />
                                    <ext:Node Text="Milk" Leaf="true" Checked="False" />
                                    <ext:Node Text="Cereal" Leaf="true" Checked="False" />
                                    
                                    <ext:Node Text="Energy foods" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Coffee" Leaf="true" Checked="False" />
                                            <ext:Node Text="Red Bull" Leaf="true" Checked="False" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            
                            <ext:Node Text="Kitchen Remodel" Icon="Folder">
                                <Children>
                                    <ext:Node Text="Finish the budget" Leaf="true" />
                                    <ext:Node Text="Call contractors" Leaf="true" Checked="False" />
                                    <ext:Node Text="Choose design" Leaf="true" Checked="False" />
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                
                <Listeners>
                    <BeforeItemClick Handler="return false" />
                    <Render Handler="this.getRootNode().expand(true);" Delay="50" />
                </Listeners>
                <View>
                    <ext:TreeView runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="beforeCheckboxChange" Value="myBeforeCheckboxChange" Mode="Raw" />
                        </CustomConfig>
                    </ext:TreeView>
                </View>
             </ext:TreePanel>
        </form>
    </body>
    </html>
  3. #3
    Quote Originally Posted by Baidaly View Post
    Hello!

    By default, it's not possible. However, we can add this functionality using the overriding:

    Ext.override(Ext.tree.View, {
        onCheckboxChange: function (e, t) {
            var me = this,
                item = e.getTarget(me.getItemSelector(), me.getTargetEl());
    
            if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
                return;
                        
            if (item) {
                me.onCheckChange(me.getRecord(item));
            }
        }
    });
    Full sample:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <script>
                Ext.override(Ext.tree.View, {
                    onCheckboxChange: function (e, t) {
                        var me = this,
                            item = e.getTarget(me.getItemSelector(), me.getTargetEl());
    
                        if (me.beforeCheckboxChange != undefined && me.beforeCheckboxChange(item) == false)
                            return;
                        
                        if (item) {
                            me.onCheckChange(me.getRecord(item));
                        }
                    }
                });
                
                var myBeforeCheckboxChange = function (item) {
                    if (this.getRecord(item).data.text == "Clean house")
                        return false;
                    else
                        return true;
                }
            </script>
            
            <ext:TreePanel 
                ID="TreePanel1" 
                runat="server" 
                Title="My Task List"
                Icon="Accept"
                Height="400"
                Width="250"
                UseArrows="true"
                AutoScroll="true"
                Animate="true"            
                RootVisible="false">
                <Listeners>
                    <BeforeSelect Handler="return false;" />
                </Listeners>
                <Root>
                    <ext:Node>
                        <Children>
                            <ext:Node Text="To Do" Icon="Folder">
                                <Children>
                                    <ext:Node Text="Go jogging" Leaf="true" Checked="False" />
                                    <ext:Node Text="Take a nap" Leaf="true" Checked="False" />
                                    <ext:Node Text="Clean house" Leaf="true" Checked="False">
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            
                            <ext:Node Text="Grocery List" Icon="Folder">
                                <Children>
                                    <ext:Node Text="Bananas" Leaf="true" Checked="False" />
                                    <ext:Node Text="Milk" Leaf="true" Checked="False" />
                                    <ext:Node Text="Cereal" Leaf="true" Checked="False" />
                                    
                                    <ext:Node Text="Energy foods" Icon="Folder">
                                        <Children>
                                            <ext:Node Text="Coffee" Leaf="true" Checked="False" />
                                            <ext:Node Text="Red Bull" Leaf="true" Checked="False" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            
                            <ext:Node Text="Kitchen Remodel" Icon="Folder">
                                <Children>
                                    <ext:Node Text="Finish the budget" Leaf="true" />
                                    <ext:Node Text="Call contractors" Leaf="true" Checked="False" />
                                    <ext:Node Text="Choose design" Leaf="true" Checked="False" />
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                
                <Listeners>
                    <BeforeItemClick Handler="return false" />
                    <Render Handler="this.getRootNode().expand(true);" Delay="50" />
                </Listeners>
                <View>
                    <ext:TreeView runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="beforeCheckboxChange" Value="myBeforeCheckboxChange" Mode="Raw" />
                        </CustomConfig>
                    </ext:TreeView>
                </View>
             </ext:TreePanel>
        </form>
    </body>
    </html>
    I would like it to be done in Codebehind. Is there a way to do so?
  4. #4
    I don't think it is possible to avoid JavaScript here. What exactly would you like to do in code behind?

    You could bind some flag to the tree nodes like "DisableUncheck" via CustomAttributes and use it in this condition:
    if (this.getRecord(item).data.text == "Clean house")

Similar Threads

  1. Replies: 11
    Last Post: Feb 06, 2013, 5:09 PM
  2. [CLOSED] TreePanel Node Check Through Javascript
    By Patrick_G in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 15, 2012, 3:36 PM
  3. [CLOSED] check/uncheck for all child node in treepanel
    By majestic in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 15, 2012, 3:11 AM
  4. Replies: 0
    Last Post: Aug 09, 2012, 8:30 AM
  5. [CLOSED] Check node count after applying filterBy for TreePanel
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 13, 2012, 2:29 PM

Tags for this Thread

Posting Permissions