[英]how to load view in Popup editing in kendo grid
i'm starter in KendoUI, i Write this code for create grid 我是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))
))
in this grid i have delete and Edit command. 在这个网格中,我有删除和编辑命令。 i want when user click in Edit Button into grid View Edit show in popup form. 我想要当用户单击“编辑”按钮进入网格视图时以弹出形式显示。 But I do not know how to do it. 但是我不知道该怎么做。 please help me. 请帮我。 thanks all. 谢谢大家
You will have to use Custom command
, kendoWindow
(to display popup) and template
(to display content inside of the popup) for that. 为此,您将必须使用“ Custom command
, kendoWindow
(显示弹出窗口)和template
(显示弹出窗口内部的内容)。
In grid, 在网格中
columns.Command(command => command.Custom("Edit").Click("editItem"));
And then (for-what will happen when you click on "Edit"..) define the template of the window. 然后(单击“编辑”时会发生什么。)定义窗口的模板。
<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>
Here is the better alternative - Demo-Popup editing 这是更好的选择- 演示弹出式编辑
In column declaration part of the grid, 在网格的列声明部分,
.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"))
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.