如何在 KendoUI 自定义弹出编辑器中初始化和加载 MultiSelect / Numeric / FileUpload 的值？

Question

我正在试用 KendoUI Web，我正在尝试让多选、数字和文件上传小部件在我的自定义弹出编辑器中正确显示和运行。单击“编辑”按钮时，弹出窗口不显示正确的多选、数字和文件上传，并且我无法将网格行中的默认值加载到多选小部件中（例如示例数据中的“1,2”。当我单击“保存”时弹出编辑器中的按钮，所有字段都应该填充到我的文本框中（这似乎工作正常）。我想坚持初始化小部件的 HTML 方法而不是使用 MVC。

如果有人可以帮助解决我的问题。

1. 我不确定如何初始化小部件（多选、数字和文件上传），因为如果我将 javascript 初始化放在模板中，就会出错。

2. 我无法将网格行中的默认值加载到我的多选下拉列表中。

有谁知道需要做什么才能使其正常工作？

这是我当前的代码http://jsfiddle.net/Xwtq3/

     <h2>")
        Users</h2>")
")
<div id=""example"" class=""k-content"">")
    ")
    <input name=""txtAdvancedSearchString"" type=""text"" onchange=""javascript:setTimeout('__doPostBack")
")
(\'txtAdvancedSearchString\',\'\')', 0)"" onkeypress=""if (WebForm_TextBoxKeyHandler(event) == false) return false;"" ")
")
id=""txtAdvancedSearchString"" />")
    <script>")
        var mydata = [{")
            guid: ""D007DD39-540B-4bc3-9900-39A8B931EB19"",")
            fullname: ""Jeff"",")
            email: ""jeffkent@testemail.com"",")
            groups: ""1,2"",")
            administrator: ""1"",")
            url: ""jeff.jpg""")
        }, {")
            guid: ""E8CFD49A-3B85-4093-AE52-F55C73E12A7B"",")
            fullname: ""Frank"",")
            email: ""testemail@email.com"",")
            groups: ""3,4"",")
            administrator: ""1"",")
            url: ""todd.jpg""")
        }];")
    </script>")
    <div id=""grid""></div>")
    <div id=""details""></div>")
    <script>")
        var wnd,")
        detailsTemplate;")
")
        $(document).ready(function() {")
")
")
            var grid = $(""#grid"").kendoGrid({")
                dataSource: {")
                    pageSize: 20,")
                    data: mydata")
                },")
                pageable: true,")
                groupable: true,")
                selectable: ""row"",")
                reorderable: true,")
                sortable: true,")
                filterable: true,")
                columnMenu: true,")
                height: 430,")
                columns: [{")
                    field: ""fullname"",")
                    title: ""Full Name""")
                }, {")
                    field: ""email"",")
                    title: ""Email""")
                }, {")
                    field: ""groups"",")
                    title: ""Groups""")
                }, {")
                    field: ""administrator"",")
                    title: ""User Role""")
                }, {")
                    field: ""url"",")
                    title: ""File URL""")
                }, {")
                    command: {")
                        text: ""Edit"",")
                        click: showDetails")
                    },")
                    title: "" "",")
                    width: ""140px""")
                }]")
            }).data(""kendoGrid"");")
")
            wnd = $(""#details"")")
                .kendoWindow({")
                title: ""Download"",")
                modal: true,")
                visible: false,")
                resizable: false,")
                width: 300")
            }).data(""kendoWindow"");")
")
            detailsTemplate = kendo.template($(""#template"").html());")
        });")
")
        function showDetails(e) {")
            e.preventDefault();")
")
")
            var dataItem = this.dataItem($(e.currentTarget).closest(""tr""));")
            wnd.content(detailsTemplate(dataItem));")
            wnd.center().open();")
        }")
    </script>")
    <script type=""text/x-kendo-template"" id=""template"">")
        <div id = ""details-container"" > <h2 > View / Edit User </h2>")
  <table cellspacing=""6"" cellpadding=""3"">")
    <tr>")
      <td><label ID=""lblID"" for=""txtID"">ID:</label > <br /> <input type = ""text""")
        id = ""txtID""")
        class = ""k-textbox""")
        placeholder = """"")
        value = ""#= guid #"" > </input></td > </tr>")
      <td><label ID=""lblFirstName"" for=""txtFirstName"">First Name:</label > <br /> <input type = ""text""")
        id = ""txtFirstName""")
        class = ""k-textbox""")
        placeholder = """"")
        value = ""#= fullname #"" > </input></td > </tr>")
    <tr>")
      <td>")
      <!--MultiSelect Dropdown-->")
        ")
        <select name=""groups"" id=""groups"" class=""k-item"" multiple=""multiple"" data-role=""dropdownlist"">")
    <option value=""1"">HR</option > < option value = ""2"" > 1099 < /option>")
    <option value=""3"">Insurance Form</option > < option value = ""4"" > Claim Form < /option>")
    <option value=""4"">Timeoff Requests</option >")
")
         </select>")
        ")
        <!--MultiSelect Dropdown end--></td >")
")
         </tr>")
    <tr><td>                    ")
    <input id=""txtMaxAdmins"" type=""number"" value=""#=administrator#"" min=""0"" max=""100"" />")
")
")
")
         </td></tr >")
")
")
         <tr> <td> <label")
        for = ""upload"" > Document Types: </label>")
                    Choose a transparent .png for best results<br /> <input id = ""upload""")
        type = ""file"" value=""#=url#"" />")
")
")
         </td></tr> <tr > <td colspan = ""2"" > <button ID = ""btnSave""")
        class = ""k-button""")
        onclick = ""CallServer()"" > Save </button></td> </tr>")
  </table> </div>")
    </script>")
    <script>")
        function CallServer() {")
            var userinput = ($(""#txtID"").val()) + '|' + ($(""#txtFirstName"").val()) + '|' + ($(""#groups"").val());")
            document.getElementById(""txtAdvancedSearchString"").value = userinput;")
")
            //alert(userinput);")
            __doPostBack('__Page', 'e');")
        }")
    </script>")
</div>")

Answer 1

您需要告诉 KendoUI 将 html 元素用作剑道控件。