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

Save Radgrid in Batcheditmode from External Button

15 Answers 372 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Karlheinz
Top achievements
Rank 1
Karlheinz asked on 07 Apr 2015, 02:13 PM

I have a ASP-Button that is supposed to do two things when clicked:

1. Call onClientClick to save radgrid content (batcheditmode) clientside, because radgrid doesnt provide serverside methode :-(
2. Fire Click  (postback) to save other content

Approach 1:

        btnOk.OnClientClick="SaveChangesToGrid();";
        btnOk.Click += new EventHandler(btnOk_Click);

- Click is fired

- javascript function "SaveChangesToGrid();" is called, but the grid doesnt save.

Approach 2:
        btnOk.OnClientClick="SaveChangesToGrid();return false;";
        btnOk.Click += new EventHandler(btnOk_Click);

- Click is not !! fired
- javascript function "SaveChangesToGrid();" is called and saves then grid.

 

Using the built-in save buttun works.

Is there any possiblity to save a RadGrid AND other page-content with only clicking one button ??

 I have searched this forum for more than a day, but nothing works for me.

Thanks for any help

 

 

 




onClientItemClicked / onClientItemClicking prevents that itemClick is fired.

15 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 09 Apr 2015, 10:07 AM
Hello Karlheinz,

When you need to initiate the saving for RadGrid in Batch edit mode, you need to ensure that the used button will not perform postback on its own (no server-side OnClick event of the button). That is why your second approach is working correctly. 

Nevertheless, you can take a look at the following example, which demonstrates how to save RadGrid changes and retrieve changes from other controls at the same time:
<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("saveChanges");
            }
        }
    </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:
