使用 jQuery 更新 Kendo 下拉列表值会导致未定义的元素和空字符串值

Question

I have three kendo dropdown lists in my MVC view. Their values are set to defined Enums. The dropdownlists correctly display the values and I can change/update if I select each one individually. However, I have a button which is used to update all 3 dropdownlists values to "All" call 'setToAll' which calls a jQuery function that sets the value for each dropdownlist by name(id)

These are my enums:

public enum FilterEmailSignOffStatus
        {
            All = -1,
            NotSent = 0,
            Sent = 1

        }

        public enum FilterPdfSignOffStatus
        {
            All = -1,
            NotYetPrinted = 0,
            Printed = 1
        }

        public enum FilterCorrectionStatus
        {
            All = -1,
            NotCorrected = 0,
            Corrected = 1,
            Reprinted = 2
        }

Here is my View:

 <div class="col-md-3 ">
                            @(Html.Kendo().DropDownList()
                            .Name("printStatus")
                            .DataValueField("Text")                            
.BindTo(Enum.GetNames(typeof(SignOffSheetController.FilterPdfSignOffStatus)).ToList())

                            )
                        </div>

                        <div class="col-md-3 ">

                            @(Html.Kendo().DropDownList()
                            .Name("correctionStatus")
                            .DataValueField("Text")
.BindTo(Enum.GetNames(typeof(SignOffSheetController.FilterCorrectionStatus)).ToList())
                            )
                        </div>

                        <div class="col-md-3 ">

                            @(Html.Kendo().DropDownList()
                            .Name("emailStatus")
                            .DataValueField("Text")
.BindTo(Enum.GetNames(typeof(SignOffSheetController.FilterEmailSignOffStatus)).ToList())
                            )
                        </div>

                        <div class="col-md-3 ">
                            <button id="setAllStatus" class="btn btn-default">Set to All</button>
                        </div>

Here is my jQuery function:

$("#setAllStatus").click(function (e) {
        e.preventDefault();

        $("#printStatus").data("kendoDropDownList").value("All");
        $("#correctionStatus").kendoDropDownList().data("kendoDropDownList").value("All");
        $("#emailStatus").kendoDropDownList().data("kendoDropDownList").value("All");


    });

The dropdowns should all be updated to the "All" value, but they are instead updated to "" empty strings. Anybody able to lend an eye and advise me where I might be going wrong?

Answer 1

Managed to fix and get the button working. I removed the .DataValueField("Text") properties on each of the dropdownLists, they are all updating correctly now.

Strange thing is this used to work in a previous version of Kendo. After we updated to a newer version (2018.2.516) this problem came up. My thinking is that the DropDownLists are updated with "All" but then try to get .DataValueField and fail, thus becoming undefined ""

@(Html.Kendo().DropDownList()
  .Name("printStatus")
//.DataValueField("Text")   --- **Removed this parameter**

  .BindTo(Enum.GetNames(typeof(SignOffSheetController.FilterPdfSignOffStatus)).ToList())

                            )