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

18 posts, 1 answers
  1. licensing
    licensing avatar
    6 posts
    Member since:
    May 2012

    Posted 01 Jul 2013 Link to this post

    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.
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 03 Jul 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. licensing
    licensing avatar
    6 posts
    Member since:
    May 2012

    Posted 18 Jul 2013 Link to this post

    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.
  5. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 23 Jul 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Vinomanoharan
    Vinomanoharan avatar
    4 posts
    Member since:
    Sep 2013

    Posted 18 Oct 2013 Link to this post

    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
  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 23 Oct 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Vinomanoharan
    Vinomanoharan avatar
    4 posts
    Member since:
    Sep 2013

    Posted 23 Oct 2013 Link to this post

    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
  9. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 28 Oct 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. Mohammad
    Mohammad avatar
    1 posts
    Member since:
    Jan 2014

    Posted 23 Jan 2014 Link to this post

    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,
  11. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 28 Jan 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  12. SK
    SK avatar
    3 posts
    Member since:
    Jun 2014

    Posted 25 Jun 2014 in reply to Angel Petrov Link to this post

    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 .
  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Jun 2014 in reply to SK Link to this post

    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
  14. SK
    SK avatar
    3 posts
    Member since:
    Jun 2014

    Posted 26 Jun 2014 in reply to Princy Link to this post

    Thanks Princy.
  15. Jorges
    Jorges avatar
    2 posts
    Member since:
    May 2015

    Posted 29 May 2015 Link to this post

    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

  16. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 03 Jun 2015 Link to this post

    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:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Abitar
    Abitar avatar
    22 posts
    Member since:
    May 2015

    Posted 25 Aug 2015 Link to this post

    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

     

  18. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 28 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  19. Abitar
    Abitar avatar
    22 posts
    Member since:
    May 2015

    Posted 28 Aug 2015 in reply to Konstantin Dikov Link to this post

    Hello Konstantin,

     Thank you for your reply.

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

    Regards,

    Abitar

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017