Question

我有一个使用列表视图的编辑模板，并且想要一个从远程源填充的下拉列表。但下拉列表只显示加载图标。

这是DropDownList数据源。

var dsTitles = new kendo.data.DataSource({
    transport: {
        read: "../data/options/",
        dataType: "json"
    },
    serverFiltering: true,
    filter: [{
        field: "category_opt",
        operator: "eq",
        value: "title"
    }]
});

这就是我在编辑模板中的内容

<input name="title_clt"
       data-bind="value:title_clt"
       data-value-field="value_opt"
       data-text-field="label_opt"
       data-source="dsTitles"
       data-role="dropdownlist"
       required
       validationMessage="Required" />

任何帮助都会很棒。

Answer 1

您的代码基本上很好但有一些您可能错过的问题。

由于您定义的数据源是data-source="dsTitles"作为HTML的一部分，因此关于如何定义事物的顺序非常重要。

首先定义的是HTML。这意味着dsTitle应该是全球性的。然后，在处理input之后，您应该致电kendo.init。

所以，它应该是这样的：

<html>
<head>
    <meta charset="UTF-8"/>
    <title>OnaBai - KendoUI DrowDownList</title>
    <!-- Kendo UI Web styles-->
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>

    <!-- Kendo UI Web scripts-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>

    <!-- Web Page styling -->
    <style type="text/css">
    </style>

    <script type="text/javascript">
        var dsTitles = new kendo.data.DataSource({
            transport: {
                read: "../data/options/",
                dataType: "json"
            },
            serverFiltering: true,
            filter: [{
                field: "category_opt",
                operator: "eq",
                value: "title"
            }]
        });

        $(document).ready(function () {
            kendo.init("input");
        });
    </script>
</head>
<body>
<input name="title_clt"
       data-bind="value:title_clt"
       data-value-field="value_opt"
       data-text-field="label_opt"
       data-source="dsTitles"
       data-role="dropdownlist"
       required
       validationMessage="Required" />
</body>
</html>

Answer 2

我认为答案可能就像使用Kendo DropDownListFor一样简单，它将填充给定的数据。

kendoui：将远程数据源绑定到模板中的下拉列表

2 个答案: