Show Confirm Model dialog on Kendo MVC Grid row Update/Add

[Ahmed]

Hi Team, Below is my requirement.
In a page,I have multiple KENDO MVC Grids where in some of grids i have Add & Update commands. I need to display Confirm Model dialog before submitting the row to controller. I didnt find any events to do this.

Please help. Thanks. Below is my MVC grid code 

@(Html.Kendo().Grid<iMAP.SRT.Core.SRTPRODUCT>().Name("SRT").Columns(columns =>{ columns.Command(command => { command.Edit(); }).HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(130); columns.Bound(c => c.ACTIVE).Title("ACTIVE").HeaderHtmlAttributes(new { @class = "headercolumn" }).ClientTemplate("<input type='checkbox' #= ACTIVE ? checked='checked' :'' # />").Width(60); columns.Bound(c => c.CODE).Title("PRODUCT CODE").HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(120); columns.Bound(c => c.DESCR).Title("DESCRIPTION").HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(360);}).ToolBar(toolbar => { toolbar.Create(); })//.ToolBar(toolBar => toolBar.Template(@"<a id='addSome' class='k-button k-button-icontext k-grid-add' onclick='PDSBOMResults();'><span class='k-icon k-add'></span>Add new record</a>")).Editable(editable =>{ editable.Mode(GridEditMode.InLine).Window(window =>{ window.HtmlAttributes(new { @class = "k-window-titlebar;k-window-title;k-grid-update;k-grid-cancel;k-window-action;k-icon k-update;" });});}).Editable(editable => editable.Mode(GridEditMode.InLine)).HtmlAttributes(new { style = "height:500px;" }).Groupable().Scrollable(scrollable => scrollable.Virtual(true)).Selectable(selectable => selectable .Mode(GridSelectionMode.Multiple)).Filterable()//.Filterable(ftb => ftb.Mode(GridFilterMode.Row)).Resizable(resize => resize.Columns(true)).Events(x => x.Edit("popupProductsModule").DataBound("onGrisDataBound"))//.Events(events => events.Edit(@<text>function (e) {if (e.model.isNew() == false) {$("#CODE").attr("readonly", true);$("#CREATED").attr("hidden", true);$("#CREATEDBY").attr("hidden", true);$("label[for='CREATED']").attr("hidden", true);$("label[for='CREATEDBY']").attr("hidden", true)}}</text>)).DataSource(dataSource => dataSource .Ajax().Events(events => events.RequestEnd("onRequestEndForProducts")).Model(model =>{ model.Id(p => p.PRODUCTID); model.Field(p => p.CODE).Editable(true);}).Create(update => update.Action("InsertKBProducts", "SrtProject").Data("passParamsForInsertKBProducts")).Read(read => read.Action("GetKBProducts", "SrtProject").Data("getMainProductdetailsParams")).Update(update => update.Action("UpdateKBProducts", "SrtProject").Data("passParamsForUpdateKBProducts")).Destroy(update => update.Action("DeleteKBProducts", "SrtProject"))))

[Boyan Dimitrov]

Hello Ahmed,

 

A possible solution is to prevent the default behavior in the save event of the Kendo UI Grid. This will prevent of sending a request to the update/add controller and show the confirmation window. If user wants to proceeed with the update simply the sync method of the Kendo UI DataSource can be called. Otherwise the cancelChanges method should be called to revert the changes. 

 

 

Regards,
Boyan Dimitrov
Telerik