当父小部件遇到更改事件时使 kendo ui 子小部件值不稳定答案

【问题标题】：Unsetting kendoui child widget values when parent widget experiences a change event当父小部件遇到更改事件时使 kendo ui 子小部件值不稳定
【发布时间】：2015-02-05 15:37:18
【问题描述】：

我有用值初始化的父子组合框小部件。我指定“使用值初始化”，因为我在处理没有任何值初始化的父子小部件时没有任何问题。

这是父小部件初始化代码：

var jsonObj = GetSavedJSONObject(key);
        var value = (jsonObj) ? '' + jsonObj.Id : '';
        var text = (jsonObj) ? '' + jsonObj.Name : '';
        $("#" + key).kendoComboBox({
            placeholder: placeholder,
            dataTextField: dataText,
            dataValueField: dataValue,
            filter: "contains",
            autoBind: false,
            enable: canEditAll,
            dataSource: {
                type: "jsonp",
                transport: {
                    read: {
                        url: urlValue,
                        type: "POST"
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            },
            value : value,
            text : text,
            select: selectEvent,
            change: changeEvent
        });

这是子小部件初始化代码：

var jsonObj = GetSavedJSONObject(key);
        var value = (jsonObj) ? '' + jsonObj.Id : '';
        var text = (jsonObj) ? '' + jsonObj.Name : '';
        $("#" + key).kendoComboBox({
            placeholder: placeholder,
            cascadeFrom: cascadeFromId,
            dataTextField: dataText,
            dataValueField: dataValue,
            filter: "contains",
            autoBind: false,
            delay: 300,
            enable: canEditAll,
            dataSource: {
                type: "jsonp",
                serverFiltering: true,
                transport: {
                    read: {
                        url: urlValue,
                        data: getRateTypeSelected,
                        type: "POST"
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            },
            value : value,
            text : text,
            select: selectEvent2,
            change: changeEvent2
        });

在 parent 的 select 事件中，我是这样做的：

var childCombobox = $("#childWidget").data("kendoComboBox");
            if (childCombobox ) {  
                //setting parent value here
                e.sender.value(dataItem.Id);
                //should unset/clear the child widget per docs
                childCombobox.value(null);
                childCombobox.dataSource.read();
                if ($"#parentWidget").val()){
                    childCombobox.enable(true);
                }else{
                    childCombobox.enable(false);
                }
                console.log(childCombobox.value());
                console.log(childCombobox.text());
                console.log(childCombobox.input.val());
                console.log($("#childWidget").val());
                console.log(childCombobox);
            }

根据我看到的文档，这样做：

combobox .value(null);

应该足以清除子小部件的选择。执行期间控制台中的打印输出显示值为“”。但是，在 UI 中，我仍然看到显示子小部件的旧值。因此，如果子小部件的旧 dataText 是 dataValue 为 3 的“东京”，我会在子小部件中看到值“3”。任何积分将不胜感激。

【问题讨论】：

如果你设置了级联属性，那么 $("#child").value("");和 $("#child")..trigger('change');应该是你所需要的。

标签： kendo-ui kendo-combobox kendo-ui-mvc

【解决方案1】：

根据 Select 事件的文档：

“以编程方式选择项目时不会触发该事件。”

他们说要使用 Cascade 事件：

“通过 API 或用户交互更改小部件的值时触发。”

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-cascade

【讨论】：