populate telerik dropdown list using jquery

问题

I am having issues with populating a telerik dropdown list using jquery. I get the following Error:

'get(...).options' is null or not an object

On line:

$("#courseID").get(0).options.length = 0;

Here is my telerik dropdown list:

                <%= Html.Telerik().DropDownList()
                .Name("courseID")
                .HtmlAttributes(new{ @id="courseID"})
                %>

Here is how I am trying to populate it using jquery:

I call the populateDDL function on "StudentID" focusout event, here is the function.

function populateDDL() {

var link = '/Student/EnrollerCourse';
$.ajax({
    type: 'POST',
    url: link,
    data: { id: $('#StudentId').val() },
    dataType: 'json',
    success: function (result) {
         $("#courseID").get(0).options.length = 0;
        $("#courseID").get(0).options[0] = new Option("Select", "Select");
        $.each(result.courseID, function (item, value) {
            var courseID = value;
            $("#courseID").get(0).options[$("#courseID").get(0).options.length] = new Option(courseID);
        });          
    },
    error: function (result) {
        alert("Failed")
    }
});
}

Any help is appreciated

回答1:

Update 8/24

Sorry for the confusion. As i said - i had created a Visual C# - Web Project - of type "RadControls for Web Application". Here is a screenshot:

The modified Site.Master code looks like below:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.metro.css").Combined(true).Compress(true)) %></head>

<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <%: Html.Telerik().Menu()
                    .Name("menu")
                    .Items(menu => {
                        menu.Add().Text("Home").Action("Index", "Home");
                        menu.Add().Text("About").Action("About", "Home");
                    })
            %>
        </header>
        <section id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            <footer>
            </footer>
        </section>
    </div>
<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %></body>
</html>

Notice that i added a JQuery reference through a script tag. That was the only change i did. Rest of the code stays as is.

I have zipped up my code and uploaded to the following location :

http://sdrv.ms/T1EdBK

You can download the same and have a look at the code. You will need to set reference to Telerik.Web.Mvc.dll from you system

Hope this solves your problem

Telerik MVC Extension controls have a rich client side API. So if you have used a DropDownList - you will not be able to get the control by using the jquery syntax $("#id"). Instead you will need to use the following:

var dropDownList = $("#DropDownList").data("tDropDownList");

Here is code snippet i was able to spin up for this scenario of yours:

View:

 <%= Html.Telerik().DropDownList()
                      .Name("courseID")
                      .HtmlAttributes(new {@id="courseID" })
  %>
  <input type="button" id="btnPopulateDropdown" onclick="onDropDownListDataBinding()" value="Populate Dropdown" />

So i have a drop down list defined with a name and id attributes. I have a button which is used to mimic your out of focus scenario. Idea is that on click of the button we will fire a AJAX request and get a JSON payload. we will use the JSON payload to bind the drop down list options.

JavaAcript:

function onDropDownListDataBinding(e) {
                var dropDownList = $('#courseID').data('tDropDownList');

                //Assume that we make a AJAX call and we have the JSON payload with us 

                dropDownList.dataBind([
                                        { Text: "Select", Value: "Select"},
                                        { Text: "Product 1", Value: "1" },
                                        { Text: "Product 2", Value: "2" },
                                        { Text: "Product 3", Value: "3" },
                                        { Text: "Product 4", Value: "4" },
                                        { Text: "Product 5", Value: "5" },
                                        { Text: "Product 6", Value: "6" },
                                        { Text: "Product 7", Value: "7" },
                                        { Text: "Product 8", Value: "8" },
                                        { Text: "Product 9", Value: "9" },
                                        { Text: "Product 10", Value: "10" },
                                        { Text: "Product 11", Value: "11" },
                                        { Text: "Product 12", Value: "12" },
                                        { Text: "Product 13", Value: "13" },
                                        { Text: "Product 14", Value: "14" },
                                        { Text: "Product 15", Value: "15" },
                                        { Text: "Product 16", Value: "16" },
                                        { Text: "Product 17", Value: "17" },
                                        { Text: "Product 18", Value: "18" },
                                        { Text: "Product 19", Value: "19" },
                                        { Text: "Product 20", Value: "20" }
                                    ]);
                                        dropDownList.select(0);
            }

As you can see the first line in the function is about getting a reference to the drop down list. Then assume that you made a AJAX request and you have got the JSON payload. You use the databind method to bind the JSON data. Then i use the select method to set the first option as the selection item in the drop down list.

This scenario is showcased in our online demo application page at the following URL: http://demos.telerik.com/aspnet-mvc/combobox/clientsidebinding

Hope this answers your question.

Lohith (Tech Evangelist, Telerik India)

来源：https://stackoverflow.com/questions/12077252/populate-telerik-dropdown-list-using-jquery

标签

jquery

asp.net-mvc

telerik