How to save all changes to a page (including RadGrids)?

[Francesco]

Hi, I have a situation like this (see the attach image), and I have some dilemma.

I have in my page several radgrids, populated with the Advanced Databinding. I use OnNeedDataSource correctly for taking data from my database.

In my scenario the user can press on the "Add row" button and, through a EditForm, create a new row for the grid. The user can see this row, but this row is not saved immediatly on the database. I want to save this new row (and other changes and informations in the page) only after pressing the Save button.

But I have encountered many problems to do this. For example I have some difficulties with managing rebinds and postback... So, I'm here to ask you if exist some "Best practice" to do this kind of stuff.

Thank you for your attention.

 

 

 

[Konstantin Dikov]

Hello Francesco,

Although that there is no built-in option for achieving such requirement, you can refer to the following example:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function saveAll() {
            var grid1 = $find("<%=RadGrid1.ClientID%>");
            var grid2 = $find("<%=RadGrid2.ClientID%>");
            var batchManager1 = grid1.get_batchEditingManager();
            var batchManager2 = grid2.get_batchEditingManager();
            var hasChanges = batchManager1.hasChanges(grid1.get_masterTableView()) || batchManager2.hasChanges(grid2.get_masterTableView());
            console.log(hasChanges);
            if (hasChanges) {
                batchManager1.saveTableChanges([grid1.get_masterTableView(), grid2.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:RadGrid runat="server" ID="RadGrid2" Width="200px" OnNeedDataSource="RadGrid1_NeedDataSource" OnBatchEditCommand="RadGrid2_BatchEditCommand">
        <MasterTableView EditMode="Batch">
        </MasterTableView>
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

And the code-behind:

protected void Page_Load(object sender, EventArgs e)
{
}
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)
{
    //save the other controls data
}

protected void RadGrid1_BatchEditCommand(object sender, GridBatchEditingEventArgs e)
{
}
protected void RadGrid2_BatchEditCommand(object sender, GridBatchEditingEventArgs e)
{
}

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress