CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvc
ihatemash
ihatemash

Reputation: 1494

Can't set KendoDropDownList window size

I'm trying to set the width of the drop-down window for a KendoDropDownList. using the following code:

<input id="dropdownlist" name="SelectedServiceLine"/>

<script>
    $(function() {
        var mdl = @Html.Raw(Json.Encode(Model.ServiceLines));
        var ddl = $("#dropdownlist").kendoDropDownList({
            dataSource: mdl,
            name: "SelectedServiceLine",
            dataTextField: "Description",
            dataValueField: "Description"
        });
        var dropdownlist = $("#dropdownlist");
        var kendoDDL = dropdownlist.data("kendoDropDownList");
        kendoDDL.list.width(400);
    });
</script>

the drop-down list shows and is a KendoDropDownList. So I know the call var ddl = $("#dropdownlist").kendoDropDownList() is working. However, i get an exception when calling kendoDDL.list.width(400).

0x800a138f - JavaScript runtime error: Unable to get property 'list' of undefined or null reference

the call var dropdownlist = $("#dropdownlist") returns an object. So the element "dropdownlist" does exist. But the call to dropdownlist.data("kendoDropDownList") is undefined. I'm not sure where to go from here to find the issue. Obviously kendo is defined because the KendoDropDownList is getting rendered correctly. But for some reason I can't select the element and set the list's width property.

Upvotes: 0

Views: 138

Answers (2)

ihatemash
ihatemash

Reputation: 1494

The problem was, I was setting the "Name" property on the KendoDropDownList. However, "Name" is not a valid property. It should be this instead:

    var ddl = $("#dropdownlist").kendoDropDownList({
        dataSource: mdl,            
        dataTextField: "Description",
        dataValueField: "Description"
    });

Upvotes: 1

Rick S
Rick S

Reputation: 6586

I would set the width like this. It will automatically size the width to the largest item in the list.

$("#dropdownlist").data("kendoDropDownList").list.width("auto");

Update: You can also try this:

var ddl = $("#dropdownlist").css("width", "400px").kendoDropDownList({ ...

Upvotes: 1

Related Questions