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

Autoselect Cascading dropdown when only a single value.

5 Answers 176 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 10 Dec 2013, 04:23 PM
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 -->

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 12 Dec 2013, 08:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sean
Top achievements
Rank 2
answered on 13 Jan 2014, 10:26 AM
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
0
Dimiter Madjarov
Telerik team
answered on 14 Jan 2014, 09:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jason
Top achievements
Rank 1
answered on 13 Feb 2014, 05:43 PM
This solution seems to have broke in the newest version of Kendo UI (jan 2014 version).  Any suggestions?
0
Dimiter Madjarov
Telerik team
answered on 14 Feb 2014, 09:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Jason
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Sean
Top achievements
Rank 2
Jason
Top achievements
Rank 1
Share this question
or