Automatically Select First Item in a DropDown

[Simon]

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

 

 

[Ivan Danchev]

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

[Simon]

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

[Ivan Danchev]

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