Batch Editing - Need to have the save changes button outside the grid

[licensing]

Can you suggest how can we find only the changed rows in a batch Editing Grid and read them one by one provided the Save Button is placed outside the grid.

[Angel Petrov]

Hello,

I am experiencing difficulties understanding the requirement. If I understand correctly you want to trigger the saving of the changes from an outer button. This can be achieved by obtaining a reference to the batch editing manager of the grid and calling saveChanges. A sample of this can be observed in the code snippet below:

<telerik:RadButton AutoPostBack="false" Text="SaveChanges" ID="SaveChangesButton" runat="server" OnClientClicked="SaveChangesInGrid"></telerik:RadButton>

JavaScript:

function SaveChangesInGrid(sender,args) {
            var grid = $find('<%=RadGrid1.ClientID%>');
            grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
        }

More about information about the commands which can be fired from the batch editing manager you can find here.

Regards,
Angel Petrov
Telerik

[licensing]

Further to your reponse:

You have proposed solution based out of client side scripting. We're not using ObjectDataSource therefore require a solution based on server side scripting. Please note that we should be able to traverse through each control like drop down and text boxes on all changed/edited rows given in the hierarchical grid.

Scenario Revisited: There is RAD hierarchical grid having controls like drop down boxes and text boxes and a Submit button outside the grid. Submit button should be able to look for values from the grid(master as well as corresponding child row) to fetch edited value from only edited rows and make them available on the server side.

[Angel Petrov]

Hello,

Let me first explain how the batch editing mode works. When EditMode is set to Batch an editor is created for each column and is only shown when a user clicks on a certain cell to edit it's content. Later when the cell value is changed a client side object is created which reflect the changes. If another cell from the same column is opened for editing the editor is being repopulated in order to expose the value from that cell. This logic is being executed on the client using JavaScript. The values are passed to the server once the Save Changes button is pressed. That said you have two options to make the values available server-side.

1. Extract them client-side using the batch editing manager and pass them to the server via an AJAX request.
2. Trigger the saving of the changes and extract the values by subscribing to the OnBatchEditCommand(the Commands collection in the arguments reflects only the edited rows)

   protected void RadGrid1_BatchEditCommand(object sender, GridBatchEditingEventArgs e)
   {
       foreach (GridBatchEditingCommand command in e.Commands)
       {
           Hashtable newValues = command.NewValues;
           Hashtable oldValues = command.OldValues;
           string newFirstName = newValues["FirstName"].ToString();
       }
   }

Also note that if the edit mode is set to Batch and a control on the page postback the changes made by the user will be lost as RadGrid will retrieve it's initial state.

Regards,
Angel Petrov
Telerik

[Vinomanoharan]

Hi 

I have a problem by triggering the save changes button outside the grid. 

Here is my question. I have Ribbon Bar and menu item on it.
<telerik:RadRibbonBar runat="server" ID="demandSolutionsRibbon" EnableMinimizing="true" EnableQuickAccessToolbar="true" OnMenuItemClick="RibbonMenuItemClick" 
                        OnButtonClick="ribbonButtonClick" 
                        OnClientButtonClicked="SaveAllPanels"
                         OnClientButtonToggled="toggleButton">
                        <ApplicationMenu Text="File">
                            <Items>
                                <telerik:RibbonBarApplicationMenuItem Text="Save"  ImageUrl="Icons/icon_save.png" />
                                <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="Icons/icon_open.png" />
                                <telerik:RibbonBarApplicationMenuItem Text="Log Out" ImageUrl="Icons/icon_logout.png" />
                            </Items>
                        </ApplicationMenu> ..

On clicking the save button, SaveAllPanels function is being called.

function SaveAllPanels() {
            $('.SS').each(function () {
                var clientId = $(this).attr('value');
                var grid = $find(clientId);
                grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
            });
        }

The problem is grid.get_batchEditingManager().saveChanges(grid.get_masterTableView()) this does not invoke the SpreadSheetDataGrid_BatchEditCommand method

But the same is working fine with a normal button.

Please help me to resolve this issue.

Thanks
Vino

[Angel Petrov]

Hi Vino,

Could you ensure that a reference to the grid object is returned? Have you tried debugging the client code? Additionally I noticed that the saveChanges method will be called for a number of grids. Note that once a postback is triggered from one of grids the changes in the others may be lost and calling saveChanges for them will not work. Please provide a more detail explanation of the exact scenario so we could investigate further.

Regards,
Angel Petrov
Telerik

[Vinomanoharan]

Hi Angel Petrov

Thanks for your response, My scenario is as follows.

I have a page with four grid with batch edit cell mode. User will do changes in any of the grid. Finally they will click the ribbon button on top to persist all those information in DB. 

Blocking
1. I can call the savechanges in javascript for each grid. But the ribbon button will have a server side event.
2. Even though if i  call the save changes in javascript for one grid, the other grid changes are lost because of the postback.

Help Needed.

1. Is it possible to get the changed (old and new values in clientside) similar to what i get Batch Edit command server side event. (Or)
2. Is it possible to get the changed values (old and new values ) in server side like post back or ribbon button click? (Or)
3. Do have an other option

Thanks
Vino

[Angel Petrov]

Hi Vino,

The changes which the user had made can be obtained both client-side and server-side. For the first you use the changes collection of the batch editing manager:

$find('RadGrid1').get_batchEditingManager()._changes

Note however that this is an internal collection and we do not recommend it's use. If it is modified in some way this may cause unexpected behavior.

For the second and more precisely obtaining the changes of all the grids server-side you can call the saveTableChanges method. It receives an array of GridTableView objects and if the MasterTableViews of the different grids are passed as a parameter it will force every grid to fire it's BatchEditCommand event. Thus you should be able to obtain the new and old values for every changed record in every grid. Please find in attachments a sample website which demonstrates the mentioned.

The provided example should help you in meeting the requirements and updating all the grids using server-side logic.

Regards,
Angel Petrov
Telerik

[Mohammad]

hi Angel Petrov ,
i have issue when using two grid Batch in same web form if i want to save changes of the first grid and second shoud not change , i know that
RadGrid_BatchEditCommand do PostBack cause second grid to rebind again what i should do to fix this issue

Thanks & Best Regards,

[Angel Petrov]

Hi Mohammad,

Actually when the BatchEditCommand event is triggered only a postback will occur which will lead to the disposal of the client object where the changes in the second grid are stored. In order to avoid this you can wrap the grids in different RadAjaxPanels so that only a part of the page gets updated. An example of this is available in the code snippet below:

ASPX:

<telerik:RadAjaxPanel runat="server">
           <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server">
               <MasterTableView EditMode="Batch">
               </MasterTableView>
           </telerik:RadGrid>
       </telerik:RadAjaxPanel>
       <telerik:RadAjaxPanel runat="server">
           <telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="SqlDataSource2">
               <MasterTableView EditMode="Batch">
               </MasterTableView>
           </telerik:RadGrid>
       </telerik:RadAjaxPanel>

Regards,
Angel Petrov
Telerik

[SK]

Hi,

 I have used the batch editing for a checkbox coloumn in grid. I want to save it, only with the click of the checkbox. Not with the save button. How can I save it without the save button ? When I click on the checkbox, it has to be saved automatically. Can you please suggest me an idea .

[Princy]

Hi Sneha,

I guess you have a GridCheckBoxColumn in your grid and on its click you want to save the grid. One suggestion is that you can attach an onclick event to the checkbox and call the saveChanges() in that event.

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
  if (e.Item is GridDataItem)
  {
    GridDataItem dataItem = (GridDataItem)e.Item;
    CheckBox chkSave = (CheckBox)dataItem["ColumnUniqueName"].Controls[0];
    chkSave.Enabled = true;
    chkSave.Attributes.Add("onclick", "oncheckedChaned();");
  }
}

JS:

<script type="text/javascript">
  function oncheckedChaned() {
     var grid = $find('<%=RadGrid1.ClientID%>');
     grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
    }
</script>

Thanks,
Princy

[SK]

Thanks Princy.

[Jorges]

Hello,

I created a form and I wish I could click on the button to validate retrieve the information that is on my Radgrid and my text fields and Register as an in my database , but I do not know how to recover the fields edit my Radgrid . I have put attriut EditMode = " Batch".

 thank you in advance

[Konstantin Dikov]

Hi Jorges,

With Batch Edit mode it is not possible to perform server-side validation and preserve the changes out-of-the-box. Although that you can use Princy's approach for manually initiating the saving of the changes through the BatchEditingManager of the grid, after the postback, all changes will be lost (unless you save them in the database).

For validation the RadGrid's values before initiating the postback I would suggest that you implement a client-side function that on the button's client click event will traverse all data items, retrieve the values that you need to validate (through the BatchEditingManager and its getCellValue(cell) method) and determine whether to inform the user about the failed validation or initiate the saving. 

Detailed information about Batch Editing could be found in the following article:

• RadGrid - Batch Editing

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Abitar]

Hello,

I am using a RadGrid in Batch edit mode. On each row of this RadGrid, I have an ImageButton that must open a PopUp to fill data related to the RadGrid (hidden columns). I imagine that saving data filled in the PopUp must happen on server side so the click handler on the ImageButton must fire the SaveChanges action of the RadGrid then opens the PopUp. After that, on validating the form in the PopUp, I want to save/update data in the RadGrid.

Am I thinking wrong ?

 

here is a portion of my code for the ImageButton, onClientClick and OnBatchEditCommand : 

 <telerik:GridTemplateColumn HeaderText="Données complémentaires *" HeaderStyle-Width="92px" UniqueName="AdditionalData" DataField="AdditionalData">
                                                    <ItemTemplate>
                                                        <asp:ImageButton ID="DC" ImageUrl="../../../../images/magnifier.png" runat="server" OnClientClick="ShowPopUp();return false;" />
                                                    </ItemTemplate>
                                                    <EditItemTemplate>
                                                        <asp:ImageButton ID="DC" ImageUrl="../../../../images/magnifier.png" runat="server" OnClientClick="ShowPopUp();return false;" />
                                                    </EditItemTemplate>
                                                </telerik:GridTemplateColumn>

 

 function ShowPopUp() {
                var grid = $find('<%=RadGrid.ClientID%>');
                grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());

                var oWnd = $find("<%= RadWindow.ClientID %>");
                oWnd.show();
                oWnd.setSize(600, 450);
            }​

 protected void RadGridAffilies_BatchEditCommand(object sender, Telerik.Web.UI.GridBatchEditingEventArgs e)
        {
            foreach (GridBatchEditingCommand command in e.Commands)
            {
                Hashtable newValues = command.NewValues;
                Hashtable oldValues = command.OldValues;

                string Nom = newValues["Nom"].ToString();
            }
        }

 The problem is that the e.Commands is equal 0 when I click on the ImageButton. But when doing this on a button outside the RadGrid that works well.

 

Thanks for your help !

Abbas

 

[Konstantin Dikov]

Hi Abitar,

If you need to save any changes that you have in the grid before opening the PopUp you will have to initiate the saving through the BatchEditingManager, but you will not be able to open the popup in this manner, because once you call the saveChanges method, a postback will be initiated.

As for the empty Commands collection, if you have changes in the grid, this should not occur, so I would suggest that you inspect your browser's console and see if there are any JavaScript errors on the page when you click on the ImageButton.

If any further assistance is needed I would suggest that you open a regular support ticket and attach the markup and the code-behind of your page, so we can test them locally.


Regards,
Konstantin Dikov
Telerik

[Abitar]

Hello Konstantin,

 Thank you for your reply.

I will try to find out another way to manage this.

Regards,

Abitar

[essai]

Greet this work perfectly 

[essai]

That works perfectly