This is a migrated thread and some comments may be shown as answers.

Events not firing in a Simple Batch Editing Enabled Grid

7 Answers 763 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Jawwad asked on 23 Dec 2014, 11:18 AM

Hello,
I have inserted a simple grid with batch editing option enabled. When I edit any cell, it gets a red mark at top left (which is of course telling that the cell got edited). But the grid is not firing any event like BatchEditCommand, Insert, Update or Delete after editing the cell. Please let me know what m I missing.
What I want is:
1. Get the data after cell got edited to make changes on my page accordingly.
2. Get the complete datasource of grid after editing for example as dataset or datatable.

Thanks.

Full page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadAjaxManager runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True" OnNeedDataSource="RadGrid1_NeedDataSource"

AllowAutomaticInserts="True" PageSize="10" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"

OnItemUpdated="RadGrid1_ItemUpdated" OnPreRender="RadGrid1_PreRender" AllowPaging="True"

AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand" >

<MasterTableView CommandItemDisplay="TopAndBottom" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">

<BatchEditingSettings EditType="Cell" />

<SortExpressions>

<telerik:GridSortExpression FieldName="ID" SortOrder="Ascending" />

</SortExpressions>

<Columns>

<telerik:GridBoundColumn DataField="Code" HeaderStyle-Width="210px" HeaderText="ProductName" SortExpression="ProductName"

UniqueName="ProductName">

<ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">

</RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowKeyboardNavigation="true"></ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

And C# Code :

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = (A function returning datatable).

}

protected void RadGrid1_BatchEditCommand(object sender, Telerik.Web.UI.GridBatchEditingEventArgs e)

{

}

protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)

{

}

protected void RadGrid1_ItemInserted(object source, GridInsertedEventArgs e)

{

}

protected void RadGrid1_ItemDeleted(object source, GridDeletedEventArgs e)

{

}

protected void RadGrid1_PreRender(object sender, EventArgs e)

{

}

7 Answers, 1 is accepted

answered on 23 Dec 2014, 02:15 PM

Well,
I did not expected that!!!!
but found out after looking for answer for last 4 hours that these events trigger only when save / cancel changes button are pressed and all the events triggered one by one.
So what I did was
1. displayed the buttons but now my own save / cancel buttons on the form wont be of any use because there are other fields too besides the grid.
2. without grid buttons, editing is of no use which is not good at all because my other form values are dependant on grid cell values. For example total cost will be calculated only when save changes will be clicked.

Still its not the solution because I need the event to be triggered upon changing the cell values. So if anybody has the solution for this, it would be appreciated.

answered on 25 Dec 2014, 12:02 AM

Hello Jawwad,

The only available way for passing the changes to the server with Batch Editing is by clicking on the "Save Changes" button or by manually calling of the method of the BatchEditingManger on client-side that will invoke saving. In any other scenario, the changes will not be passed to the server and they will be lost after a postback.

The only possible workaround that I could suggest is that you handle the button click on client-side and conditionally execute different logic for initiating a postback - if there are changes in the grid, use the grid as an initiator and if there are no changes, use the RadAjaxPanel for example.

For your convenience, following is a simple example demonstrating such approach:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function saveAll() {

var grid1 = $find("<%=RadGrid1.ClientID%>");

var batchManager1 = grid1.get_batchEditingManager();

var hasChanges = batchManager1.hasChanges(grid1.get_masterTableView());

if (hasChanges) {

batchManager1.saveTableChanges([grid1.get_masterTableView()]);

} else {

var ajaxPanel = $find("<%=RadAjaxPanel1.ClientID%>");

ajaxPanel.ajaxRequest();

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" OnAjaxRequest="RadAjaxPanel1_AjaxRequest">

<telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" Text="Save all"

OnClientClicked="saveAll"></telerik:RadButton>

<telerik:RadTextBox runat="server" ID="RadTextBox1"></telerik:RadTextBox>

<telerik:RadGrid runat="server" ID="RadGrid1" Width="200px" OnNeedDataSource="RadGrid1_NeedDataSource"

OnBatchEditCommand="RadGrid1_BatchEditCommand">

<MasterTableView EditMode="Batch">

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

And the code-behind:

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

DataTable table = new DataTable();

table.Columns.Add("ID", typeof(int));

for (int i = 0; i < 3; i++)

{

table.Rows.Add(i);

}

(sender as RadGrid).DataSource = table;

}

protected void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

saveChanges = true;

}

