Save Radgrid in Batcheditmode from External Button

[Karlheinz]

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.

[Konstantin Dikov]

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

 

 

[Karlheinz]

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. 

 

[Konstantin Dikov]

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

 

 

[Karlheinz]

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 :-(

 

[Emad]

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

[Konstantin Dikov]

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

[Emad]

Thanks, It's working fine..

[Kathleen Johnson]

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

[Srinivas]

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

[Marin Bratanov]

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

[Uli]

Do the codes work if a row is deleted? I tried, but the extern "save" button doesn't trigger the RadGrid1_BatchEditCommand().

[Doncho]

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

[Uli]

[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

 

[Uli]

my solution: HighlightDeletedRows = "false"

[Doncho]

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