Multiple edit buttons kendo grid

[Mike]

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?

[Ivan Danchev]

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:

@(Html.Kendo().Grid<KendoUIMVC5.Models.Person>()
	.Name("grid")
	.DataSource(dataSource => dataSource
		.Ajax()
		.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))
	.Navigatable()
	.Selectable()
)

@*the dialog that will replace the default Grid popup:*@ 
@(Html.Kendo().Dialog()
	.Name("dialog")
	.Title("Edit")
	.Visible(false)
	.Modal(true)
	.Width(300)
	.Modal(false)
	//the Dialog's actions are handled and the logic for saving the edited value, or cancel the edit is in the handlers:
	.Actions(actions =>
	{
		actions.Add()
		.Text("Cancel")
		.Action("onCancel");
		actions.Add().Text("OK")
		.Primary(true)
		.Action("onConfirm");
	})
)

@*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">
	</div>
</script>

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

<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) {
    	e.preventDefault();

	//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:
        dialog.content(addressTemplate(dataItem));

	//initialize a TextBox widget:
        $("#Address").kendoTextBox();
        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:
        dialog.open();
    }

    function editCompany(e) {
    	e.preventDefault();

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

    	dialog.content(companyTemplate(dataItem));

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

    	dialog.open();
    }

    //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.
    	grid.dataSource.sync();
    }

	//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
    	grid.cancelChanges();
    }
</script>

Regards,
Ivan Danchev
Progress Telerik

[Ibrahim]

Would this solution still work for premade templates already in the editorTemplate folder?

[Eyup]

Yes, it should, but in order to provide a guaranteed answer, we will need to see your exact configuration. Can you open a formal support ticket and send us your code files?