protected void RadGrid1_BatchEditCommand(object sender, GridBatchEditingEventArgs e)

{

saveChanges = true;

//Handle the grid updates

}

protected void Page_PreRender(object sender, EventArgs e)

{

if (saveChanges)

{

//Save the values from the other controls

}

Hope this helps.

Regards,
Konstantin Dikov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 10 Aug 2018, 08:21 AM

Hi Siri,

If you are not using an AjaxPanel you have to make sure that the RibbonBar is no performing a Postback is when when the SaveAllChanges handler is called. For example, you can attach the SaveAllChanges() function as a handler to the OnClientButtonClicking event of the control and cancel the click Postback in it:

<telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" OnClientButtonClicking="SaveAllChanges">

...

</telerik:RadRibbonBar>

<script type="text/javascript">

function SaveAllChanges(sender, args) {

var grid = window.$find(window.gridID);

var batchManager1 = grid.get_batchEditingManager();

batchManager1.saveChanges(grid.get_masterTableView());

args.set_cancel(true);

}

</script>

Regards,
Vessy
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 10 Aug 2018, 05:47 PM

Thanks so much for your response Vessy. I tried to cancel the postback but still it does not fire the server side handler for batch edit command. I am binding the radgrid at the client side with Select method, if this makes any difference.

Alternatively, I tried accessing the edited items from radgrid which is in batch edit mode and then call a Page method to update the edited items to the database explicitly. However, in this case I am unable to get the selected value of the RadCombobox which is inside the EditTemplate to save the new selected value. Looks like after the edit is made on the radgrid, Radcombobox is disappearing. Here is my .js code and GridTemplateColumn. Can you please verify and suggest ASAP?

function RibbonToolBar_ButtonClicking(sender, args) {

SaveAllChanges();

}

function SaveAllChanges(sender, args) {

var grid = window.$find(window.rgSearch);

var batchManager = grid.get_batchEditingManager();

var hasChanges = batchManager.hasChanges(grid.get_masterTableView());

if (!hasChanges) {

NotifyError("No edits made.");

}

else {

var tableView = grid.get_masterTableView();

var items = tableView.get_dataItems();

var edits = [];

for (var i = 0; i < items.length; i++) {

var rowDataItem = grid.get_masterTableView().get_dataItems()[i];

var comboCell = grid.get_masterTableView().getCellByColumnUniqueName(rowDataItem, "Category");

var priorValue = rowDataItem.getDataKeyValue("Category");

var comboValue = batchManager.getCellValue(comboCell);

if (comboValue !==priorValue ) {

var comboId = grid.get_masterTableView().get_dataItems()[i].findControl("Combo").get_value();

var idValue = rowDataItem.getDataKeyValue("ID");

var savedItem = {

ID: idValue,

EdittedId: comboId ,

};

edits.push(savedItem);

}

window.PageMethods.Update(edits);

}

<telerik:GridTemplateColumn HeaderText="Notes" HeaderStyle-Width="200" UniqueName="Category">

<ClientItemTemplate>

<span>#=CategoryName #</span>

</ClientItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox RenderMode="Native" runat="server" ID="Combo" DataValueField="ID"

DataTextField="Text" DataSourceID="dsCategories" Width="190">

</telerik:RadComboBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

answered on 13 Aug 2018, 06:57 PM

Hi Vessy,

I tried to get the edited radcombobox value from the BatchEditCellValueChanged as suggested in this link as shown below and stored all the edited values into an array, which I then used in the above mentioned SaveAllChanges method to save the edited values. And it works!

https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onbatcheditcellvaluechanged

var selectedValue = cell.getElementsByTagName("select")[0].options[cell.getElementsByTagName("select")[0].selectedIndex].value;

Posting this approach in case anyone is looking for the same issue!