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>