Select default item from the dropdownlist if Item count is 1

[Amol]

Hi,

I have a cascading dropdownlist,  and if the Item count for the dropdown getting populated is 1 I want to keep the item it default selected instead of showing OptionLabel and the item. Or else remove the Option label in that case. below of the my dropdown which gets populated on change of dropdown 'DeliveryDestinationID'. How do i do this.

@(Html.Kendo().DropDownList()
                                      .Name("DeliveryNameID")
                                      .HtmlAttributes(new { style = "width:235px" })
                                      .OptionLabel("Select Delivery Name...")
                                      
                                      .DataTextField("Text")
                                      .DataValueField("Value")
                                     .DataSource(source =>
                                      {
                                          source.Read(read =>
                                          {
                                              read.Action("GetDeliveryNames", "DeliveryQueue")
                                                  .Data("filterAsPerServiceProvider");
                                          })
                                          .ServerFiltering(true);
                                      })
                                      .Enable(false)
                                      .AutoBind(false)
                                      .CascadeFrom("DeliveryDestinationID")
                                    )

[Dimiter Madjarov]

Hello Amol,


This is a quote from my answer in the support thread:

---

To achieve this you could bind to the dataBound event of the DropDownList and check the length of the dataSource data. If there is only one item, you could select it.
E.g.

.Events(e => e.DataBound("dataBound"))

function dataBound(e) {
    var ds = this.dataSource.data();
    if (ds.length == 1) {
        this.select(1);
    }
}

---

Please post your questions only once, so we could provide you the best possible assistance. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Luiz]

Or you could simply do:

if (this.dataSource.total() > 0)
    this.select(0);

 

[Magendran]

Hi, 

How to achieve the same in Kendo with Angular?

[Neli]

Hello Magendran,

If you need to achieve the same behavior in AngularJS scenario, you could use similar approach to the one described in the previous replies. BElow is an example:

 dataBound: function(e) {            
            var ds = e.sender.dataSource.view();
            if (ds.length == 1) {
                   this.select(1);
            }
}

Here is a Dojo example with cascading DropDownLists in AngularJS scenario where the above is implemented.

However, if you need help in achieving the same result in Angular 2+ environment please note, that the Kendo UI for jQuery widgets are not officially supported in the Angular 2+ environment. You could read more in the article linked below:

- https://docs.telerik.com/kendo-ui/third-party/angular2

I would recommend asking on the Kendo UI for Angular forums: https://www.telerik.com/forums/kendo-angular-ui. This way you could get some suggestions and possible workarounds from community members that have faced similar scenarios.

I hope you will find the provided information helpful.

Regards,
Neli
Progress Telerik