ComboBox widget + ASP.NET DropDowList

[Rodolfo Chacon Vazquez]

Hi,

I'm not sure if this is possible, but, Can I add the KendoUI ComboBox widget to an ASP.NET DropDowList?

According to the KendoUI Documentation is possible to create a combobox from existing select HTML element:

<!-- HTML -->
<select id="combobox">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

So, if I have a ASP.NET DropDowList:

<asp:DropDownList ID="DropDownList2" class="combobox-kendo" runat="server">
    <asp:ListItem>A</asp:ListItem>
    <asp:ListItem>B</asp:ListItem>
    <asp:ListItem>C</asp:ListItem>
</asp:DropDownList>

and if in a browser is converted to:

<select name="DropDownList2" id="DropDownList2" class="combobox-kendo">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
and, according to the KendoUI documentation, I should add:


$(document).ready(function(){
     $("#combobox").kendoComboBox();
 });

Then..


<script type="text/javascript">
        $(document).ready(function () {
            $(".combobox-kendo").kendoComboBox();
        });
</script>

it should work, right?



In VST2010 when I debug the ASP.NET page, IE9 show me the next error:

Error: 'jQuery' is undefined in the kendo.all.min.js file...



Any idea what could be the problem?

[John]

It sounds like you're missing a script reference to jQuery, which is required by Kendo UI.

[Rodolfo Chacon Vazquez]

Hi John,

I have the next references, I use the default Jquery JavaScript file that came with VST2010:

<script src="KendoUI/kendo.all.min.js" type="text/javascript"></script>

<link href="KendoUI/kendo.metro.min.css" rel="stylesheet" type="text/css" />

<link href="KendoUI/kendo.common.min.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Also I used the JQuery JavaScript file that came with KendoUI:

<script src="KendoUI/kendo.all.min.js" type="text/javascript"></script>

<link href="KendoUI/kendo.metro.min.css" rel="stylesheet" type="text/css" />

<link href="KendoUI/kendo.common.min.css" rel="stylesheet" type="text/css" />

<script src="KendoUI/jquery.min.js" type="text/javascript"></script>

and I obtain the same error.

[John]

Order matters; make sure jQuery is loaded first.