Telerik Extensions for ASP.NET MVC

This help topic explains how to configure Telerik ComboBox for ASP.NET MVC to use Ajax or WebService binding

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Telerik ComboBox for ASP.NET MVC can load its items on demand. To do so it must be configured for client side binding. To do so use the DataBinding(Action<(Of <<'(ComboBoxDataBindingConfigurationBuilder>)>>)) method.

Ajax Binding

To configure the combobox to use Ajax binding you need to perform the following steps:
  1. Add a new action method which returns result of type JsonResult.
    CopyController
    public class HomeController : Controller
    {
        //Used for the Ajax binding
        public ActionResult _AjaxBinding(string text)
        {
            var northwind = new NorthwindDataContext();
            // Return all products as JSON - {Text:'ProductName', Value:'ProductID'}
            return new JsonResult { Data = new SelectList(northwind.Products.ToList(), "ProductID", "ProductName") };
        }
    
        // Renders the view initially.
        public ActionResult Index()
        {
            return View()
        }
    }
    Note
    The action method used for Ajax binding, should have a parameter of type String called text. This is the text input by the end user.
  2. Configure the combobox to use the action method created in the first step:
    CopyAjax binding configuration
    <%= Html.Telerik().ComboBox()
            .Name("Products")
            .DataBinding(dataBinding => dataBinding
                  //Ajax binding
                  .Ajax()
                       //The action method which will return JSON
                       .Select("_AjaxBinding", "Home")
            )
    %>
    Note
    Additionally you can specify the delay (in milliseconds) after which the request will be initiated:
    CopyAjax binding configuration - specifying the delay
    <%= Html.Telerik().ComboBox()
            .Name("Products")
            .DataBinding(dataBinding => dataBinding
                  //Ajax binding
                  .Ajax()
                       //Setting the delay
                       .Select("_AjaxBinding", "Home").Delay(500)
            )
    %>
    Note
    If the combobox is configured to use Ajax binding it will request the action method as soon as the arrow button is clicked or the input is focused.

WebService Binding

Telerik ComboBox for ASP.NET MVC can be bound to a web service - ASMX or WCF. The following example shows how:

  • First let's create the web service method that will return data to populate the combobox:
    CopyWebService - ASMX
    [WebService(Namespace = "http://tempuri.org/")]
    [ScriptService]
    public class ProductsAsmx : System.Web.Services.WebService
    {
        [WebMethod]
        public IEnumerable<SelectListItem> GetDropDownItems(string text)
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
    
            return new SelectList(northwind.Products.toList(), "ProductID", "ProductName");
        }
    }

    It accepts an argument of type String called text. It contains the current input value of the combobox.

    Built-in System.Web.Mvc.SelectList object is used in order to return IEnumerable<SelectListItem> collection.

  • Here is how the combobox should be configured in the view so it is bound to the web service:
    CopyWeb Service binding configuration
    <%= Html.Telerik().ComboBox()
            .Name("Products")
            .DataBinding(dataBinding => dataBinding
                 //Web Service binding
                 .WebService()
                      //Path to the web service
                      .Select("~/Models/Products.asmx/GetDropDownItems")
            )
    %>
    Note
    Additionally you can specify the delay (in milliseconds) after which request will be made:
    CopyWeb Service binding configuration - specifying the delay
    <%= Html.Telerik().ComboBox()
            .Name("Products")
            .DataBinding(dataBinding => dataBinding
                 //Web Service binding
                 .WebService()
                      //Setting the delay
                      .Select("~/Models/Products.asmx/GetDropDownItems").Delay(500)
            )
    %>

Passing Additional arguments

Sometimes the action method which provides the JSON for the combobox may need additional arguments. Here is how to pass them to your action:
CopyPassing additional arguments to the action method
<script type="text/javascript">

    function onComboBoxDataBinding(e) {
        e.data = $.extend({}, e.data, { customParam: "customValue"});
    }

</script>

See Also

Other Resources