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外部編輯表格

回答

相關問題