Automatically Select First Item in a DropDown

4 posts, 0 answers
  1. Simon
    Simon avatar
    6 posts
    Member since:
    Apr 2020

    Posted 21 Apr Link to this post

    I have a Dialog with 4 fields, the first 3 are cascading dropdowns and the 4th is a free entry field

    If the user selects an item from the first  dropdown, the next two dropdowns are populating and showing values but if the user clicks straight to the 4th field, then nothing has been selected these two fields. In this case I want the 1st item in the 2nd and  3rd dropdowns to be selected automatically 

    Here's the code for the 2nd field where I've been playing around unsuccessfully with the dataBound and  'this.select' lines following suggestions on this forums but the 'this' doesn't appear to be populated

        function cascadeComponentDropDownEditor(container, options) {
            $('<input id="componentDDL" disabled data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .svDropDownList({
                    autoBind: false,
                    dataTextField: "Name",
                    dataValueField: "Id",
                    select: onComponentSelect,
                    dataSource: {
                        type: "json",
                        transport: {
                            read: componentDropdownUrl
                        }
                    },
                    dataBound: function() {
                    if (this.dataSource.total() > 0)
                        this.select(0);
                    }
                }).data("svDropDownList");
        }

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1993 posts

    Posted 23 Apr Link to this post

    Hi Simon,

    Here's a dojo example, which shows how 2 cascading DropDownLists values can be set when an input is focused: https://dojo.telerik.com/ErUweCOn/4

    Note that in this scenario the select() method that allows selection of an item by its index cannot be used, since the DropDownLists are not yet bound with data at the moment of calling this logic, so the value() method is used instead. This means you must know the first items values, in order to select them, e.g.:

    ...
    products.value("1");
    ...
    orders.value("10285");
    ...
    
    

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Simon
    Simon avatar
    6 posts
    Member since:
    Apr 2020

    Posted 24 Apr in reply to Ivan Danchev Link to this post

    Ivan

    Thanks, using the value to select the first item is not possible because we don't know what the value would be. It depends on what is selected in the previous dropdown and that can have up to about 100 items, each could have a different first value in the second dropdown.

    However using text such "Select  Component..." in the 'optionLabel:' parameter, as in your example, is actually a much neater solution than trying to select the first item, because it forces the user to select something.  So that's what I've used

    Simon

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1993 posts

    Posted 28 Apr Link to this post

    Simon,

    Glad to hear you've decided to go with the optionLabel. As for using selecting the items by index in this scenario, I was able to come up with a workaround that involves using two variables and the dataBound event handlers of the DropDownLists: https://dojo.telerik.com/udesIRIv/3

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top