How to allow blank selection with kendoDropDownList

[Patrick Rioux]

Hi,

How can I allow blank selection in a kendoDropDownList?
There is an example with the combobox but wants to add this behavior within the kendoDropDownList.

[Georgi Krustev]

Hello Patrick,

 
Check the optionLabel functionality.

Regards,
Georgi Krustev
the Telerik team

[Patrick Rioux]

The optionLabel is working great if you put a text in there.
But if you want to have a blank selection, how do you proceed?
The use could select something or put back a blank value.
Also, if I press the Delete key, it doesn't always put back the optionLabel selection. I experience this behavior in 2012.1.229.beta.

[Georgi Krustev]

Hello Patrick,

 
Thank you for getting back to us. By design the value of the optionLabel is a blank text and we do not create it if the value of the option is an empty text. If you need to add optionLabel without a text then you should set the option to " ":

$("#ddl").kendoDropDownList({
    optionLabel: " "
});

Kind regards,
Georgi Krustev
the Telerik team

[Patrick Rioux]

This is partially working. By leaving the optionLabel to blank, it add a very small area on the top but the height is definitely not like the other. I think if you told how to send the height it will work. See attached file.

[Georgi Krustev]

Hello Patrick,

In order to avoid this behavior you will need to modify the content of the first LI element:

$("#ddl").data("kendoDropDownList").one("open", function() {
            $(this.ul[0].firstChild).html(" ");
});

Check the attached html file.

Greetings,
Georgi Krustev
the Telerik team

[Patrick Rioux]

Sorry but this produced the same behavior. Since I passed blank, I end up with the wrong height. Just need to fix the height of the row and I think it will works but not sure how to do this.

[Georgi Krustev]

Hello Patrick,

 
I was not able to observe the erroneous behavior locally. I make a screencast, which shows by observation. Let me know if I am missing something.

All the best,
Georgi Krustev
the Telerik team

[Vadivel]

how to do cascading dropdown list using local data in grid view, doen't use server file, please help any one

[Brad Falk]

This seems a little crazy to have to write extra javascript to handle this. Are there any plans to be able to configure a DropDownList with a blank option out of the box? This is a common scenario that should be much easier to do.

[Georgi Krustev]

Hello Brad,

 
In general the DropDownList widget is not designed to show empty OptionLabel. Nevertheless you can achieve your goal using custom template:

template: "#= data.name.replace(' ', ' ') #"

Thus you can avoid wiring the open event. If other users needs such functionality we will try to improve current behavior.

Kind regards,
Georgi Krustev
the Telerik team

[Warren]

I'm another user that is requesting this functionality.  I am very surprised this control has this behavior, as it changes the standard behavior of the html SELECT control that this control is replacing. 

In regards to the workaround, has anyone gotten this to work?  I haven't tried the script approach as it appears from the thread this did not work, however the template approach also does not appear to work, simply returning this error:
"Uncaught TypeError: Cannot call method 'replace' of undefined"

Any help would be much appreciated!

[Chad]

Yes, I too would like this. I like to use the ddl as a filter for the Kendo Grid...but I need the default selection to be an empty value option, so the grid is not filtered at all. Otherwise I have to code around it on the server side.

[admin]

This link is broken

[Ivan Danchev]

Hi,

The link seems valid at my end: screenshot.

Regards,
Ivan Danchev
Progress Telerik

[admin]

I was replying to the post with the kendo documentation link about optionLabel, your forum put my reply at the bottom, under your post. This is the link I was trying to open.

http://www.kendoui.com/documentation/ui-widgets/dropdownlist/configuration.aspx#optionLabel

Is redirected to this link below which is the main Kendo-ui product description. Even though I am currently logged into the Telerik site with an account with an active subscription.

https://www.telerik.com/kendo-ui?utm_expid=.QZlGnZzwQVuthJ0mrhuF3A.0&utm_referrer=#optionLabel

The correct kendo-ui OptionLabel api link is here.

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-optionLabel

Its not just this forum post, I have clicked on many broken documentation links in your forum over the last few months.

[Ivan Danchev]

Hi,

Thank you for the clarification. Indeed old links to kendoui.com are currently redirected to telerik.com. I notified the team about the redirects and suggested changing them to corresponding pages from the Kendo UI Documentation site.

Regards,
Ivan Danchev
Progress Telerik

[Georgi Krustev]

Hi guys,

 
Here is a simple jsFiddle demo, which shows how to achieve your goal just using custom template.

Kind regards,
Georgi Krustev
the Telerik team

[Jim]

I've tried the various options mentioned above with no success.  Since this is intended to replace a standard HTML <select> tag, can you please replicate the standard HTML behavior as soon as possible?  In the meantime, what do we do with the large number of dropdowns in our application that have a null or blank option? 

Code follows.

Jim Stanley
Blackboard Connect

        <div class="formField contactGender contactInfoContainer">
            @Html.LabelFor(model => model.Gender)
            @(Html.Kendo().DropDownListFor(model => model.Gender)
                .BindTo(new SelectList(Model.Genders, "key", "value"))
                .HtmlAttributes(new { @class = "dropDownList" })
                .Enable(!Model.ViewOnly)
                .DataTextField("Text")
                .DataValueField("Value")
                .OptionLabel("&nbsp;")
                .Template("#= data.Text #")
                )
            @Html.ValidationMessageFor(model => model.Gender)
        </div>

[Georgi Krustev]

Hello Jim,

Could you elaborate more on "can you please replicate the standard HTML behavior" ? For now you will need to define the aforementioned template, which will allow you to define an empty item in the widget.

Regards,
Georgi Krustev
Telerik

[Sean]

Can you please update the JSFiddle example to a working base? Current one doesn't run. I'm in the same boat, looking for normal functionality. Thanks.

[Georgi Krustev]

Hi guys,

 
Here is the updated jsFiddle demo. You can specify an empty option without setting a specific template.
Note that it uses the Q3 2013 BETA bits.

Regards,
Georgi Krustev
Telerik

[A]

Hi,

Why can't you simply specify optionLabel: "&nbsp;" ? This way you don't need to mess around with templates where you have to mention data text field again

Artem

[Jim]

It's a hack, but I was able to force the height of the dropdown using CSS and it stretches the box to normal size in case of an empty element:

div.contactInfoContainer > .k-dropdown
{
    display: block;
    height:25px;
}

[Jay]

Just in case someone stumbles across this thread because they're still using a years-old version of kendo, when specifying OptionLabel(" ") with the MVC helper, the CSS approach worked for us via:

#id-list > .k-list > .k-item
{
    display: block;
    height: 25px;
}

until one of the drop down lists included items with hyphens in them, which caused them to be listed (and selectable) on separated lines (e.g. Semi-Annually was displayed as Semi- on one line and Annually on the next, both individually selectable). First tried changing the display as in

#id-list > .k-list > .k-item
{
    display: table-row;
    height: 25px;
}

which got them to display properly, but in IE and chrome, the blank item was no longer selectable. So instead of CSS for that drop down, had to go with the javascript option instead:

$(document).ready(function () {
    setTimeout(function () {
        var ddl = $("#id").data("kendoDropDownList");
        $(ddl.ul[0].firstChild).html(" ");
    }, 10);
});

Hope this helps someone.

[Marin Bratanov]

Thank you for sharing your experience and solution, Jay, I hope it helpes someone :)
You'll also find your Telerik points updated for your contribution.
--Marin