Search code examples
ext.nettreegrid

Custom Ext.Net TreeGrid nodes?

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

Custom Ext.Net TreeGrid

Also, I have to get each nodes' textbox values in code behind at postback.

Could you please guide me, how I can create it with Ext.net and C# ?
Thanks.

Solution

  • I could found the answer :

    <ext:TreeGrid ID="KnowledgeFieldsTreeGridWithTextBox1" runat="server" Title="Fileds "
    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 Name" DataIndex="KnowledgeFiledName" Width="100" Align="Center" />
        <ext:TreeGridColumn Header="Score" 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="{KnowledgeFiledScore}"></input>
                    </tpl>
                </Html>
            </XTemplate>
        </ext:TreeGridColumn>
    </Columns>
    <Root>

    </Root>
    <Listeners>
        <BeforeClick Handler="return !Ext.fly(e.getTarget()).is('input[type=text]');" />
    </Listeners>
</ext:TreeGrid>