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

ComboBox / ADO.NET Service


    1. Open the combobox to see all items.
    2. Type in some text to filter.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#"></qsf:Header>

            <script type="text/javascript">
            //<![CDATA[
                function onSuccess(result) {            
                    //get instance of the RadComboBox client-side object
                    var comboBox = $find("<%= RadComboBox1.ClientID %>");

                    //remove all combobox items
                    comboBox.get_items().clear();
                    
                    //the result in JSON format is available as a "d" field
                    var customers = result.d;

                    //Traverse the array of objects and create combobox items
                    for (var i = 0; i < customers.length; i++) {
                        var customer = customers[i];

                        var comboBoxItem = new Telerik.Web.UI.RadComboBoxItem();
                        comboBoxItem.set_text(customer.ContactName);
                        comboBox.get_items().add(comboBoxItem);
                    }

                    //Highlight the matches based on the combobox text
                    comboBox.highlightAllMatches(comboBox.get_text());
                }

                function itemsRequesting(sender, args) {
                    var filter = "";

                    //Set the filter if the user typed some text
                    var text = args.get_text();
                    
                    if (text != "")
                        filter = "&$filter=substringof('" + text + "', ContactName)";

                    //Call the ADO.NET Data Service
                    $telerik.$.ajax({
                        type: "GET", // HTTP method
                        url: '<%= ResolveUrl("ComboBoxAdoNetService.svc/Customers?$orderby=ContactName") %>' + filter, // ADO.NET DataService URL
                        contentType: "application/json; charset=utf-8", // request the result to be in JSON
                        dataType: "json",
                        success: onSuccess, // callback method to invoke when the request is complete
                        dataFilter: function(data, type) { // ADO.NET Services return invalid JSON, so assign a pre-filtering function to sanitize the response
                         return data.replace(/\\'/g,"'");
                        }
                    });

                    //Prevent the default load on demand
                    args.set_cancel(true);
                }
            //]]>
            </script>
            
            <telerik:RadComboBox runat="server" ID="RadComboBox1" Height="200px" EnableLoadOnDemand="true"
                EmptyMessage="Type here ..." OnClientItemsRequesting="itemsRequesting" Filter="Contains">
            </telerik:RadComboBox>
            <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </div>
        </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