Question

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

<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"/>＆LT;
<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";
});

我希望这会对你有所帮助

如何在asp中的单个kendo Grid中使用两种类型的编辑，如popup和Inline？

1 个答案: