剑道UI外部编辑表单

Question

我正在研究一个项目，我已经实现了剑道网格，当我点击编辑按钮时，显示一个弹出窗口进行编辑。但我想要的是一个单独的面板旁边的剑道网格，我已经使用[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

一个完整的例子已经存在于Kendo Docs如何使用外部表单编辑记录

使用kendo.bind($("#editForm"), viewModel)的mvvm绑定section <div id="editForm">到grid row