Kendo UI Cascading Dropdown初始值未设置

时间:2014-03-20 20:34:43

标签: kendo-ui kendo-dropdown

我有级联下拉列表,在尝试定义初始值时(在级联下也是如此)而不是使用父选择值调用ajax控制器方法,它传递空白值。

我有这样的想法,我可以保存我的最后搜索值并将其存储在数据库中,再次进入该屏幕后,默认会选择值。

一切都在Javascript中意味着存储值/重新获取并应用于控件:

我的级联下拉代码:

<div style="width: 400px; clear: both; float: left; position: relative; display: table-cell;">
                        <ul style="width: 450px; clear: both; float: none;">
                            <li>
                                <div class="editor-row">
                                    <div class="editor-label-short">Home Country</div>
                                    <div class="editor-field">
                                         @(Html.Kendo().DropDownList()
                                              .Name("HOME_COUNTRY_ID")
                                              .HtmlAttributes(new { style = "width:200px" })
                                              .OptionLabel("Select Home Country")
                                              .DataTextField("Text")
                                              .DataValueField("Value")
                                              .DataSource(source => source.Read(read => read.Action("GetCountryJSON", "Employee")))

                                               )
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="editor-row">
                                    <div class="editor-label-short">Home City</div>
                                    <div class="editor-field">
                                         @(Html.Kendo().DropDownList()
                                              .Name("HOME_CITY_ID")
                                              .HtmlAttributes(new { style = "width:200px" })
                                              .OptionLabel("Select Home City")
                                              .DataTextField("Text")
                                              .DataValueField("Value")
                                              .DataSource(source => source.Read(read => read.Action("GetCityByCountryJSON", "Employee")
                                                  .Data("getCountryId"))
                                                  .ServerFiltering(true))
                                              .AutoBind(false)
                                              .CascadeFrom("HOME_COUNTRY_ID")
                                              )
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

在页面加载中分配值的Javacript代码意味着在Dom准备好之后:

 function applyvaluetoControls() {
        setdefaultvaluestoControls();
        $.each(activeLayout.controls, function(index) {
            $.each(options.emementArray, function(innerindex) {
                if (options.emementArray[innerindex].attr("id") === activeLayout.controls[index]["id"]) {
                    if ((options.emementArray[innerindex]).is(':checkbox')) {
                        options.emementArray[innerindex].prop('checked', activeLayout.controls[index]["value"]);
                    } else {

                        if (options.emementArray[innerindex].attr("data-role") !== undefined && options.emementArray[innerindex].attr("data-role") === "dropdownlist") {

                           // console.log(options.emementArray[innerindex].data('kendoDropDownList'));

                            if (options.emementArray[innerindex].data('kendoDropDownList').options.cascadeFrom !== "") {
                                console.log($("#" + options.emementArray[innerindex].data('kendoDropDownList').options.cascadeFrom).val());
                                options.emementArray[innerindex].data('kendoDropDownList').dataSource.read({ CompanyId: $("#" + options.emementArray[innerindex].data('kendoDropDownList').options.cascadeFrom).val() });
                            options.emementArray[innerindex].data('kendoDropDownList').value(activeLayout.controls[index]["value"]);
                            } else {
                            options.emementArray[innerindex].data('kendoDropDownList').enable();
                                options.emementArray[innerindex].data('kendoDropDownList').value(activeLayout.controls[index]["value"]);
                            }
                            console.log(activeLayout.controls[index]["id"]);
                            console.log(activeLayout.controls[index]["value"]);

                        } else {
                            options.emementArray[innerindex].val(activeLayout.controls[index]["value"]);
                        }

                    }
                }
            });
        });
    }

控制台日志:

HOME_COUNTRY_ID //家长控制ID

322 //将值设置为Parent

     // Blank value when I am trying to read the value Parent Control (Country)

城市://父母触发智利但空白价值 HOME_CITY_ID //孩子 342 //价值

城市:322 //在退出循环后再次调用Child with Parent selected value

并且它消除了孩子的初始选定值。

任何帮助都将受到高度赞赏!!

1 个答案:

答案 0 :(得分:1)

孩子使用您孩子的示例中的这些属性下拉菜单,您将指示下拉菜单:

.AutoBind(false) //<--Don't do any data retrieval until asked or clicked
.OptionLabel("Select Home City") //<--If the value is null display this and value will be "" 
.CascadeFrom("HOME_COUNTRY_ID") //<--Get my values using the DataValueField from this control and refresh when it changes

我敢打赌像你一样需要一个类似于这个虚构场景的配置:

Parent DropDown配置

.Name("ddlParent")
.OptionLabel((@Model.ForceParentSelect) ? "" : "All Parents")
.Value(Model.ParentID.HasValue ? Model.ParentID.Value.ToString() : "")
.DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetParents", "Parent");
        });
    })

儿童DropDown配置

<script>
    function filterChild{ return { ParentID: $("#ddlParent").val() }; }
</script>

.Name("ddlChild")
.OptionLabel((@Model.ForceChildSelect) ? "" : "All Childs")
.Value(Model.ChildID.HasValue ? Model.ChildID.Value.ToString() : "")
.AutoBind(Model.ParentID.HasValue)
.CascadeFrom(Model.ParentID.HasValue ? "" : "ddlParent")
.DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetChildren", "Child")
                .Data("filterChild");
        })            
    })