MVC Kendo UI可编辑网格,弹出时没有模态

时间:2014-07-06 13:58:56

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

我想在用户点击'编辑'

时停用叠加效果

在弹出模式下,有设置吗?

弹出模式的默认设置似乎是使用叠加层,并禁用页面的其余部分。

我的代码

@using mysite.Models

    @(Html.Kendo().Grid<UserViewModel>().Name("users_grid").Columns(c =>{
            c.Bound(u => u.UserID);
            c.Bound(u => u.FirstName);
            c.Bound(u => u.LastName);
            c.Bound(u => u.Email);
            c.Bound(u => u.Address);
            c.Bound(u => u.Phone);
            c.Bound(u => u.UserName);
            c.Bound(u => u.UserTypeDisplay).ClientTemplate("#: UserType.Display #").Title("User Type");
            c.Bound(u => u.Company);
            c.Command(command => { command.Edit(); command.Destroy(); });
        })
        .DataSource(d=> d
            .Ajax()
                .Read("ManageUsersajax", "Account")
                .Update(u => u.Action("UpdateUserData", "Account"))
                .Destroy(x => x.Action("Delete", "Products"))
                .Create(c => c.Action("Create", "Products"))
                .PageSize(5)
                        .Model(m =>
                        {
                            m.Id(u => u.UserID);
                            m.Field( u=> u.UserTypeDisplay).DefaultValue(
                                      ViewData["defaultUserType"]);

                        })
        )
        .Pageable()
        .Groupable()
        .Sortable()
         .Editable(e => e.Mode(GridEditMode.PopUp)
         )

        .ToolBar(t => t.Create())
    )

    <style>



    </style>

1 个答案:

答案 0 :(得分:0)

听起来你真正想要的是使用剑道网格的editable: "inline"选项。 http://demos.telerik.com/kendo-ui/grid/editing-inline

但是,如果您确实希望弹出窗口没有叠加,则可以在kendo网格触发编辑事件时终止叠加层。

http://jsbin.com/beserexi/2/edit?html,js,output

edit: function() {
  $('.k-overlay').remove();
}

在MVC中它应该看起来像

.Events(events => events.Edit(
        @<text>
            function() {
              $('.k-overlay').remove();
            }
            </text>
         ))

http://docs.telerik.com/kendo-ui/api/wrappers/aspnet-mvc/kendo.mvc.ui.fluent/grideventbuilder