Question

我正在开展一个项目，我已经实施了 Kendo Grid ，当我点击编辑按钮时，会显示弹出进行编辑。但我想要的是一个单独的面板与剑道网格一起使用 [bootstrap] [1] ，我想用特定行的编辑细节填充它点击了剑道网格。我附上了下面的图片，让你知道我想要什么。我希望填充帮助边界区域 显示所选行的可编辑 详细信息。 任何帮助??

@(Html.Kendo().Grid<UserItem>()
              .Name("usergrid")
              .HtmlAttributes(new { style = "width:100%" })
              .Columns(columns =>
              {
                  columns.Bound(o => o.FirstName);
                  columns.Bound(o => o.LastName);
                  columns.Bound(o => o.EmailAddress);
                  columns.ForeignKey(o => o.RoleId, (System.Collections.IEnumerable)ViewData["Roles"], "Id", "Description")
                      .Title("Role");
                  columns.ForeignKey(o => o.SystemRoleId, (System.Collections.IEnumerable)ViewData["SystemRoles"], "Id", "Description")
                      .Title("Sys Role");
                  columns.ForeignKey(o => o.TimeZoneId, (System.Collections.IEnumerable)ViewData["TimeZones"], "Id", "Description")
                      .Title("Time Zone");
                  columns.Bound(e => e.DefaultPageSize).Title("Default Page Size");
                  columns.Bound(o => o.IsActive).Title("Is Active");
                  columns.Bound(o => o.LastLoginDate).Format("{0:d}").Title("Last Login");
                  columns.Command(command => { command.Edit().Text("Edit"); });
              })
               .ToolBar(toolbar =>
               {
               toolbar.Template(@<text>
        <div class="toolbar">
            <span id="divCompany" style='@(roleName == Constants.SystemRoles.FifthMethod?"":"display:none;")'>
                <label class="category-label" for="ddlCompany">Companies :</label>
                @(Html.Kendo().DropDownList()
                                            .Name("ddlCompany")
                                            .DataTextField("Name")
                                            .DataValueField("Id")
                                            .AutoBind(true)
                                            .Events(e => e.Change("CompanyChange"))
                                            .HtmlAttributes(new { style = "width: 150px;" })
                                            .BindTo(ViewBag.Companies)
                                            .Value(Convert.ToString(ViewBag.CurrentCompanyID))
                )
            </span>
            @Html.Kendo().Button().Name("btnNewUser").Content("New User").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add pull-right" })
            <button type="button" data-toggle="modal" data-target="#importUser-pop" class="k-button k-button-icontext pull-right">Import Users</button>

        </div>
            </text>);
               })
              .Editable(editable =>
              {
                  editable.Mode(GridEditMode.PopUp);
              })
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(10)
                  .Model(model =>
                  {
                      model.Id(c => c.UserId);
                      model.Field(c => c.LastLoginDate).Editable(false);
                  })
                    .Create(create => create.Action("User_Create", "User").Data("GetCompanyId"))
                  .Read(read => read.Action("User_Read", "User").Data("GetCompanyId"))
                  .Update(update => update.Action("User_Update", "User"))

              )
              .Pageable()
              .Sortable()
              .Filterable()
              .Events(e => e.Edit("grid_Edit"))
)

Answer 1

@JvmField如何使用外部表单编辑记录

中已存在一个完整的示例

使用<div id="editForm">

将mvvm界定为kendo.bind($("#editForm"), viewModel)部分到网格行

Kendo UI外部编辑表单

1 个答案: