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

标签 javascript asp.net kendo-ui kendo-grid kendo-asp.net-mvc

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

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

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

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

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

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

最佳答案

将具有选项模板、模式的 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";
});

希望对你有帮助

关于javascript - 如何在 asp 的单个剑道网格中使用两种类型的编辑,如弹出和内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25737126/

相关文章:

asp.net - ASP.NET 和 MySQL 协同工作的效果如何?

javascript - 剑道 : Direction property for context main menu

javascript - 如何在 JavaScript 中清除所有项目,然后将新项目添加到 Kendo Multiselect 中?

javascript - jQuery 检查平板电脑?

javascript - Angular-初学者 NgModel 绑定(bind)

javascript - 如何使用 Cloud Functions 在 Firebase 中解决 "TypeError: Cannot read property ' firstname' of undefined"?

javascript - 区域.js : 140 Uncaught TypeError: Cannot read property 'remove'

javascript - 当在表单上按下提交时如何调用不同的 get 函数; Angular

c# - base.SendAsync - 对称执行是如何完成的?

javascript - 备注字段(客户端和服务器端)的正则表达式验证很少有特殊标签