private bool saveChanges = false;
 
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)
{
    if (e.Argument == "saveChanges")
    {
        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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Karlheinz
Top achievements
Rank 1
answered on 13 Apr 2015, 04:14 PM

Hello Konstantin,

 thanks for your help.

I think, in your example, button and RadGrid must reside on the same ajax-panel.

This is not possible in our page-layout.

Is there any other approach to save a RadGrid in batch-edit-mode from external button with postback ??

Thanks in advance for any help. 

 

0
Konstantin Dikov
Telerik team
answered on 14 Apr 2015, 10:39 AM
Hi Karlheinz,

If you do not want to use the RadAjaxPanel approach, you can use a HiddenField control and set some value to it when you click on your external "Save" button. Then, on the server-side PreRender event you can retrieve that value and determine whether or not to save the changes from the other controls.

You should keep in mind that you need to reset the value in the HiddenField controls after you retrieve it.

Hope this helps.


Best Regards,
Konstantin Dikov
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Karlheinz
Top achievements
Rank 1
answered on 14 Apr 2015, 07:21 PM

Hi Konstantin,

thanks for your answer

 

Hello Telerik,

Realy great control design

Providing a Grid with batch-edit-mode that can be saved only with time-consuming workarounds is really a great idea :-(

 

0
Emad
Top achievements
Rank 1
answered on 05 Mar 2016, 09:20 AM

Hi,

I'm using external button to save two grids in batch edit mode, it's working fine.

But I'm facing issue when required validation fires code still working where it should stop ?!!

Please advice..

 

function saveTowGrids() {
            try{
                var grid1 = $find("<%= RadGrid1.ClientID %>");
                var masterTable1 = grid1.get_masterTableView();
                var grid2 = $find("<%= RadGrid2.ClientID %>");
                var masterTable2 = grid2.get_masterTableView();
                var batchEditManager = grid2.get_batchEditingManager();
                var tables = [];
                tables.push(masterTable1);
                tables.push(masterTable2);
                batchEditManager.saveTableChanges(tables);
                alert("save completed");
            } catch (e) { alert(e);}
        }

 

Thanks,

Emad

0
Konstantin Dikov
Telerik team
answered on 07 Mar 2016, 08:51 AM
Hello Emad,

You could use the BatchEditingManager and see if there is open row or cell for editing and initiate the saving only if no cell/row is opened:
<telerik:RadCodeBlock runat="server">
    <script>
        function saveGrid(sender, args) {
            var grid = $find("<%= RadGrid1.ClientID%>");
            var tableView = grid.get_masterTableView();
            var batchManager = grid.get_batchEditingManager();
            if (batchManager.get_currentlyEditedRow() || batchManager.get_currentlyEditedCell()) {
                alert("pending editing");
            }
            else {
                alert("could initiate save");
                //initate the save through the BatchEditingManager
            }
        }
    </script>
</telerik:RadCodeBlock>

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
0
Emad
Top achievements
Rank 1
answered on 07 Mar 2016, 09:09 AM
Thanks, It's working fine..
0
Kathleen Johnson
Top achievements
Rank 1
answered on 25 Jul 2017, 05:16 PM
Hi, Konstantin. I am facing an issue trying to save two grids in batch edit mode. Here is a link to my issue http://www.telerik.com/forums/how-do-i-save-2-radgrids-by-only-1-outside-button#-EZxg2vVKkqERtTkc7QI1w
0
Srinivas
Top achievements
Rank 1
answered on 01 Mar 2019, 04:59 PM

Hi Konstantin,

Could you please look into my scenarios to save all 3 Rad Grid Rows on Save button click event on code behind/server side please advise me. I have created a support ticket: 1398477

Note: I want to achieve this without using Ajax Panel.

 

Regards,

Srinivas

0
Marin Bratanov
Telerik team
answered on 04 Mar 2019, 08:09 AM
Hi Srinivas,

I have just answered your support ticket and I am pasting the information here for anyone else with a similar question.

The general approach is described in the following article: https://www.telerik.com/support/kb/aspnet-ajax/grid/details/how-to-update-batch-edit-grids-from-outside-button-and-also-save-external-user-input. The key thing is to use the batch editing manager client API to save the changes for the table views that have changes.

The loading panel is determined by your AJAX setup and so the grids must not be initiators of AJAX requests that show a loading panel.


Regards,
Marin Bratanov
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.
0
Uli
Top achievements
Rank 1
Veteran
answered on 30 Dec 2020, 07:58 PM
Do the codes work if a row is deleted? I tried, but the extern "save" button doesn't trigger the RadGrid1_BatchEditCommand().
0
Doncho
Telerik team
answered on 04 Jan 2021, 08:08 AM

Hi Uli,

I would assume you refer to the code in the sample project linked by Marin in his last reply in this thread.

Yes, the code should work fine for deleting entries as well, and the BatchEditCommand server-side event should fire for each RadGrid whose TableView is passed to the saveTableChanges() method (MasterTableView(s) of RadGrid1 and RadGrid2 in the sample):

function saveAllChanges() {
    var grid1 = $find("<%= RadGrid1.ClientID %>");
        var masterTable1 = grid1.get_masterTableView();
        var grid2 = $find("<%= RadGrid2.ClientID %>");
    var masterTable2 = grid2.get_masterTableView();
    var batchEditManager = grid2.get_batchEditingManager();
        //get the batch edit grids you want to save
    var tables = [];
    tables.push(masterTable1);
    tables.push(masterTable2);
    var isDirty = false;
    for (var i = 0; i < tables.length; i++) {
        if (batchEditManager.hasChanges(tables[i])) {
            isDirty = true;
            break;
        }
    }
    if (isDirty) {
        batchEditManager.saveTableChanges(tables);
    }
    return isDirty;
}
On the other hand, we do have one problem reported in our feedback portal, concerning the deleted entries in Batch editing mode when the grid is bound to Telerik ClientDataSource, see hasChanges() method clears flags for deleting records. If this is the case here, please try the suggested workaround in the comments below feedback item and let us know if that helps.

In case you are not facing a scenario similar to the one in the feedback item linked above, please share the markup declaration of the RadGrid controls along with the related code-behind logic and the relevant JavaScript code, so we can have a complete overview and be able to help.

Looking forward to hearing from you.

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Uli
Top achievements
Rank 1
Veteran
answered on 08 Jan 2021, 01:31 PM

[quote]Uli said:Do the codes work if a row is deleted? I tried, but the extern "save" button doesn't trigger the RadGrid1_BatchEditCommand().[/quote]

HightlightDeleteRows should be false

 

0
Uli
Top achievements
Rank 1
Veteran
answered on 08 Jan 2021, 01:33 PM
my solution: HighlightDeletedRows = "false"
0
Doncho
Telerik team
answered on 08 Jan 2021, 03:39 PM

Hi Uli,

I am glad to hear you have found a feasible solution for the case. 

Indeed the bug reported in the feedback item linked in my previous message occurs only when HightlightDeleteRows is set to "true".

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Karlheinz
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Karlheinz
Top achievements
Rank 1
Emad
Top achievements
Rank 1
Kathleen Johnson
Top achievements
Rank 1
Srinivas
Top achievements
Rank 1
Marin Bratanov
Telerik team
Uli
Top achievements
Rank 1
Veteran
Doncho
Telerik team
Share this question
or