This is a migrated thread and some comments may be shown as answers.

Automatically Select First Item in a DropDown

3 Answers 1039 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 21 Apr 2020, 05:22 PM

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");
    }

 

 

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 23 Apr 2020, 02:06 PM

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.
0
Simon
Top achievements
Rank 1
answered on 24 Apr 2020, 02:15 PM

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

0
Ivan Danchev
Telerik team
answered on 28 Apr 2020, 02:42 PM

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.
Tags
DropDownList
Asked by
Simon
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Simon
Top achievements
Rank 1
Share this question
or