Autoselect Cascading dropdown when only a single value.

[Jason]

See code example below....  I currently have two dropdown lists that are linked together as cascading dropdowns.  In the case where the second dropdown (that is dependant ont he first dropdown) only gets one value populated to it I would like it to be autoselected instead of making the user select the single value that gets placed in that dropdown.

However, if the second dropdown gets populated with more than one value, then I would like the placeholder text to show as it does today.

Any ideas on how to best go about achieving this?  FYI, this is currently set up so that the second dropdown list is disabled until a value is selected from the first.  I figured this out but can't figure out the autoselecting of the second dropdown if only one value.

Thanks,
Jason





<!-- START ACTIVITY TYPE -->
<div class="span3">
    <span class="activity-label">Activity Type</span>
    <div class="row-fluid">
        @(Html.Kendo().DropDownList()
            .Name(String.Format("MCActivityTypeId{0}", i))
            .OptionLabel("Select Activity Type...")
            .HtmlAttributes(new { @class = "span12 case_mc_activityTypeId" })
            .DataValueField("WorkflowQueueActivityMapId")
            .DataTextField("ActivityName")
            .DataSource(ds =>
            {
                ds.Read(r => r.Action("ActivityTypeData", "Workdriver", new { Id = act.WorkflowQueueId }));
            }
            )
            .Enable(showChargeIntegrityEditAddNew && act.IsDataEntry)
        )
    </div>
</div>
<!-- END ACTIVITY TYPE -->

<!-- START ACTIVITY STATUS -->
<div class="span3">
    <span class="activity-label">Activity Status</span>
    <div class="row-fluid">
        @(Html.Kendo().DropDownList()
            .Name(String.Format("MCActivityStatus{0}", i))
            .OptionLabel("Select Activity Status...")
            .HtmlAttributes(new { @class = "span12 case_mc_activityStatusId" })
            .DataValueField("WorkflowQueueActivityStatusMapId")
            .DataTextField("ActivityStatusName")
            .DataSource(ds =>
            {
                ds.Read(r =>
                {
                    r.Action("ActivityStatusData", "Workdriver")
                        .Data(@<text>function() { return { id: $('#MCActivityTypeId@(i)').val() }; }</text>);
                }).ServerFiltering(true);
            }
            )
            .Enable(false)
            .AutoBind(false)
            .CascadeFrom(String.Format("MCActivityTypeId{0}", i))
        )
    </div>
</div>
<!-- END ACTIVITY STATUS -->

[Dimiter Madjarov]

Hi Jason,


To achieve this you could bind to the dataBound event of the second DropDownList, check if it contains only one item and set it as a value.
E.g.

function dataBound(e) {
    var data = this.dataSource.data();
    if (data.length === 1) {
        var item = data[0];
        var valueField = this.options.dataValueField;
        this.value(item[valueField]);
        this.trigger("change");
    }
}

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik

[Sean]

Hi Dimiter,
     Should the above solution also work with DropDownListFor() ?

I am finding that the value is correctly set by the code snippet, but is then changed back to index 0 during initialisation.

I have tried both your example, and also:

var ds = this.dataSource.data();
if (ds.length === 1) {
    this.select(1);
    this.trigger('change');
}

Both of which showed the same behaviour.

My DropDownLists are declared as below:

<div class="editor-field">
    @(Html.Kendo().DropDownListFor(x => x.IdDeliveryMethod)
            .OptionLabel("Select Method...")
            .DataTextField("TextValue")
            .DataValueField("Id")
            .BindTo((System.Collections.IEnumerable)ViewBag.DMethods)
            .Events(e => e.Change("dnc.deliveryMethodChange"))
            )
    @Html.ValidationMessageFor(x => x.IdDeliveryMethod)
</div>
<div class="editor-label">
    @Html.LabelFor(x => x.IdDeliveryService)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(x => x.IdDeliveryService)
            .OptionLabel("Select Service...")
            .DataTextField("TextValue")
            .DataValueField("Id")
            .AutoBind(false)
            .CascadeFrom("IdDeliveryMethod")
            .DataSource(d => d.Read(r => r.Action("GetCascadeService","Home").Data("dnc.getMethodId")).ServerFiltering(true))
            .Events(e =>
                {
                    e.DataBound("dnc.deliveryServiceDataBound");
                    e.Change("dnc.refreshDeliveryCost");
                })
            )
</div>

Regards

Sean

[Dimiter Madjarov]

Hi Sean,


I managed to reproduce the mentioned behavior too. As a solution you could wrap the code snippet in a timeout.
E.g.

function dataBound(e) {
    if (this.dataSource.data().length == 1) {
        var that = this;
        setTimeout(function () {
            that.select(1);
            that.trigger("change");
        });
    }
}

Regards,
Dimiter Madjarov
Telerik

[Jason]

This solution seems to have broke in the newest version of Kendo UI (jan 2014 version).  Any suggestions?

[Dimiter Madjarov]

Hi Jason,


Could you please share an example to demonstrate the issue on your side?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik