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
        }
    });

使用按钮点击

1 个答案: