How to allow blank selection with kendoDropDownList

5 Answers 9983 Views
DropDownList
Patrick Rioux
Top achievements
Rank 1
Patrick Rioux asked on 28 Mar 2012, 07:02 PM
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.

5 Answers, 1 is accepted

Sort by
1
Georgi Krustev
Telerik team
answered on 29 Mar 2012, 01:22 PM
Hello Patrick,

 
Check the optionLabel functionality.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Patrick Rioux
Top achievements
Rank 1
commented on 29 Mar 2012, 02:54 PM

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
Telerik team
commented on 02 Apr 2012, 03:55 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Patrick Rioux
Top achievements
Rank 1
commented on 02 Apr 2012, 06:51 PM

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
Telerik team
commented on 03 Apr 2012, 05:12 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Patrick Rioux
Top achievements
Rank 1
commented on 04 Apr 2012, 01:51 PM

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
Telerik team
commented on 10 Apr 2012, 08:00 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Vadivel
Top achievements
Rank 1
commented on 20 Apr 2012, 06:32 AM

how to do cascading dropdown list using local data in grid view, doen't use server file, please help any one
Brad Falk
Top achievements
Rank 1
commented on 09 Oct 2012, 03:30 PM

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
Telerik team
commented on 10 Oct 2012, 08:42 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Warren
Top achievements
Rank 1
commented on 25 Oct 2012, 08:48 PM

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
Top achievements
Rank 1
commented on 10 Dec 2012, 04:44 AM

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
Top achievements
Rank 1
commented on 15 Nov 2017, 06:41 AM

This link is broken
Ivan Danchev
Telerik team
commented on 17 Nov 2017, 03:00 PM

Hi,

The link seems valid at my end: screenshot.

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
admin
Top achievements
Rank 1
commented on 20 Nov 2017, 12:07 AM

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
Telerik team
commented on 21 Nov 2017, 04:10 PM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Georgi Krustev
Telerik team
answered on 10 Dec 2012, 03:26 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Jim
Top achievements
Rank 1
commented on 15 Oct 2013, 11:15 PM

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
Telerik team
commented on 21 Oct 2013, 09:30 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Sean
Top achievements
Rank 1
commented on 31 Oct 2013, 06:51 AM

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
Telerik team
commented on 31 Oct 2013, 09:30 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
A
Top achievements
Rank 1
answered on 20 Jun 2013, 07:40 AM
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
0
Jim
Top achievements
Rank 1
answered on 17 Oct 2013, 09:42 PM
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;
}
0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 15 Nov 2018, 03:58 PM

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("&nbsp;");
    }, 10);
});

Hope this helps someone.

Marin Bratanov
Telerik team
commented on 19 Nov 2018, 02:03 PM

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
Tags
DropDownList
Asked by
Patrick Rioux
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
A
Top achievements
Rank 1
Jim
Top achievements
Rank 1
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or