Hi telerik team:
I want to cancel editing on client side without running "OnCommand" event, because NeedDataSource rebind current grid data.
How can I acomplish that functionality?
Attached is the issue I'm seeing. How could I run "Cancel" editing grid on client side, outside "OnCommand" event?
<telerik:RadGrid RenderMode="Lightweight" ID="grdPTOPlanItemRates" GridLines="None" runat="server" AllowAutomaticDeletes="false" OnNeedDataSource="grdPTOPlanItemRates_NeedDataSource"
AllowAutomaticInserts="false" PageSize="10" Skin="Outlook"
AllowAutomaticUpdates="false" AllowPaging="True"
AutoGenerateColumns="False">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="PTOPlanItemRateId" ClientDataKeyNames="PTOPlanItemRateId" NoDetailRecordsText="No PTO Plan Item Rates Records to display"
NoMasterRecordsText="No PTO Plan Item rates records were found" CommandItemSettings-AddNewRecordText="Add New" CommandItemSettings-ShowSaveChangesButton="false" CommandItemSettings-ShowCancelChangesButton="false" CommandItemSettings-ShowRefreshButton="false"
HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">
<BatchEditingSettings EditType="Row" />
<Columns>
<telerik:GridButtonColumn ConfirmText="Delete this row?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" HeaderText="" HeaderStyle-Width="50px"
CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn UniqueName="PTOPlanItemRateId" Visible="false" DataField="PTOPlanItemRateId"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Rate" HeaderStyle-Width="70px" HeaderText="Rate" SortExpression="Rate"
UniqueName="Rate">
<ColumnValidationSettings EnableRequiredFieldValidation="true">
<RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
</RequiredFieldValidator>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="StartYear" HeaderStyle-Width="70px" HeaderText="Start Year" SortExpression="StartYear"
UniqueName="StartYear">
<ColumnValidationSettings EnableRequiredFieldValidation="true">
<RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
</RequiredFieldValidator>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EndYear" HeaderStyle-Width="70px" HeaderText="End Year" SortExpression="EndYear"
UniqueName="EndYear">
<ColumnValidationSettings EnableRequiredFieldValidation="true">
<RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
</RequiredFieldValidator>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="true">
<ClientEvents />
</ClientSettings>
</telerik:RadGrid>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#" onclick="javascript: SavePTOPlanItemRates();" class="button primary">Save</a>
<a href="#" onclick="javascript: CancelChanges();" class="button primary">Cancel Changes</a>
</td>
</tr>
</table>
<script>
function OpenPTOPlanItemRates(payTypeId) {
var exitFlag = false;
currentPayTypeId = payTypeId;
$.ajax({
type: "POST",
url: "ConfigurationHandler.ashx?w=getPTOPlanItemRates&PTOPlanId=" + currentPTOPlanId + "&PayTypeId=" + payTypeId,
async: false,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Error:' + textStatus);
alert('Error:' + errorThrown);
},
success: function (data, textStatus, XMLHttpRequest) {
if (data != 'undefined')
{
if (data.length > 0) {
if (data == "logout") {
exitFlag = true;
}
else {
$("#divPTOPlanItemRates").dialog({
autoOpen: true,
title: "Add/Edit PTO Plan Item Rates",
width: "600px",
modal: true
});
updateGridPTOPlanItemRates(data);
}
}
else {
//
alert("No data");
}
}
}
});
if (exitFlag) {
parent.location = "Login.aspx";
return false;
}
}
function updateGridPTOPlanItemRates(data) {
//var data = [{ "ID": "1", "Rate": "1", "StartYear": "1998", "EndYear": "1999" }, { "ID": "2", "Rate": "2", "StartYear": "2005", "EndYear": "20018" }];
var masterTableView = $find("<%= grdPTOPlanItemRates.ClientID %>").get_masterTableView();
if (data != null) {
var list = JSON.parse(data);
masterTableView.set_dataSource(list.PTOPlanItemRatesList);
masterTableView.dataBind();
}
else {
//rebind with no data
masterTableView.set_dataSource([]);
masterTableView.dataBind();
}
}
function CancelChanges()
{
OpenPTOPlanItemRates(currentPayTypeId);
}
function SavePTOPlanItemRates()
{
var grid = $find('<%=grdPTOPlanItemRates.ClientID%>');
var masterView = grid.get_masterTableView();
var jsonArr = [];
var row = null;
var recordsCount = masterView.get_dataItems().length;
for (var i = 0; i < recordsCount; i++) {
row = masterView.get_dataItems()[i];
jsonArr.push({
rate: row.get_cell('Rate').innerText,
startYear: row.get_cell('StartYear').innerText,
endYear: row.get_cell('EndYear').innerText,
});
}
SavePTOIRChangesAjaxCall(jsonArr, recordsCount);
}
function SavePTOIRChangesAjaxCall(oData, recordsCount)
{
var exitFlag = false;
var saved = false;
$.ajax({
type: "POST",
url: "ConfigurationHandler.ashx?w=SavePTOItemRates&PTOPlanId=" + currentPTOPlanId + "&PayTypeId=" + currentPayTypeId + "&RecordsCount=" + recordsCount,
async: false,
data: "data=" + JSON.stringify(oData),
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('' + textStatus);
alert('' + errorThrown);
},
success: function (data, textStatus, XMLHttpRequest) {
//$("#status img").hide();
if (data.length > 0) {
if (data == "logout") {
exitFlag = true;
}
else {
saved = true;
}
}
}
});
if (exitFlag) {
parent.location = "Login.aspx";
return false;
}
if (saved)
{
alert('PTO Plan Item Rates were succesfully saved.');
}
}
</script>