Unable to populate telerik dropdown list using jquery
Question
I am trying to populate a Telerk Drop-Down List using jquery. Here is how I was suggested to do this:
var dropDownList = $('#DropDownList').data('tDropDownList');
var dataSource =
[
{ Text: "Product 1", Value: "1" },
{ Text: "Product 2", Value: "2" },
{ Text: "Product 3", Value: "3" }
];
dropDownList.dataBind(dataSource);
Here, I need the following JavaScript files to make this to work:
- jquery-1.7.1.min.js
- telerik.common.min.js
- telerik.list.min.js
And I registered them in my Site.Master with other CSS and JS files:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/telerik.common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/Students.js"></script>
<script type="text/javascript" src="/Scripts/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/telerik.list.min.js"></script>
<script type="text/javascript" src="/Scripts/telerik.combobox.min.js"></script>
</head>
And then at the end in Site.Master I use the ScriptRegistrar:
<%= Html.Telerik().ScriptRegistrar() %>
But, When I run the app I get the following "undefined" error:
'undefined' is null or not an object
on line:
dropDownList.dataBind(dataSource);
Here is my DDL:
<%= Html.Telerik().DropDownList()
.Name("DropDownList")
.HtmlAttributes(new {@id = "DropDownList"})
.Items(items => {
items.Add().Text("Select").Value("Select");
})
%>
Am I missing some step here? Do I need to register the java script files on the page where I have the DDL as well? "site.master" is the "MasterPageFile" where I have already registered JS files.
Any help is appreciated.
3 answers
solution1
0 2012-08-23 17:30:57
Try to remove ther others versions of the jquery and leaves only the jquery-1.7.1.min.js and register it first. Hope this helps!
solution2
0 2012-08-23 19:17:29
You should run your binding code after Telerik DropDown component gets loaded (initialized). One way to do it by declaring OnLoad event handler:
.ClientEvents(events => events.OnLoad("List_OnLoad"))
function List_OnLoad(){
var dropDownList = $(this).data('tDropDownList');
// the same as
//var dropDownList = $('#DropDownList').data('tDropDownList');
dropDownList.dataBind(dataSource);
}
solution3
0 2012-09-07 21:43:48
Put another ScriptRegistrar in your page and put your code inside the OnDocumentReady method. This will register your function with the ScriptRegistrar within your site.master ScriptRegistrar and everything should work correctly since the control will have been initialized at this point. Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.