Grid refresh update issue after saving data from rad window form

[Marc Arbesman]

We have a radgrid which when adding or editing records, opens a separate form in a radwindow with it's own .aspx page.  We have run into an issue when attempting to add a new, or edit a record from a radwindow and upon clicking the save button in the window, we cannot get the corresponding radgrid to refresh the data properly.  The data saves properly in the database, the window closes, the ajax request method server side runs, and rebind method server side for the grid also runs when called from the ajax request method.

This used to work on the older RadControls back before we upgraded the site to the ASP.NET AJAX RadControls.  The following sets of code are how we open the radwindow, save the data and close the radwindow, call the ajaxrequest method, and call the grid rebind method.

We open the radwindow dynamically through the itemcommand event of the radgrid as such:

Private Sub radgPayRequest_ItemCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) Handles radgPayRequest.ItemCommand
        If LCase(e.CommandName) = LCase("AddNewPaymentRequest") Then
            'Set the cache values to pass to the window
            Common.Cache.CacheSiteInfo.Cache_PageMode = EnumUI.PageMode.AddNew

            'Open the radwindow
            Call RadWindowSettings_AdminPilotPayRequest()
End If
End Sub

Private Sub RadWindowSettings_AdminPilotPayRequest()
        Dim rwPilotPayRequest As New RadWindow

        rwPilotPayRequest.InitialBehaviors = WindowBehaviors.None
        rwPilotPayRequest.NavigateUrl = "Pilot/AdminPilotPayRequest.aspx"
        rwPilotPayRequest.Height = System.Web.UI.WebControls.Unit.Pixel(500)
        rwPilotPayRequest.Width = System.Web.UI.WebControls.Unit.Pixel(725)
        rwPilotPayRequest.VisibleStatusbar = False
        rwPilotPayRequest.Modal = False
        rwPilotPayRequest.Behaviors = WindowBehaviors.Close
        rwPilotPayRequest.DestroyOnClose = True
        rwPilotPayRequest.VisibleOnPageLoad = True

        radwWindowMan.Windows.Add(rwPilotPayRequest)
    End Sub

This is the save button method from the window, which saves the new or existing record, and closes the window:

Private Sub btnSave_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSave.Click
        Try
            'We run the save event here, which saves the data correctly to the database

            'Close the window
            ClientScript.RegisterStartupScript(Page.GetType](), "CloseWindow", "<script language=""javascript"">CloseRadWindow();</script>")
        End Try
    End Sub

This is our javascript method, located in an external .js file which closes the radwindow:

function GetRadWindow()
    {
        var oWindow = null;
        if (window.radWindow) oWindow = window.radWindow;
        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
        return oWindow;
    }

function CloseRadWindow()
    {
        var oWindow = GetRadWindow();

        oWindow.Close();
    }

After the save button event runs from the aspx page in the radwindow, it accessed the refreshGrid() javascript method on the aspx page which contains the radgrid.  This is our code to get the id of the radajaxmanager to begin the Ajax Request:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script TYPE="text/javascript">
            function refreshGrid(arg)
            {
                if(!arg)
                {
                    $find("<%=radaManager.ClientID %>").ajaxRequest("Rebind");
                }
                else
                {
                    $find("<%=radaManager.ClientID %>").ajaxRequest("RebindAndNavigate");
                }
            }
        </script>
    </telerik:RadCodeBlock>

The Ajax Manager we have on the same .aspx page as the radgrid has the following settings applied:

<telerik:RadAjaxManager ID="radaManager" RUNAT="server" OnAjaxRequest="radaManager_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AJAXCONTROLID="radaManager">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl CONTROLID="radgPayRequest"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AJAXCONTROLID="radgPayRequest">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl CONTROLID="radgPayRequest"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

The following code is the Ajax Request run server side:

