Adding Custom Column Popup Editor
Environment
Product | Telerik UI for ASP.NET Core Grid |
Progress Telerik UI for ASP.NET Core version | Created with the 2022.2.621 version |
Description
How to add a custom popup editor for a column in the Telerik UI for ASP.NET Core Grid?
Solution
- Create a Window and integrate an editor through the
.Content()
configuration method. - Decorate the Editor with the
data-bind
attribute for the corresponding field that will be edited. - Add a button to the cell by creating a column template through the
.ClientTemplateId()
configuration option. - To open the window, handle the
click
event of the button. To bind the editor to the current data item, use thebind()
method.
// Window
@(Html.Kendo().Window()
.Name("window")
.Width(600)
.Visible(false)
.Modal(true)
.Content(@<text>
@(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new {data_bind="value:ProductName"})
)
</text>)
.Actions(actions => actions
.Minimize()
.Close()
)
)
// Grid
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.ProductName).ClientTemplateId("productNameTemplate");
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.UnitsInStock).Width(140);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Model(model => {
model.Id(p => p.ProductID);
})
.Create("Editing_Create", "Grid")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "Grid")
.Destroy("Editing_Destroy", "Grid")
)
)
<script id="productNameTemplate" type="text/x-kendo-template">
<div class='contentDivs'>
#= ProductName #
</div>
<button onClick='onClick(this)' class='editButtons class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-lg"' style='float:right'>
Edit
</button>
</script>
<script type="text/javascript">
function onClick(button){
// Get the reference of the grid, editor, and window.
var grid = $("#grid").data("kendoGrid");
var editor = $("#editor").data("kendoEditor");
var window = $("#window").data("kendoWindow");
var row = $(button).closest("tr"); // Get the closest row element.
var dataItem = grid.dataItem(row); // Get the current data item.
kendo.bind(editor.element, dataItem); // Bind the editor to the corresponding data item.
window.open().center(); // Open the window.
}
</script>
For the complete implementation of the suggested approach, refer to the following Telerik REPL example.