Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Grid / Load on Demand Grid in Combobox

select

  • Type at least three digits in the combobox input to search for order and click its dropdown image to show the relevant data
    (for example 104__). To display different set of items after choosing an option in the dropdown, focus the input area of the combobox, type the new order id value and reopen the dropdown.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Integration.GridInCombo.DefaultCS" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag ID="Headtag1" runat="server"></telerik:HeadTag>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
            <telerik:Header ID="Header1" runat="server" NavigationLanguage="CS"></telerik:Header>
            <!-- content start -->
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <telerik:RadCodeBlock ID="rcb1" runat="server">

                    <script type="text/javascript">
                     var grid;
                     function GridCreated(sender, args)
                     {
                         grid = sender;
                     }

                     function RowClicked(sender, args) {
                         
                         //fetch the order id, product name and unit price values from the grid and set them as text in the combobox' input
                         var cellValues = args.getDataKeyValue("OrderID") + ", " + args.getDataKeyValue("ProductName") + ", $" + args.getDataKeyValue("UnitPrice");
                         var combo = $find("<%= RadComboBox1.ClientID %>");
                         setTimeout(function()
                         {
                             combo.set_text(cellValues);
                         }, 50);
                     }
                     function ShouldInitiateAjaxRequest(comboText){

                         //if there are three or more symbols entered, filter the data in the dropdown grid
                         if (comboText.length > 2) {
                             $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadFilteredData");
                             return true;
                         }
                         else
                         {
                             return false;
                         }
                     }
                     function HandleOpen(sender, args) {

                         var flag = ShouldInitiateAjaxRequest(sender.get_text());

                         //cancel the dropdown opening if less than three characters are entered in the combobox' input
                         if(!flag)
                         {
                            args.set_cancel(true);
                         }
                    }
                    function HandleKeyPressed(sender) {
                        var combo = $find(sender.id);
                        combo.showDropDown();
                    }
                    </script>

                </telerik:RadCodeBlock>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" RequestQueueSize="3" />
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
                <telerik:RadComboBox ID="RadComboBox1" Width="340px" runat="server" MarkFirstMatch="True"
                    AllowCustomText="True" OnClientDropDownOpening="HandleOpen" ExpandAnimation-Type="None"
                    CollapseAnimation-Type="None" DropDownWidth="340px" onkeyup="HandleKeyPressed(this)">
                    <ItemTemplate>
                        <telerik:RadGrid ID="RadGrid1" Width="325px" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
                            <MasterTableView NoMasterRecordsText="" AutoGenerateColumns="False" DataKeyNames="OrderID,ProductName,UnitPrice"
                                Width="278px" ClientDataKeyNames="OrderID,ProductName,UnitPrice" TableLayout="Fixed">
                                <Columns>
                                    <telerik:GridBoundColumn HeaderText="OrderID" DataField="OrderID" UniqueName="OrderID">
                                        <HeaderStyle Width="75px" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn HeaderText="ProductName" DataField="ProductName" UniqueName="ProductName">
                                        <HeaderStyle Width="138px" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn HeaderText="UnitPrice" DataField="UnitPrice" UniqueName="UnitPrice"
                                        DataFormatString="{0:$###,###.##}">
                                        <HeaderStyle Width="65px" />
                                    </telerik:GridBoundColumn>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings>
                                <ClientEvents OnRowClick="RowClicked" OnGridCreated="GridCreated"></ClientEvents>
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="300px" />
                            </ClientSettings>
                        </telerik:RadGrid>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadComboBoxItem runat="server" Text=" "></telerik:RadComboBoxItem>
                    </Items>
                </telerik:RadComboBox>
            </div>
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451