RadGrid Batch Update with AjaxRadManager

[Swanand]

Hi,

 

I am trying to implement Batch edit mode for radGrid where on cell value changed triggers a javascript function. This function saves the changes made to the grid. I have this part working.

I wanted to do the same call using ajax but I couldn't find a way to do it. Following are the required details of this problem.

1. RadGrid is being added from codebehind and is added in a radPane like this.radpane.Controls.Add(RadGrid).

2. RadAjaxManager exists on the MasterPage and I am able to call the instance of it on my page.

 

Can someone guide me how to get this to work?

Thanks,

Swanand Nalawade

[Doncho]

Hi Swanand,

Here is what I would suggest respectively to the points in your message:

1. For Ajaxifying programmatically created controls you should add the respective AjaxSettings programmatically as well, check out the Add AjaxSettings Programmatically article.
2. In order to Ajaxify controls on the Content page, and since there is already a RadAjaxManager on the Master Page, you should add a RadAjaxManagerProxy instance to the Content Page, which you can use for adding the needed AjaxSettings. Check out the following articles:
   • RadAjaxManagerProxy Overview
   • Understanding AJAX Controls - Using RadAjaxManagerProxy section

Here is a basic sample code for Ajaxifying Programaticaly created controls on a Content page:

MasterPage Markup

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

ContentPage Markup

<asp:Content ID="content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

    <asp:Panel ID="Panel1" runat="server"></asp:Panel>
</asp:Content>

ContentPage Code-behind

protected void Page_Init(object sender, EventArgs e)
{
    var button = new RadButton();
    button.Text = "MyButton";
    button.ID = "RadButton1";
    button.Click += new EventHandler(button_OnClick);
    var tb = new TextBox();
    tb.ID = "TextBox1";
    Panel1.Controls.Add(button);
    Panel1.Controls.Add(tb);
}
protected void Page_Load(object sender, EventArgs e)
{
    var button = Panel1.FindControl("RadButton1") as RadButton;
    var textbox = Panel1.FindControl("TextBox1") as TextBox;
    RadAjaxManagerProxy1.AjaxSettings.AddAjaxSetting(button, textbox, null);
}
protected void button_OnClick(object sender, EventArgs e)
{
    var textbox = Panel1.FindControl("TextBox1") as TextBox;
    textbox.Text += "+ ";
}

Side note: Creating a RadGrid programmatically has its specifics, so it might be useful to check out the Creating a RadGrid Programmatically article.

I hope this will prove helpful!

Kind regards,
Doncho
Progress Telerik

[Swanand]

Hi Doncho,

Thanks for your response. I have a similar setup working for a button click in my project which works fine.

But for my this case, I do not have a server side event being fired like OnClick. I have a Clientside event fired on RadGrid called OnBatchEditCellValueChanged. This function further runs following code to save changes to the Datatable:

var batchManager = grid1.get_batchEditManager();

batchManager.saveTableChanges([grid1.get_masterTableView()]);

 

When I run the above code, it triggers the UpdateCommand set for my radGrid.

 

Thus even if I add the radgrid to AjaxManager and set its updateControl to radgrid, the page never enters the Ajax mode. Instead does a post back. I was wondering if there is a way I could trigger an Ajax call for that from Javascript when I run a call to my UpdateCommand? Or any other path I need to follow would be great help too.

Thanks once more,

Swanand Nalawade

[Doncho]

Hi Swanand,

I find it important to mention that in a scenario where the RadGrid performs frequent PostBack requests to the server and when it comes to autosaving on cell change, we recommend using the InPlace editing mode, find more information on when Batch editing is suitable/not suitable for use in the RadGrid Batch Editing Templates and Specifics article.

However, If you have implemented a logic that works as desired when Ajax is disabled, It should work fine on a properly Ajaxified RadGrid also.

You should have in mind that AJAX may sometimes hide both server and client-side errors, we highly recommend while developing the application, to ensure that the functionality works without adding AJAX.
Therefore, please temporarily disable any AJAX on the page (if present) and use the Browser's DevTools Console to see whether there are any script or server errors interfering, and make sure that the application works without AJAX, see Get more descriptive errors by disabling AJAX

Below is a sample code for achieving behavior similar to the desired declaratively (the same structure can be created programmatically).

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function batchEditClosed(sender, args) {
            var batchManager = sender.get_batchEditingManager();
            var masterTable = sender.get_masterTableView();
            setTimeout(function () {
                if (batchManager.hasChanges(masterTable)) {
                    batchManager.saveChanges(masterTable);
                }
            }, 0);
        }
    </script>
</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings>
        <ClientEvents OnBatchEditClosed="batchEditClosed" />
    </ClientSettings>
    <MasterTableView DataKeyNames="OrderID" EditMode="Batch" DataSourceID="SqlDataSource1">

You may also find useful to check out the Batch Editing Client-side API

I hope this will prove helpful!

Kind regards,
Doncho
Progress Telerik