如何加载视图弹出编辑剑道电网

Question

我在KendoUI首发，我写这篇文章的代码此网格我已经删除和编辑命令来创建网格

@(Html.Kendo().Grid(Model) 
     .Name("Grid") 
     .Columns(columns => 
        { 
         columns.Bound(p => p.Id).Groupable(false).Visible(false); 
         columns.Bound(p => p.BrandName); 
         columns.Bound(p => p.BrandAbbr); 
         columns.Bound(p => p.SrcImage); 
         columns.Bound(item => @item.Id).Title("Command").Filterable(false).Groupable(false) 
          .Template(@<text> 
              @Html.ActionLink("Edit", "Edit", new {id = @item.Id}, new {@class = "k-button k-button-icontext k-grid-Edit"}) 
              @Html.ActionLink("Delete", "Delete", new {id = @item.Id}, new {@class = "k-button k-button-icontext k-grid-Delete"}) 
             </text>).Width(200); 
        }); 
}) 
    .ToolBar(toolbar => 
        { 
         toolbar.Custom().Action("Create","Brand").Text("add");       
        } 
     ) 
     .Groupable() 
     .Pageable() 
     .Sortable() 
     .Scrollable() 
     .Filterable() 
     .HtmlAttributes(new {style = "height:500px;"})    
     .DataSource(dataSource => dataSource 
            .Server()       
            .Model(model => model.Id(item => item.Id)) 
        ))  

。我想当用户点击编辑按钮到网格视图编辑显示弹出窗体。但我不知道该怎么做。请帮帮我。谢谢大家。

Answer 1

这里是更好的选择 - Demo-Popup editing

在网格中的列声明的一部分，

.Columns(columns => 
    columns.Command(command => { 
     command.Edit();  //for edit functionality 
     command.Destroy(); //for delete functionality 
    }) 
.Editable(editable => editable.Mode(GridEditMode.PopUp)) 
.DataSource(dataSource => dataSource 
    .Ajax() 
    .PageSize(20) 
    .Events(events => events.Error("error_handler")) 
    .Model(model => model.Id(p => p.Id)) 
    .Create(update => update.Action("EditingInline_Create", "Grid")) 
    .Read(read => read.Action("EditingInline_Read", "Grid")) 
    .Update(update => update.Action("EditingInline_Update", "Grid")) 
    .Destroy(update => update.Action("EditingInline_Destroy", "Grid")) 
) 

在此代码为编辑使用Templete

Answer 2

您将不得不使用Custom command,kendoWindow（显示弹出窗口）和template（显示弹出窗口中的内容）。

在网格中，

columns.Command(command => command.Custom("Edit").Click("editItem")); 

然后（换什么，当你的“编辑”，也可以点击会发生）定义窗口的模板。

<script type="text/x-kendo-template" id="template"> 
    <div id="details-container"> <!-- this will be the content of the popup --> 
     BrandName: <input type='text' value='#= BrandName #' /> 
     ..... 
     ..... 
    </div> 
</script> 

<script type="text/javascript"> 
    var detailsTemplate = kendo.template($("#template").html()); 

    function editItem(e) { 
     e.preventDefault(); 

     var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
     var wnd = $("#Details").data("kendoWindow"); 

     wnd.content(detailsTemplate(dataItem)); 
     wnd.center().open(); 
    } 
</script>