DropDownTree Data Binding with DataTable|KT.UI for ASP.NET AJAX

DropDownTree Data Binding with DataTable in ASP.NET

Home > How to > DropDownTree Data Binding to DataTable

Kettic DropDownTree control allows you to bind to various data sources, such as DataTable, Array, to name just a few. If any other data sources become popular choices for data binding, we might also considering adding that support in the future.

In this tutorial, we will provide a sample to show you how to easily bind Kettic DropDownTree to a DataTable in your ASP.NET web application. Before we get started that, first please get to know some of the properties and methods you might encounter later while binding Kettic DropDownTree to DataTable.

DataSource: Developers can use this property to set DropDownTree to an instance of your data source. If you would like to bind DropDownTree at run time, you can only set this property.

DataFieldID: This property specifies the field name from your data source. It is very useful for identifying each unique row from each other. This property cannot be avoided when you are binding a DropDownTree to hierarchical data.

DataFieldParentID: This property is also used specify the field name from your data source. However, it is different form DataFieldID because its function is to identify the row from the parent node. This property is generally used for hierarchical data binding.

DataFieldText: In general, this property is used during data binding process. It is used to specify the field name from the data source in order to populates each of the Node's Text property.

In the example below, we provide sample codes so you can bind your Kettic DropDownTree control to a DataTable with hierarchical data, and display a DropDownTree as specified in your data source.

Aspx codes:

<kettic:PerDropDownTree ID="PerDropDownTree1" runat="server" DefaultMessage="Please select" Width="250px"
                DataFieldID="ID" DataFieldParentID="ParentID" 
                DataTextField="Text">
                <DropDownSettings AutoWidth="Enabled" />
            </kettic:PerDropDownTree>

Visual C# sample codes:

protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            PerDropDownTree1.DataSource = GetData();

            if (!IsPostBack)
            {                

                PerDropDownTree1.DataBind();
            }
        }

        public DataTable GetData()
        {
            DataTable table = new DataTable();
            table.Columns.Add("ID");
            table.Columns.Add("ParentID");
            table.Columns.Add("Value");
            table.Columns.Add("Text");

            table.Rows.Add(new String[] { "1", null, "customValue1", "Item 1" });
            table.Rows.Add(new String[] { "2", "1", "customValue2", "Item 1.0" });
            table.Rows.Add(new String[] { "3", "2", "customValue3", "Item 1.0.0" });
            table.Rows.Add(new String[] { "4", "3", "customValue4", "Item 1.0.0.0" });
            table.Rows.Add(new String[] { "5", "3", "customValue5", "Item 1.0.0.1" });
            table.Rows.Add(new String[] { "6", "5", "customValue2", "Item 1.0.0.1.0" });
            table.Rows.Add(new String[] { "7", "6", "customValue2", "Item 1.0.0.1.0.0" });
            table.Rows.Add(new String[] { "8", "7", "customValue2", "Item 1.0.0.1.0.0.0" });
            table.Rows.Add(new String[] { "9", "1", "customValue9", "Item  1.1" });
            table.Rows.Add(new String[] { "10", "1", "customValue10", "Item 1.2" });

            return table;
        }

Here is how the DropDownTree looks like after binding to DataTable:

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control ASP.NET AJAX Color Editor UI Control ASP.NET AJAX ComboBox UI Control ASP.NET AJAX DataPager UI Control ASP.NET AJAX Dock UI Control ASP.NET AJAX DropDownList UI Control

ASP.NET AJAX DropDownTree UI Control

Overview Getting Started

Features

CheckBoxes Delimiters Settings Filtering

Data Binding

ArrayList Data

DataTable Data

Client Prpgramming

DropDownTree Event

Server Programming

DropDownTree Event ASP.NET AJAX HtmlEditor UI Control ASP.NET AJAX FileManager UI Control ASP.NET AJAX Filter UI Control ASP.NET AJAX Input UI Control ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control