Kendo UI外部编辑表格

我正在执行一个项目，我已经实施了Kendo Grid当我点击编辑按钮弹出进行编辑显示。但我想要的是一个独立的面板旁边的剑道，我已经使用[引导] [1]并使用编辑细节在Kendo网格中点击特定的行。我附上了下面的图片，让你知道我想要什么。帮助加边区域是我要填充它的地方显示可编辑选定行的详细信息。 任何帮助？Kendo UI外部编辑表格

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

来源

2016-07-01 Aizaz Athar

一个完整的例子已经在Kendo Docs存在如何使用外部形式

一个MVVM界部分<div id="editForm">到网格行使用kendo.bind($("#editForm"), viewModel)

来源

2016-07-04 07:05:42

请看看代码我要让编辑记录它可以在**单独的网格**中编辑，而不是显示弹出窗口！我无法将它与模型绑定，因为telerik的大多数示例都是Java脚本或jQuery。我需要知道如何使用上面的代码和** mvc语法**来绑定它。 –

Kendo UI外部编辑表格

回答

相关问题