Introduction
Knowledge Base
Controls / Grid / How To / Data-Editing / Grid with TreeView and ComboBox editors
New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Grid with TreeView and ComboBox editors

The solution below illustrates how to implement treeview/combobox hybrid editor and dependent load-on-demand combobox editors in RadGrid for ASP.NET AJAX. The demo files can be downloaded from here.

The first type editor is useful when you would like to visualize hierarchical treeview structure for easier navigation among the combobox options when editing cell values (if applicable).

The second scenario is preferred when one wants to reduce the options in a combobox editor based on the selection in another dropdown editor (using the integrated callback mechanism of the filtered combo), thus receiving some performance gains since only the combobox is refreshed as opposed to the entire grid.

RadTreeView and RadComboBox editors in RadGrid

Examine the code implementation and the comments in the source for more details.

JavaScript
<style type="text/css">
    div.RadComboBoxDropDown .rcbItem
    {
        margin: 0;
        padding: 0;
    }
</style>
 <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">

        //stop the event bubbling
        function StopPropagation(e) {
            if (!e) {
                e = window.event;
            }

            e.cancelBubble = true;
        }

        //find the selected node in the treeview inside the combobox and scroll it into view
        function OnClientDropDownOpenedHandler(sender, eventArgs) {
            var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
            var selectedNode = tree.get_selectedNode();

            if (selectedNode) {
                selectedNode.scrollIntoView();
            }
        }
        //when tree node is clicked, set the text and value for the item in the combobox and commit the changes
        function nodeClicking(sender, args) {

            //get the id of the employeesCombo in the edited row (passed from the server in the ItemDataBound event handler)
            var comboBox = $find(window['comboId']);
            var node = args.get_node();

            comboBox.set_text(node.get_text());

            comboBox.trackChanges();
            comboBox.get_items().getItem(0).set_text(node.get_text());
            comboBox.get_items().getItem(0).set_value(node.get_value());
            comboBox.commitChanges();

            comboBox.hideDropDown();

            // Call comboBox.attachDropDown if:
            // 1) The RadComboBox is inside an AJAX panel.
            // 2) The RadTreeView has a server-side event handler for the NodeClick event, i.e. it initiates a postback when clicking on a Node.
            // Otherwise the AJAX postback becomes a normal postback regardless of the outer AJAX panel.

            comboBox.attachDropDown();
        }
        function freightComboClientSelectedIndexChangedHandler(sender, eventArgs) {
            //get reference to the grid row DOM element
            var gridRow = sender.get_element().parentNode.parentNode;
            //locate the customers combobox in the same row using the $telerik.findControl method from the Telerik Client Static Library
            //note that the id of the combobox concatenates RCB_ + UniqueName value for the column, i.e. RCB_CustomerName in this particular case
            var customersCombo = $telerik.findControl(gridRow, "RCB_CustomerName");
            // this will fire the ItemsRequested server event and hook the OnClientItemsRequested client event of the
            // customers combobox passing the freight as a parameter to the first event
            customersCombo.add_itemsRequested(customersComboItemsRequested);
            customersCombo.requestItems(eventArgs.get_item().get_value(), false);
        }
        function customersComboItemsRequested(sender, eventArgs) {
            if (sender.get_items().get_count() > 0) {
                // pre-select the first item
                sender.findItemByText(sender.get_items().getItem(0).get_text()).select();
            }
            //detach the client items requested event as it not needed any more
            sender.remove_itemsRequested(customersComboItemsRequested);
        }
    </script>
</telerik:RadScriptBlock>
Not finding the help you need?
Contact Support