setting value of second drop down

4 Answers 51 Views
DropDownList Form
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
David Ocasio asked on 12 Apr 2022, 04:13 PM

I have a kendo form with two drop down list editors.

How can I from Javascript set the selected value of one of the drop downs.

Both drop downs are using server side filtering .

There is a possibility that the value i need to set is not in the already pulled data , but it is guaranteed to be in the full datasource.

Any direction would be appreciated.


    @(Html.Kendo().Form<KitMasterViewModel>()
        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidationKitMaster", "KitsOverview"), method = "POST" })
        .FormData(Model)
        .Layout("grid")

        .Grid( c => c.Cols(2).Gutter(4))
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(false));
        })
        .Items(items =>
        {
            items.AddGroup()
                .Label("Kit Information")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.SeqKit)
                        .Label(l => l.Text("Kit Number:"));
                    i.Add()
                        .Field(f => f.DateSchedule)
                        .Label(l => l.Text("Date Required"));

                    i.Add()
                        .Field(f => f.KitQty)
                        .Editor(E =>
                        {
                            E.NumericTextBox<int>()
                                .HtmlAttributes(new {style = "text-align:right" })
                                .Format("N0");
                        })
                        .Label(l => l.Text("Kit Quantity:"));

                    i.Add()
                        .Field(f => f.PickOrder)
                        .Label(l => l.Text("Pick Order:"))
                        .Editor(E => {
                            E.DropDownList()
                                .DataTextField("Text")
                                .DataValueField("Value")
                                .BindTo(new List<SelectListItem>()
                                {
                                                 new SelectListItem()
                                                 {
                                                     Text="Lowest Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.LowestQty}",
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="FIFO Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.FIFO}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Match Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.ClosestMatch}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Custom Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.Custom}"
                                                 },
                                });
                        });



                    i.Add()
                        .Field(f => f.ID)
                        .Label(" ")
                        .EditorTemplate("<input name='ID' type='hidden' />");
                });

            items.AddGroup()
                .Label("Source")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.IDBom)
                        .Label("Assigned Bill of Material")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .DataValueField("IDBom")
                                .DataTextField("LongName")
                                .HtmlAttributes(new { style = "width:100%"})
                                .Filter("contains")
                                .Events(item => item.Change("BillChanged"))
                                .MinLength(3)
                                .Height(520)

                                .Template("<table><tr><td style='width:200px' >#: data.PartNumber #</td><td style='width:50px'>#: data.Revision #</td></tr></table>")

                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax")
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetBOMMasters", "BillOfMaterial");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });
                                    }
                                );


                        });


                    i.Add()
                        .Field(f => f.IDAVL)
                        .Label("Assigned Constraint")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .Name("ddlAVL")
                                .HtmlAttributes(new { })
                                .DataTextField("NameAVL")
                                .DataValueField("IDAVL")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Height(520)
                                .MinLength(3)
                                .Filter(FilterType.Contains)
                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetAVLMasters", "BOMEdit");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });

                                    }
                                );


                        });
                });

        })
        )


<script type="text/javascript">
    $(document).ready(function () {
        $("input[type='text'], textarea").attr('spellcheck', false);
    });

    function BillChanged(e) {
        var ddl = e.sender; 
        var selectedValue = ddl.value(); 

        $.ajax({
            url: "@Url.Action("GetBOMMasters", "BillOfMaterial",new { id = UrlParameter.Optional, operation = UrlParameter.Optional })" + "/" + selectedValue,
            type: 'POST',
            contentType: 'application/json;',
            data: JSON.stringify({ id: selectedValue }),
            success: function (bom) {
                if (bom.Data.length>0) {
                    var idAVL = bom.Data[0].IDAVL;

                    // I need to set the value of ddlAVL to idAVL here
                    // but i am at a loss to how to do it

                    debugger;
                }
            }
        });
    }

    function NavigateComponents() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new {id=Model.ID, operation = "components"})";
    }

    function NavigateKitInfo() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new { id = Model.ID, operation = "info"})";
    }

    function NavigateOverview() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview", new { id = UrlParameter.Optional, operation = UrlParameter.Optional})";
    }

</script>

4 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 15 Apr 2022, 08:41 AM

Hello David,

 

Thank you for writing to us.

Generally, we provided cascading dropdownlist implementation using the .CascadeFrom() property and this scenario also uses .ServerFiltering() as you can see in this live sample:
https://demos.telerik.com/aspnet-mvc/dropdownlist/cascadingdropdownlist

As for the specific question, I have prepared a live sample to demonstrate how you can achieve this requirement:
https://dojo.telerik.com/usetiJiW/4

Feel free to check it and let me know if it helps you.

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 18 Apr 2022, 02:55 PM

Eyup,

I tried to incorporate the reference you provided in your supplied code.

But it is coming up as undefined.

I am using the mvc wrappers not sure if that is the issue (see original provided code).

var ddl = $(".k-form-field-wrap .k-dropdownlist input").last().data().kendoDropDownList;

I have enclosed a snapshot of the error as well in the debugger.

thanks

Dave

 

Eyup
Telerik team
commented on 21 Apr 2022, 11:45 AM

Hi Dave,

For older versions you can use this class name:

var ddl = $(".k-form-field-wrap .k-dropdown input").last().data().kendoDropDownList;
Here is an updated working version of the sample:
https://dojo.telerik.com/usetiJiW/8

0
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 21 Apr 2022, 12:55 PM

Eyup that worked.

thanks

0
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 21 Apr 2022, 01:10 PM

Just a follow-up question.

I checked and i am using a fairly new version 2022.1.301

When you say "older versions" is that because the kendo version used in the MVC distro is a little older.

I just want to make sure i do not have something misconfigured and am using the latest available.

thanks

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
    @Scripts.Render("~/bundles/jquery")
    <link href="@Url.Content("~/Content/kendo/2022.1.301/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2022.1.301/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    @*<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">*@
    <script src="@Url.Content("~/Scripts/kendo/2022.1.301/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2022.1.301/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2022.1.301/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2022.1.301/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

 

Eyup
Telerik team
commented on 26 Apr 2022, 05:56 AM

Hi David,

I am glad the solution has proven helpful.

As for the Kendo version, it would be best if you open the page and check the version in the browser console:

Tags
DropDownList Form
Asked by
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Eyup
Telerik team
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or