Protected Sub radaManager_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) Handles radaManager.AjaxRequest
        Select Case e.Argument
            Case "Rebind"
                radgPayRequest.MasterTableView.SortExpressions.Clear()
                radgPayRequest.MasterTableView.GroupByExpressions.Clear()
                radgPayRequest.MasterTableView.Rebind()
            Case "RebindAndNavigate"
                radgPayRequest.MasterTableView.SortExpressions.Clear()
                radgPayRequest.MasterTableView.GroupByExpressions.Clear()
                radgPayRequest.MasterTableView.Rebind()
        End Select
    End Sub

Then the rebind hits our NeedsDataSource Method and in theory should rebind the grid and refresh the data.  However, after we run this process the grid does not refresh the data, unless we hit the refresh command link in the command header we created on the grid.

We have confirmed through testing that our Ajax Request event is being accessed and running the grid rebind method in the server side code.  We are not receiving any javascript errors either.

On the older RadControls we had to force the postback on the page to get the AjaxManager to properly reload the grid data, which we found through the forums:

Protected Overrides Sub RaisePostBackEvent(ByVal sourceControl As IPostBackEventHandler, ByVal eventArgument As String)
        MyBase.RaisePostBackEvent(sourceControl, eventArgument)

        If TypeOf sourceControl Is RadAjaxManager Then
            Select Case eventArgument
                Case "Rebind"
                    radgPayRequest.MasterTableView.SortExpressions.Clear()
                    radgPayRequest.MasterTableView.GroupByExpressions.Clear()
                    radgPayRequest.MasterTableView.Rebind()
                Case "RebindAndNavigate"
                    radgPayRequest.MasterTableView.SortExpressions.Clear()
                    radgPayRequest.MasterTableView.GroupByExpressions.Clear()
                    radgPayRequest.MasterTableView.Rebind()
            End Select
        End If
    End Sub 'RaisePostBackEvent

Has anyone run into this issue before with the ASP.NET AJAX controls?  If so, how were you able to get the grid to refresh the data?  Is it possible that the way we are opening the radwindow could cause the grid not to refresh?

We appreciate any help or suggestions.

[Mira]

Hi Marc,

I went through your code and I can confirm you have set up the ajax settings properly and handled the AjaxRequest as required. However, I can see that you have attached the AjaxRequest event of the manager twice, once in the aspx and once in code behind. Could you please remove the one handler and check it you have not handled other events thus? Please give it a try and let me know of the result.

Kind regards,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Giovanni Pulvirenti]

Hi Telerik,

I'm resuming this old thread because I'm getting stuck on the same problem.

The code and the scenario provided by Marc Arbesbam are absolutely the same of mine; and the problem too...

Unfortunately this thread seam doesn't provide a definitive answer.

The problem is that the grid doesn't refresh the data, but the database is updated and the "AjaxRequest" event of the code behind is fired. But, if I click on the button "search" (my scenario is a search engine), the new data are displayed.

Usually, I think that quite everyone that posts in a support forum, writes also that the solution is "very very urgent".

And this is also my case, after all :-) 

In fact, for tomorrow is programmed the beta-version publication of my software.. so, every "urgent" answer will be very very appreciated.

Thanks in advance,

Giovanni

P.S.: I'm developing with VS 2008 and I'm using the Q3 2009 SP2 release (RadAjaxManager v2009.3.1314.35).

Should be involved the cassini vs web server cache management?

[Giovanni Pulvirenti]

Reading again my preceding post, I've realized that I did not give you any piece of code to analyze. Sorry.

I'll now try to describe as close as possible my own scenario.

The AspX page is a vehicles search engine that presents the results inside a RadGrid.

In the itemdatabound event of the grid, the reservation vehicle status is represented using two different images.

When the user clicks on the vehicle free-status png, is opened a RadWindow that guides the user through the complex reservation process.

My goal is - after the RadWindow close action - to achieve the ability to refresh the correspondent radgrid row.

