Custom TreeGrid nodes ?

Page 1 of 2 12 LastLast
  1. #1

    Custom TreeGrid nodes ?

    I'm gonna create a TreeGrid with custom nodes.
    e.g :
    All of TreeGrid's nodes should have a textbox at the front of itself and user should can write a number at it.
    See the below image :

    Click image for larger version. 

Name:	treegrid.jpg 
Views:	760 
Size:	26.2 KB 
ID:	3467

    Also, I have to get each nodes' textbox values.

    Could you please guide me how I can create it with Ext.net and C# ?
    Thanks.
    Last edited by Mohammad; Nov 20, 2011 at 11:08 AM.
  2. #2
    Hi,

    I can suggest to set up a respective XTemplate for a TreeGridColumn. Something like this:
    http://forums.ext.net/showthread.php?15990
  3. #3

    problems

    I've already tested it, It has some problems :
    1. We can't write anything in the text-boxes because , we lose text-boxes focus once the click on it.
    2. I wanna have text-box only in front of leaf nodes, not in front of all nodes.

    Thanks anyway, I have to implement it with JQuery TreeView
  4. #4
    Here you are.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <style type="text/css">
            .number-input {
                margin-left: 5px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TreeGrid runat="server" AutoHeight="true">
                <Columns>
                    <ext:TreeGridColumn Header="Task" DataIndex="text" Width="100" />
                    <ext:TreeGridColumn Header="Score" DataIndex="score" Width="200">
                        <XTemplate runat="server">
                            <Html>
                                <tpl if="values.leaf">
                                    Number:<input type="text" class="number-input"></input>
                                </tpl>
                            </Html>
                        </XTemplate>
                    </ext:TreeGridColumn>
                </Columns>
                <Root>
                    <ext:TreeNode>
                        <Nodes>
                            <ext:TreeNode Text="Task" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Task1" Leaf="true" />
                                    <ext:TreeNode Text="Task2" Leaf="true" />
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
                <Listeners>
                    <BeforeClick Handler="return !Ext.fly(e.getTarget()).is('input[type=text]');" />
                </Listeners>
            </ext:TreeGrid>
        </form>
    </body>
    </html>
  5. #5

    Problem

    Thanks for the reply.
    but there is a problem :
    We can't select all text-boxes' value by double click into it. Double click is disabled !
    How can we enable it.
  6. #6
    Please clarify how can I reproduce the issue?

    I double click on text input and it appears to be editable.
  7. #7

    The Issue with Firefox

    Do you check it out with Firefox ?
    I have Firefox 8
  8. #8
    The same behavior for me in FF as well.

    Could you provide the exact steps to reproduce the problem?
  9. #9

    The full code

    The thing that I'm working on it , is an UserControl:
    below is the full code :


    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="KnowledgeFieldsTreeWithTextBox.ascx.cs"
        Inherits="KMS.WebUI.UserControls.KnowledgeFieldsTreeWithTextBox" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script type="text/javascript">
        var KnowledgeFieldsTreeGridWithTextBox_KeyUp = function (el, e) 
        {
            var tree = <%= KnowledgeFieldsTreeGridWithTextBox1.ClientID %>, 
                text = this.getRawValue();
            tree.clearFilter();
            if (Ext.isEmpty(text, false)) return;
            if (e.getKey() === Ext.EventObject.ESC) {
                clearFilter();
            } else {
                var re = new RegExp(".*" + text + ".*", "i");
                tree.filterBy(function (node) {
                    return re.test(node.text);
                });
            }
        };
    
        function KnowledgeFieldsTreeGridWithTextBox_ClearFilter() {
            var field = <%= KnowledgeFieldsTreeGridWithTextBox_TriggerField1.ClientID %>, tree = <%= KnowledgeFieldsTreeGridWithTextBox1.ClientID %>;
            field.setValue("");
            tree.clearFilter();
            tree.getRootNode().ensureVisible();
        };
    </script>
    <ext:TreeGrid ID="KnowledgeFieldsTreeGridWithTextBox1" runat="server" Title=" Scores "
        Icon="Plugin" Height="300" AutoHeight="true" AutoExpandColumn="KnowledgeFiled">
        <TopBar>
            <ext:Toolbar ID="KnowledgeFieldsTreeGridWithTextBoxToolbar1" runat="server">
                <Items>
                    <ext:ToolbarFill ID="KnowledgeFieldsTreeGridWithTextBoxToolbarFill1" runat="server" />
                    <ext:ToolbarTextItem ID="KnowledgeFieldsTreeGridWithTextBoxTextItem1" runat="server"
                        Text=" Filter : " />
                    <ext:TriggerField ID="KnowledgeFieldsTreeGridWithTextBox_TriggerField1" runat="server" EnableKeyEvents="true">
                        <Triggers>
                            <ext:FieldTrigger Icon="Clear" />
                        </Triggers>
                        <Listeners>
                            <KeyUp Fn="KnowledgeFieldsTreeGridWithTextBox_KeyUp" Buffer="250" />
                            <TriggerClick Fn="KnowledgeFieldsTreeGridWithTextBox_ClearFilter" />
                        </Listeners>
                    </ext:TriggerField>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Columns>
            <ext:TreeGridColumn Header="Filed" DataIndex="KnowledgeFiled" Width="100" Align="Center" />
            <ext:TreeGridColumn Header="Number" DataIndex="KnowledgeScore" Width="200" Align="Right">
                <XTemplate runat="server">
                    <Html>
                        <tpl if="values.leaf">
                            <input type="text" style="width:30px; text-align:left;" maxlength="5" value="1"></input>
                        </tpl>
                    </Html>
                </XTemplate>
            </ext:TreeGridColumn>
        </Columns>
        <Root>
            <ext:TreeNode>
                <Nodes>
                    <ext:TreeNode Text="Task" Expanded="true" NodeID="nodeId1">
                        <CustomAttributes>
                            <ext:ConfigItem Name="KnowledgeFiled" Value="Filed1" Mode="Value" />
                            <ext:ConfigItem Name="KnowledgeScore" Value="13.25" />
                        </CustomAttributes>
                        <Nodes>
                            <ext:TreeNode Text="Task1" Leaf="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="KnowledgeFiled" Value="Filed2" Mode="Value" />
                                    <ext:ConfigItem Name="KnowledgeScore" Value="18" />
                                </CustomAttributes>
                            </ext:TreeNode>
                            <ext:TreeNode Text="Task2" Leaf="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="KnowledgeFiled" Value="Filed3" Mode="Value" />
                                    <ext:ConfigItem Name="KnowledgeScore" Value="5" />
                                </CustomAttributes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Nodes>
            </ext:TreeNode>
        </Root>
        <Listeners>
            <BeforeClick Handler="return !Ext.fly(e.getTarget()).is('input[type=text]');" />
        </Listeners>
    </ext:TreeGrid>
    Last edited by Mohammad; Nov 29, 2011 at 6:48 AM.
  10. #10
    How do you load that user control?

    Please provide a full sample to reproduce the problem.
Page 1 of 2 12 LastLast

Similar Threads

  1. Blocking load child nodes with dbclick of treegrid row
    By Thiago Nogueira in forum 1.x Help
    Replies: 1
    Last Post: Nov 29, 2010, 12:42 PM
  2. Replies: 7
    Last Post: Oct 06, 2010, 6:44 PM
  3. [CLOSED] Access TreeGrid nodes from DirectEvent handler
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Jun 28, 2010, 6:35 PM
  4. [CLOSED] TreeGrid example on examples.ext.net does not show any nodes
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 24, 2010, 4:44 PM
  5. [CLOSED] [1.0] Setting Cls property on nodes with TreeGrid
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 15, 2010, 1:23 PM

Tags for this Thread

Posting Permissions