ASP.NET MVC Adding Custom Column Popup Editor

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC 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 MVC 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 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.

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also