Multiple edit buttons kendo grid

1 Answer 316 Views
Top achievements
Rank 1
Mike asked on 19 Apr 2022, 09:45 AM

Im using Kendo grid MVC and trying to determine how i can have 2 edit popup buttons (edit command at column level) that edit diffrent things.  Business rules dont allow a single editor template to update all data.

example “edit address” button shows address editor tenplate and a “edit company” button which shows company editor template.  

how can achieve this?

1 Answer, 1 is accepted

Sort by
Ivan Danchev
Telerik team
answered on 22 Apr 2022, 06:22 AM

Hello Mike,

The Grid does not have a built-in option for using two or more different popup editors, so achieving this would require custom logic. I've created an example that demonstrates how this can be done and added comments:

	.DataSource(dataSource => dataSource
		.Model(model => model.Id(m => m.PersonID))
		.Read(read => read.Action("GetPersons", "Home"))
		.Update(up => up.Action("UpdatePerson", "Home"))
	.Columns(columns =>
		columns.Bound(c => c.PersonID).Width(200);
		columns.Bound(c => c.Name);
		columns.Bound(c => c.Address);
		columns.Bound(c => c.Company);
		//2 custom commands declared with a click handler attached, each of which will open a different popup editor: 
		columns.Command(command => command.Custom("Edit Address").Click("editAddress")).Width(180);
		columns.Command(command => command.Custom("Edit Company").Click("editCompany")).Width(180);
	.Editable(ed => ed.Mode(GridEditMode.PopUp))

@*the dialog that will replace the default Grid popup:*@ 
	//the Dialog's actions are handled and the logic for saving the edited value, or cancel the edit is in the handlers:
	.Actions(actions =>

@*Two different templates:*@
<script type="text/x-kendo-template" id="addressTemplate">
	<div id="details-container">
		<label for="Address">Address</label>
		<input id="Address" data-bind="value: Address">

<script type="text/x-kendo-template" id="companyTemplate">
	<div id="details-container">
		<label for="Company">Company</label>
		<input id="Company" data-bind="value: Company">

<script type="text/javascript">
     var addressTemplate;
     var companyTemplate;

     $(document).ready(function () {
	//initialization of the templates:
    	addressTemplate = kendo.template($("#addressTemplate").html());
    	companyTemplate = kendo.template($("#companyTemplate").html());

    function editAddress(e) {

	//get the edited record's dataItem:
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var dialog = $("#dialog").data("kendoDialog");

	//pass the template's content to the Dialog:

	//initialize a TextBox widget:
        var addressTextBox = $("#Address").data("kendoTextBox");
    	//bind the TextBox widget to the dataItem. Through its data-bind attribute it will bind to the respective field (e.g., Address) in the dataItem:
        kendo.bind(addressTextBox.element, dataItem);

	//open the Dialog:;

    function editCompany(e) {

    	var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    	var dialog = $("#dialog").data("kendoDialog");


    	var companyTextBox = $("#Company").data("kendoTextBox");
    	kendo.bind(companyTextBox.element, dataItem);;

    //click handler for the Ok button in the Dialog:
    function onConfirm() {
    	var grid = $("#grid").data("kendoGrid");
	//sync the Grid's dataSource. This will trigger a call to the Update action specified in the Grid's DataSource declaration.

	//click handler for the Cancel button in the Dialog:
    function onCancel() {
    	var grid = $("#grid").data("kendoGrid");
	//cancel the changes, if the user has modified a value, but clicks on Cancel

Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Asked by
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question