ASPxTreeView.ClientInstanceName Property

Gets or sets the ASPxTreeView’s client programmatic identifier.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue("")]
public string ClientInstanceName { get; set; }

VB.NET

<DefaultValue("")>
Public Property ClientInstanceName As String

Property Value

Type	Default	Description
String	String.Empty	A String value that specifies the ASPxTreeView’s client identifier.

Remarks

Use the ClientInstanceName property to specify a unique client-side identifier for the ASPxTreeView control. The ClientInstanceName property’s value can be used on the client side to programmatically access the client object rendered for the ASPxTreeView control in client-side script. This property is particularly important in referencing the ASPxTreeView control when it is contained within a naming container (for example, within an ASPxPageControl‘s page or an ASPxPopupControl‘s window).

If the ClientInstanceName property is not specified for a control, the control’s client identifier is generated automatically. Note that in this case, client-side programmatic access to the control is not allowed if the control is contained within a naming container.

Special Characters in Client Instance Name

If the ClientInstanceName property contains special characters, for instance, the dot (.), you cannot access a client object by this name. Call the GetByName(name) method to retrieve the client-side object instead.

<dx:ASPxTextBox ... ClientInstanceName="SomeType.SomeProp" />

var txt = ASPxClientControl.GetControlCollection().GetByName("SomeType.SomeProp");  
txt.SetText("Some Text");  

Example

This example demonstrates how to find a node by its text on the client side.

In the example we use the GetNodeByText(text) method to search for the required node. If a node has been found, the code iterates through parent nodes to expand them using the SetExpanded(value) method. After that the found note is selected using the SetSelectedNode(node) method. Note, that the ASPxTreeView's AllowSelectNode property is set to true to allow node selection.

Default.aspx

<script>
function FindNode(s, e) {

    //Check the input data
    if (textbox.GetText()==''){
        alert('Please, input name of a node');
        return;
    }
    if (treeview.GetNodeByText(textbox.GetText()) == null){
        alert('The ' + textbox.GetText() + ' node was not found');
        return;
    }
    var node = treeview.GetNodeByText(textbox.GetText());

    //Iterate through the parent nodes to expand them
    var nodesparent = node.parent;
    while(nodesparent != null) {
        nodesparent.SetExpanded(true);
        nodesparent = nodesparent.parent
    }

    //Select the found node
    treeview.SetSelectedNode(node);
}    
</script>
<dx:ASPxTreeView ID="ASPxTreeView1" runat="server" ClientInstanceName="treeview" DataSourceID="XmlDataSource1" AllowSelectNode="True">
</dx:ASPxTreeView>
<br />
<dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="Input the node's text (e.g. 'News')">
</dx:ASPxLabel>
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" ClientInstanceName="textbox" Width="170px">
</dx:ASPxTextBox>
<br />
<dx:ASPxButton ID="ASPxButton1" runat="server" ClientInstanceName="searchbutton"
    Text="Find" AutoPostBack="False">
    <ClientSideEvents Click="FindNode"/>
</dx:ASPxButton>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/MenuTabbedMenu.xml"
    OnTransforming="XmlDataSource1_Transforming" XPath="/mainmenu/item">
</asp:XmlDataSource>