This is the code used inside the RadWindow (aspx file):

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function GetRadWindow() {
                    var oWindow = null;
                    if (window.radWindow) oWindow = window.radWindow;
                    else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                    return oWindow;
                }

                function CloseAndRebind() {
                    var oWnd = GetRadWindow();
                    oWnd.close();
                    oWnd.BrowserWindow.refreshGrid();
                }

            </script>
        </telerik:RadCodeBlock>

This is the code used inside the RadWindow (vb code behind):

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

        Me.bttCarReservable.Attributes("onclick") = "CloseAndRebind();"
        Me.bttCarReserved.Attributes("onclick") = "CloseAndRebind();"

    End Sub

When the page is initiating, it is attached the client side "onclick" event, so the "CloseAndRebind" javascript function can be recalled by the user action (doing or canceling reservation).

As you can see, the CloseAndRebind function recalls another javascript function declared in the parent page where the grid resides.

This javascript function is named "refreshGrid" and this is its code:

function refreshGrid() {
  $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest();
}

As you can see, this very simple function finds the RadAjaxManager reference using its client id and then invokes the "ajaxRequest()" method.

So, when this function is executed, it is invoked the server-side "AjaxRequest" event that is coded in the code behind as follows;

    Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

        GridResults.Rebind()


    End Sub

As you can see, it is invoked the server-side "Rebind" grid's function to trigger the "NeedDataSource" event.

I'm sure that all the code is executed because the AjaxLoadingPanel starts to work and - most of all - the step-by-step server side debug process confirmed the correct execution.

Sadly, the overall result it' frustrating: the grid does not refresh its content (images and text). If at this point I click on the button search (the datasource behind the grid is a database view), then the correct data are displayed.

I hope that now there are more elements to work around.

Thank you very much.

[Giovanni Pulvirenti]

Well,

finally I think I've fixed this issue :-)

I'll explain that behavior for everyone who'll need it in the future.

The problem is that the javascript attribute "onclick" of the buttons initialized in Page_Init is executed BEFORE the server-side code.

So the database was updated AFTER the grid rebind via AjaxRequest method.

Thanks anyway.

[Jonx]

Hello Giovanni, you explain what the problem is not how to solve it ;)
What have you changed to make it work?
Thank you for your help...
John.

[Giovanni Pulvirenti]

Hi John,
my post is quite one year old and it was not simple to find the code involved. Well, at the end I think I've found it :-)
I've transformed the code since that post, so I hope it can helps you anyway.
The scenario is this:
1. DoubleClick on the selected row
2. A window opens
3. Do some work on it updating some data
4. the grid row must reflect the changes

On the aspx client code add this (the page name and its parameters obviously reflect my own code logic):

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    function RowDblClick(sender, eventArgs)
    {
        window.radopen("VehicleDetails.aspx?CID=" + eventArgs.getDataKeyValue("ConnID") + "&VID=" + eventArgs.getDataKeyValue("VehicleID"), "radwVehicleDetails");
    }

    function refreshGrid() {

        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest();
        $find("<%= radgridVehicles.ClientID %>").get_masterTableView().rebind();
        $find("<%= radgridVehicles.ClientID %>").repaint();
    }
</script>
</telerik:RadCodeBlock>

Then, add this:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Windows7" >
        <Windows>
            <telerik:RadWindow ID="radwVehicleDetails" runat="server" Modal="true" Title="Dettaglio Veicolo" OnClientClose="refreshGrid" />
        </Windows>
</telerik:RadWindowManager>

In the <ClientSettings> area of the RadGrid, add this (simply bind the DoubleClick event of the grid to the "RowDblClick" javascript function) :

<ClientSettings>
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowDblClick="RowDblClick" />
</ClientSettings>

Hope this helps.

Giovanni

[Jonx]

Hello Giovanni,
Thanks a lot for your time... and for digging in your archives ;)

The things that helped was to call the rebind by hand like you do:

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest();

$find("<%= radgridVehicles.ClientID %>").get_masterTableView().rebind();

$find("<%= radgridVehicles.ClientID %>").repaint();

Thank you for the fast answer, you saved my day ;)

John.