0

私は KendoUI Web を試しており、カスタム ポップアップ エディターで複数選択、数値、およびファイルアップロード ウィジェットを表示して正しく機能させようとしています。[編集] ボタンをクリックすると、ポップアップに複数選択、数値、およびファイルのアップロードが正しく表示されず、グリッド行から複数​​選択ウィジェットにデフォルト値をロードできません (たとえば、サンプル データの「1,2」。[保存] をクリックすると、ボタンをクリックすると、すべてのフィールドがテキスト ボックスに取り込まれます (正常に動作しているようです)。MVC を使用するのではなく、ウィジェットを初期化する HTML メソッドに固執したいと思います。

誰かが私の問題を手伝ってくれるなら。

  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>")
4

1 に答える 1

0

html 要素を剣道コントロールとして使用するように KendoUI に指示する必要があります。

于 2013-07-17T13:04:31.000 に答える