javascript - 如何在 asp 的单个剑道网格中使用两种类型的编辑，如弹出和内联？

Question

我想对单个剑道网格使用两种类型的编辑，如内联编辑和弹出式编辑命令的内联编辑工具栏的弹出式编辑，，我已经搜索了谷歌，但没有找到相关页面在弹出式编辑中我想使用模板

<script id="customPopUpTemplate" type="text/x-kendo-template"> <form id="myForm" action="" method="post"> <div align="right"> <span id="Spn2" class ="span">* Mandatory Fields</span> </div>

<div align="center"> <span id="Spn1" class ="span1" ></span> </div>

<div class="heig"> </div>

<div class="k-edit-field"> <input name="FirstName" class="k-textbox"/>
<span id="sta1" style="color: Red; font-size:medium ;">
</span> </div> <div class="div">First Name: </div>

<div class="k-edit-field"> <input name="LastName" class="k-textbox"/>
<span id="sta2" style="color: Red; font-size:medium ;">
</span> </div>

<div class="div">Last Name: </div>

<div class="k-edit-field"> <input name="LoginName" class="k-textbox"/> <
<span id="sta3" style="color: Red; font-size:medium;">
</span> </div><div class="div">Login Name: </div>

<div class="k-edit-field"> <input name="Password" type="Password" class="k-textbox"/>
<span id="sta4" style="color: Red; font-size:medium ;">
</span> </div> <div class="div">Password: </div>

<div class="k-edit-field"> <input name="ReTypePassword" type="Password" class="k-textbox"/>
<span id="sta5" style="color: Red; font-size:medium ;"> * </span>
</div> <div class="div">ReTypePassword: </div>

<div class="k-edit-field">
<input name="ScopeId"
data-bind="value:ScopeId"
data-value-field="ScopeId"
data-text-field="ScopeName"
data-source="dropDownDataSource"
data-role="dropdownlist" />
<span id="sta6" style="color: Red; font-size:medium ;"> * </span>

</div> <div class="div">Scope: </div>

</form> </script>

我的模板 id 是 customPopUpTemplate

我的工具栏代码是

toolbar: [ { text : "Add new record", name: "popup", iconClass: "k-icon k-add"} ],<强> editable: "inline",

columns: [

{ field: "LoginName", title: "Login Name", width:"175px" },
{ field: "FirstName", title: "First Name", width:"115px" },
{ field: "LastName", title: "Last Name", width:"100px" }

$(".k-grid-popup", grid.element).on("click", function () {
grid.options.editable = "popup";
grid.addRow();
grid.options.editable = "inline";
});

它工作正常，但它会显示正常的列，，

在我的模板中，我添加了额外的列，，

我如何使用我的模板进行弹出式编辑...

提前致谢。!!!!!!!!!!!!

Answer 1

将具有选项模板、模式的 json 值分配给 grid.options.editable

$(".k-grid-popup", grid.element).on("click", function () { 

var popupWithOption = {
                     mode: "popup",
                     template: kendo.template($("#customPopUpTemplate").html()),
                     window: {
                         title: "Your Title"
                     }
                 };
grid.options.editable = popupWithOption ;
grid.addRow();
grid.options.editable = "inline";
});

希望对你有帮助