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

1. Create a Window and integrate an editor through the .Content() configuration method.
2. Decorate the Editor with the data-bind attribute for the corresponding field that will be edited.
3. Add a button to the cell by creating a column template through the .ClientTemplateId() configuration option.
4. To open the window, handle the click event of the button. To bind the editor to the current data item, use the bind() method.

Index.cshtml

    // 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.js

    <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.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Custom PopUp Editor Example

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Adding Custom Column Popup Editor
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base