Nov 29, 2011, 1:33 PM
Modify CustomAttributes values with Javascript, TreeGrid ?
My TreeGrid is the following, How can I modify a specific Node's CustomAttributes when onblur="UpdateCustomAttribiute(this.id);" occurred ?
I define onblur event into the XTemplate Textbox into the TreeGrid.
Thanks
I define onblur event into the XTemplate Textbox into the TreeGrid.
Thanks
<%@ 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();
};
function UpdateCustomAttribiute(id) {
var tree = Ext.getCmp('<%= KnowledgeFieldsTreeGridWithTextBox_TriggerField1.ClientID %>');
var value = document.getElementById(id).value;
//<!-- I wanna get the node here, and modify KnowledgeFiledScore CustomAttributes with new value -->
// <!-- I wanna do it to can get the new CustomAttributes values in CodeBehind -->
}
</script>
<ext:TreeGrid ID="KnowledgeFieldsTreeGridWithTextBox1" runat="server" Title="TreeGrid"
Icon="Plugin" Height="300" AutoHeight="true" AutoExpandColumn="KnowledgeFiledName">
<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="FildName" DataIndex="KnowledgeFiledName" Width="100"
Align="Center" />
<ext:TreeGridColumn Header="Score" DataIndex="KnowledgeFiledScore" Width="200" Align="Right">
<XTemplate runat="server">
<Html>
<tpl if="values.leaf">
<input id="KnowledgeFieldsTreeGridWithTextBox_TextBox{KnowledgeId}" type="text" value="{KnowledgeFiledScore}" style="width:30px; text-align:left;" maxlength="5" onblur="UpdateCustomAttribiute(this.id);"></input>
</tpl>
</Html>
</XTemplate>
</ext:TreeGridColumn>
</Columns>
<Root>
<ext:TreeNode>
<Nodes>
<ext:TreeNode Text="Task" Expanded="true" NodeID="nodeId1">
<CustomAttributes>
<ext:ConfigItem Name="KnowledgeFiledName" Value="FiledName1" Mode="Value" />
<ext:ConfigItem Name="KnowledgeFiledScore" Value="FiledScore1" Mode="Value" />
<ext:ConfigItem Name="KnowledgeFiledId" Value="KnowledgeFiledId1" Mode="Value" />
</CustomAttributes>
<Nodes>
<ext:TreeNode Text="Task1" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="KnowledgeFiledName" Value="FiledName2" Mode="Value" />
<ext:ConfigItem Name="KnowledgeFiledScore" Value="FiledScore2" Mode="Value" />
<ext:ConfigItem Name="KnowledgeFiledId" Value="KnowledgeFiledId2" Mode="Value" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="Task2" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="KnowledgeFiledName" Value="FiledName3" Mode="Value" />
<ext:ConfigItem Name="KnowledgeFiledScore" Value="FiledScore3" Mode="Value" />
<ext:ConfigItem Name="KnowledgeFiledId" Value="KnowledgeFiledId3" Mode="Value" />
</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>
