Autoselect Cascading dropdown when only a single value.

6 posts, 0 answers
  1. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 10 Dec 2013 Link to this post

    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 -->
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 12 Dec 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Sean
    Sean avatar
    1 posts
    Member since:
    Jul 2013

    Posted 13 Jan 2014 Link to this post

    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
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 14 Jan 2014 Link to this post

    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!
  6. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 13 Feb 2014 in reply to Dimiter Madjarov Link to this post

    This solution seems to have broke in the newest version of Kendo UI (jan 2014 version).  Any suggestions?
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 14 Feb 2014 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready