剣道UI外部編集フォーム

Question

私は剣道グリッドを実装しています。編集ボタンをクリックするとポップアップが表示されます。しかし、私が欲しいのは、私が[bootstrap] [1]を使って作成した剣道グリッドの横に別のパネルがあり、編集詳細を剣道グリッドにクリックして挿入したいと思っています。私はあなたに私が望むアイデアを与えるために下のイメージを付けました。ボーダーヘルプ領域は、ここに配置したいところですeditableを表示選択した行の詳細。 ヘルプ？

@(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

完全な例では、すでに親切に私が作りたいのコードを見て