Telerik: Discard newly added unsaved row on sort grid column

I am using telerik grid in my mvc web application.

My Scinario is like-

1.I click "add new row" option which adds empty row in my grid.

2. Then I click on sort one of column without saving newly added row.

So this sort saves newly added row automatically.I want to override this behavior by discarding unsaved row.

Let me know how to do this.

Below is my grid defination:

@(Html.Kendo().Grid()
.Name("LanguageGrid")
.Columns(columns =>
{
columns.Bound(p => p.ProviderLanguageId).Visible(false);
columns.Bound(p => p.HealthSystemId).Visible(false);
columns.Bound(p => p.ProviderId).Visible(false);
columns.Bound(p => p.IsDeleted).Visible(false);
columns.Bound(p => p.Language).ClientTemplate("#=Language.LanguageName#").Title("Language").EditorTemplateName("LanguageList");
columns.Bound(p => p.LanguageAbility).ClientTemplate("#=LanguageAbility.LanguageAbilityTypeName#").Title("Ability").EditorTemplateName("LanguageAbilityList");
columns.Bound(p => p.LanguageProficiency).ClientTemplate("#=LanguageProficiency.LanguageProficiencyTypeName#").Title("Proficiency").EditorTemplateName("LanguageProficiencyList");
if (hasRights)
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(250).Title("Action");
})
.ToolBar(toolbar => { if (hasRights) toolbar.Create().Text("Add New Language"); })
.Events(evt =>
{
evt.Edit("onGridEdit");
evt.DataBound("onGridDataBound");
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Scrollable()
.Sortable()
.HtmlAttributes(new {style = "height:110px;"})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(3)
.Events(events =>
{
//events.Error("error_handler");
events.RequestEnd("onGridRequestEnd");
})
.Model(model =>
{
model.Id(p => p.ProviderLanguageId);
model.Field(p => p.Language).DefaultValue(defaultLanguage);
model.Field(p => p.LanguageAbility).DefaultValue(defaultAbility);
model.Field(p => p.LanguageProficiency).DefaultValue(defaultProficiency);
model.Field(p => p.ProviderId).DefaultValue(Model.ProviderId);
model.Field(p => p.HealthSystemId).DefaultValue(Model.HealthSystemId);
})
.Read(read => read.Action("GetProviderLanguages", "Language", new {providerId = Model.ProviderId}))
.Update(update => update.Action("UpdateLanguage", "Language"))
.Destroy(destroy => destroy.Action("DeleteLanguage", "Language"))
.Create(create => create.Action("CreateLanguage", "Language"))
)
)

Pravin,

In your case may be you can introduce a confirmation pop-up asking for "Whether to save the row data or not". Use the below sample code to implement it [This solution is available in telerik site].

onGridDataBound: function () {

if (this.grid.tbody.find("tr[class='templated-row ']") != null) {

// Intercept mousedown event to prevent row from loosing focus

// if user decide not to loose changes done in the detail section

// NOTE: As per Telerik's response - we cannot use click event:

// http://www.telerik.com/forums/confirmation-on-row-selection-change

this.grid.tbody.find("tr[class='templated-row ']").mousedown(this.checkDataChanged);

// Due to the custom logic - ajax call to get updated information into the data grid after saving details

// we need to implement custom selection logic to re-select selected item in the grid.

this.reSelectRow();

}

},

checkDataChanged: function (e) {

// User about to change selection of the grid or leave the page.

// Lets serialize the page and compare it to the value captured

// in the "Is Dirty logic" section within site.js

newValues = $('form').serialize();

// If newly selected row - check if details data has been changed

if (initialValues !== newValues) {

var myGrid = $(document).find("div[data-role='grid']").data("kendoGrid");

// For IE - remove "k-selectable" class, so selection would not change

// until user makes his/her choice on prompt pop-up.

if (myGrid.table.hasClass("k-selectable")) {

myGrid.table.removeClass("k-selectable");

}

var ok = confirm("Are you sure you want to continue?\nCancel will return you to the unsaved detail section.\nOK will discard your changes and change selected list item.");

// If data has been changed - prompt confirmation

if (ok) {

// If yes - proceed with row change

if (!myGrid.table.hasClass("k-selectable")) {

myGrid.table.addClass("k-selectable");

}

// AS: This is the only way I found to reference the grid. Maybe it can be done better...

myGrid.select(this);

}

},

reSelectRow: function (e) {

if (lastSelection == null) {

// Saves first selection

lastSelection = $("#grid .k-state-selected");

} else {

newSelection = $("#grid .k-state-selected");

if (newSelection.length == 0) {

$("#" + this.options.GridName).data('kendoGrid').tbody.find("tr[data-uid='" + $("#" + this.options.GridName).data('kendoGrid').dataSource.get(this.dataId).uid + "']").addClass("k-state-selected");

}

},

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Madhanmohan Devarajan10y ago
Pravin,
In your case may be you can introduce a confirmation pop-up asking for "Whether to save the row data or not". Use the below sample code to implement it [This solution is available in telerik site].
onGridDataBound: function () {
if (this.grid.tbody.find("tr[class='templated-row ']") != null) {
// Intercept mousedown event to prevent row from loosing focus
// if user decide not to loose changes done in the detail section
// NOTE: As per Telerik's response - we cannot use click event:
// http://www.telerik.com/forums/confirmation-on-row-selection-change
this.grid.tbody.find("tr[class='templated-row ']").mousedown(this.checkDataChanged);

// Due to the custom logic - ajax call to get updated information into the data grid after saving details
// we need to implement custom selection logic to re-select selected item in the grid.
this.reSelectRow();
}

},

checkDataChanged: function (e) {
// User about to change selection of the grid or leave the page.
// Lets serialize the page and compare it to the value captured
// in the "Is Dirty logic" section within site.js
newValues = $('form').serialize();

// If newly selected row - check if details data has been changed
if (initialValues !== newValues) {
var myGrid = $(document).find("div[data-role='grid']").data("kendoGrid");

// For IE - remove "k-selectable" class, so selection would not change
// until user makes his/her choice on prompt pop-up.
if (myGrid.table.hasClass("k-selectable")) {
myGrid.table.removeClass("k-selectable");
}

var ok = confirm("Are you sure you want to continue?\nCancel will return you to the unsaved detail section.\nOK will discard your changes and change selected list item.");

// If data has been changed - prompt confirmation
if (ok) {
// If yes - proceed with row change
if (!myGrid.table.hasClass("k-selectable")) {
myGrid.table.addClass("k-selectable");
}

// AS: This is the only way I found to reference the grid. Maybe it can be done better...
myGrid.select(this);
}
}

},

reSelectRow: function (e) {
if (lastSelection == null) {
// Saves first selection
lastSelection = $("#grid .k-state-selected");
} else {
newSelection = $("#grid .k-state-selected");

if (newSelection.length == 0) {
$("#" + this.options.GridName).data('kendoGrid').tbody.find("tr[data-uid='" + $("#" + this.options.GridName).data('kendoGrid').dataSource.get(this.dataId).uid + "']").addClass("k-state-selected");
}
}

},