javascript - Kendo UI 下拉菜单通过单击按钮上的参数进行更新

Question

我正在尝试在按下按钮时以编程方式更新 Kendo UI 下拉列表。

主下拉列表:

@(Html.Kendo().DropDownList()
          .Name(LayoutTemplate")
          .OptionLabel("Templates")
          .DataTextField("Text")
          .DataValueField("Value")
          .DataSource(source =>
          {
          source.Read(read =>
               {
                 read.Action("GetLayoutTemplatesDropdown", LayoutTemplate");
               });
           }))
           <button class="loadLayout" type="button">Load</button>

第二个下拉列表:

@(Html.Kendo().DropDownList()
        .Name("CreateTemplateCSS")
        .OptionLabel("Choose one")
        .DataTextField("Text")
        .DataValueField("Value")
        .Template("<span class=\"glyphicon glyphicon-font\"></span> #:data.Text#")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetTemplateCSSTemplatesDropdown", "TemplateCSSTemplate")
                .Data("filterTemplateCSSTemplates"); 
            });
        })
        )

Javascript

    function filterTemplateCSSTemplates() {
        return {
            layoutTemplateID: $("#LayoutTemplate").val()
        };
    }

 $(".loadLayout").on("click", function (e) {

         var layoutTemplateID = $("#LayoutTemplate").val();

         if (layoutTemplateID) {   
              $("#CreateTemplateCSS").data("kendoDropDownList").refresh();
         }                    
    });

目标是:

单击 $(".loadLayout") 时，使用“layoutTemplateID”参数刷新“CreateTemplateCSS”。

如何调整它以使其正常工作？

Answer 1

如果您尝试刷新下拉列表的数据源，则应该执行 $("#CreateTemplateCSS").data("kendoDropDownList").dataSource.read();

如果您尝试完全更改数据源，那么在您的点击功能中，您应该创建一个新的数据源，然后使用

在 JavaScript 中更新您的下拉列表

    $("#CreateTemplateCSS").kendoDropDownList({
        dataTextField: "Text",
        dataValueField: "Value",
        valuePrimitive: true,
        optionLabel: "Templates",
        value: layoutTemplateID,
        dataSource: {
            data: yourDataSource
        }
    });