Question

我正在使用Kendo UI Grid，我已将其配置为使用自定义模板的弹出式编辑

    <script id="popup_editor" type="text/x-kendo-template">
    <div id="editor">
            <div class="k-edit-label">
                <label for="Type">Type</label>
            </div>

    <select data-role="dropdownlist" data-value-field="Type" data-text-field="Type"
                         data-bind="source: typeSource, value: selectedProduct"></select>

<div class="k-edit-label">
                <label for="Type">Option</label>
            </div>

<select data-role="dropdownlist" data-value-field="Option" data-text-field="Option"
                         data-bind="source: productsSource.Options, value: selectedOption"></select>
            </div>

</script>

这是我的ViewModel：

    function ViewModel() {
        var getTypesUrl = "/Controller/Action";

        var viewModel = kendo.observable({
            typeSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: getConditionTypesUrl,
                        dataType: "json"
                    },
                },
                batch: true,
                schema: {
                    model: {
                        id: "Type"
                    }
                }
            }),
            selectedType: null,
            selectedOption: null
        });

        kendo.bind($("#editor"), viewModel);
    }

ViewModel();

我的操作返回JSON。

问题在于，当我点击“添加新记录”按钮时，没有对getTypesUrl的调用，并且未填充下拉列表。一般的想法是为不同类型提供不同的选项，并根据所选类型填充Option下拉列表。我相信，问题出现的原因是只有在单击按钮并且kendo无法创建绑定时才会显示编辑器。

Answer 1

如果每行的下拉列表相同，则从数据源获取其值，并将这些值存储在JavaScript中的页面变量中，并将下拉列表指向此新数据源。使用一些JavaScript来关联id和名称。

或者，如果基于某些其他逻辑加载它，则实现单独调用以在视图模型中为下拉列表填充数据源。

http://www.aspnetwiki.com/page:introduction-to-kendo-mvvm

http://www.aspnetwiki.com/page:kendo-mvvm-ui-grid

进一步说明你可以纯粹用JavaScript编写你的模板并将其绑定到html，其优点是你可以调试它，以后它仍然可以通过ajax调用加载，它可能会更小。

使用MVVM进行Kendo UI Grid弹出编辑

1 个答案: