How to allow blank selection with kendoDropDownList

24 posts, 0 answers
  1. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 28 Mar 2012 Link to this post

    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.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 29 Mar 2012 Link to this post

    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!
  3. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 29 Mar 2012 Link to this post

    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.
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 02 Apr 2012 Link to this post

    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!
  5. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 02 Apr 2012 Link to this post

    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.
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 03 Apr 2012 Link to this post

    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!
  7. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 04 Apr 2012 Link to this post

    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.
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 10 Apr 2012 Link to this post

    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!
  9. Vadivel
    Vadivel avatar
    10 posts
    Member since:
    Apr 2012

    Posted 20 Apr 2012 Link to this post

    how to do cascading dropdown list using local data in grid view, doen't use server file, please help any one
  10. Brad Falk
    Brad Falk avatar
    2 posts
    Member since:
    Dec 2009

    Posted 09 Oct 2012 Link to this post

    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.
  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 10 Oct 2012 Link to this post

    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!
  12. Warren
    Warren avatar
    2 posts
    Member since:
    Apr 2012

    Posted 25 Oct 2012 Link to this post

    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!
  13. Chad
    Chad avatar
    29 posts
    Member since:
    Nov 2012

    Posted 09 Dec 2012 Link to this post

    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.
  14. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 10 Dec 2012 Link to this post

    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!
  15. A
    A avatar
    1 posts
    Member since:
    Apr 2011

    Posted 20 Jun 2013 Link to this post

    Hi,

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

    Artem
  16. Jim
    Jim avatar
    7 posts
    Member since:
    Mar 2011

    Posted 15 Oct 2013 Link to this post

    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>

  17. Jim
    Jim avatar
    7 posts
    Member since:
    Mar 2011

    Posted 17 Oct 2013 Link to this post

    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;
    }
  18. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 21 Oct 2013 Link to this post

    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!
  19. Sean
    Sean avatar
    15 posts
    Member since:
    Sep 2013

    Posted 31 Oct 2013 Link to this post

    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.
  20. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3741 posts

    Posted 31 Oct 2013 Link to this post

    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!
  21. admin
    admin avatar
    5 posts
    Member since:
    Sep 2017

    Posted 15 Nov 2017 in reply to Georgi Krustev Link to this post

    This link is broken
  22. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1420 posts

    Posted 17 Nov 2017 Link to this post

    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.
  23. admin
    admin avatar
    5 posts
    Member since:
    Sep 2017

    Posted 19 Nov 2017 in reply to Ivan Danchev Link to this post

    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.

  24. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1420 posts

    Posted 21 Nov 2017 Link to this post

    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.
Back to Top