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

AJAXifying control on Master page in client-side radgrid/radwindow/Master/Content Page AJAX scenario

1 Answer 272 Views

Ajax

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

Jonathan asked on 01 Oct 2008, 03:09 AM

I have a scenario similar to this thread:

http://www.telerik.com/community/forums/thread/b311D-bckhem.aspx

I have implemented a grid editing scenario with RadWindow and ajaxmanager using client-side script callbacks.

I have a master page and a content page. Currently the Rad Ajax Manager resides in the content page. I am not currently using
the Rad Ajax Manager Proxy.

Everything is working well so far and I am able to edit and add grid items and refresh the grid using client-side script and the rad Ajax manager.

The code so far looks like the following (code is from the content page - ClientDetail.aspx that displays the grid and a page that is opened in the rad window - ServiceEventDetail.aspx which does not use a master page)

ClientDetail.aspx: (abbreviated for clarity) There is alot of AJAX stuff going on on the page as ther ar multiple grids on different tabs of a tabstrip. Sorry I can't get the code formatter to work for me so I just made everything blue.

<telerik:RadCodeBlock runat="server">
<script type="text/javascript">

function openEditEventWindow(ServiceEventID) {
    var oWnd = radopen("ServiceEventDetail.aspx?ServiceEventID=" + ServiceEventID, "Edit Service Event");
    oWnd.set_modal(true);
    oWnd.setSize(750, 600);
    oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move);
    oWnd.set_visibleStatusbar(false);
    oWnd.Center();
}
function openAddEventWindow() {
    //open a new window for adding a client comment parsing the URL request for the current client ID
    var oWnd = radopen("ServiceEventDetail.aspx?ClientID=" + gup('ClientID'), "Add Service Event");
    oWnd.set_modal(true);
    oWnd.setSize(750, 600);
    oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Reload);
    oWnd.set_visibleStatusbar(false);
    oWnd.Center();
}

function refreshServiceEventGrid() {
var radMgr = $find("<%=RadAjaxManager1.ClientID %>");
radMgr.ajaxRequest("Rebind_ServiceEvents");
}

</script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server"
ID="radGridServiceEvents"
AllowMultiRowSelection="false"
ClientSettings-Selecting-AllowRowSelect="false">
<MasterTableView
    AutoGenerateColumns="False"
    DataKeyNames="ID"
    Width="100%"
    CommandItemDisplay="Top"
    PageSize="10"
    EnableNoRecordsTemplate="true">
...
    <Columns>
        <telerik:GridTemplateColumn
            UniqueName="TemplateEditColumn"
            HeaderText="View/Edit"
            HeaderStyle-Width="100">
            <ItemTemplate>
                <asp:ImageButton ID="EditButton" OnClientClick='<%# Eval("ID", "openEditEventWindow({0}); return false;" ) %>' runat="server" ImageUrl="./images/edit.gif"></asp:ImageButton>
            </ItemTemplate>
        </telerik:GridTemplateColumn>
    </Columns>
    <CommandItemTemplate>
        <table border="0" style="width:100%;">
            <tr>
                <td align="left"><td align="left"><input type="button" value=" " onclick="javascript:openAddEventWindow()" id="AddNewEventButton" title="Add New Service Event" class="rgAdd" /><a href="javascript:openAddEventWindow()">Add" originalAttribute="href" originalPath="javascript:openAddEventWindow()">Add" New Service Event</a></td></td>
            </tr>
        </table>
    </CommandItemTemplate>
   </MasterTableView>
</telerik:RadGrid>

...

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
   <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
        <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGridServiceEvents" />
                <telerik:AjaxUpdatedControl ControlID="radGridComments" />
                <telerik:AjaxUpdatedControl ControlID="radGridClientDocuments" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="ddlPrimaryRace">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="ddlSecondaryRace" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="radGridServiceEvents">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGridServiceEvents" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="radGridClientDocuments">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGridClientDocuments" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="radGridComments">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radGridComments" />
                <telerik:AjaxUpdatedControl ControlID="lblMessage" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

ClientDetail.aspx.cs

...

public void LoadServiceEvents(bool resetPage)
    {
        List<CSTServer.ServiceEvent> _ServiceEvents;
        if (_client == null)
        {
            _ServiceEvents = CSTServer.ServiceEventService.GetForClient(Int32.Parse(Request.QueryString["ClientID"]));
        }
        else
        {
            _ServiceEvents = _client.getServiceEvents(true);
        }

        if (_ServiceEvents != null)
        {
            radGridServiceEvents.DataSource = _ServiceEvents;

            if (resetPage == true)
            {
                radGridServiceEvents.CurrentPageIndex = 0;
            }
            radGridServiceEvents.DataBind();
        }
        radGridServiceEvents.Focus();
    }

...

    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        switch (e.Argument)
        {
            case "Rebind_ServiceEvents":
                LoadServiceEvents(true);
                break;
        }
    }

...

ServiceEventDetail.aspx:

and in the code behind

ServiceEventDetail.aspx.cs

private int SaveServiceEvent()
    {
        if (Request.QueryString["ServiceEventID"] != null)
        {
            //load the Client we're in edit mode
            _serviceEvent = ServiceEventService.GetByID(Int32.Parse(Request.QueryString["ServiceEventID"]));

            SaveScreenToServiceEvent();

            ServiceEventService.Save(_serviceEvent);
            //call the client side CloseAndRebind on reload of page after postbacl whhihc calls the parent refresh grid
            ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", true);
        }
        else if (!(Request.QueryString["ClientID"] == null))
        {
            //new ServiceEvent
            _serviceEvent = new ServiceEvent();
            _serviceEvent.ClientID = Int32.Parse(Request.QueryString["ClientID"]);

            SaveScreenToServiceEvent();
            ServiceEventService.Save(_serviceEvent);

            //call the client side CloseAndRebind on reload of page after postback which calls the parent refresh grid
            ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind('navigateToInserted');", true);
        }
        return _serviceEvent.ID;

}

OK so far so good. The problem is now I would like to start using the Rad Ajax Manager Proxy in the ClientDetail.aspx (Content Page)
and put the Rad Ajax Manager in the master page as I would like to update a control which is in the master page to return messages
to the user when the grid is updated via AJAX on the content page. I am wondering given the complexity of this scenario, whether this is even worth it :-)

In the documentation for the Rad Ajax Manager Proxy:

"The purpose of the new control is to ease the design-time configuration only. The Proxy does not provide client-side functionality as the Manager does. There is no client-side object as well as functions like ajaxRequest/ajaxRequestWithTarget and client-side events. Instead, one can get the Manager instance through the GetCurrent static method similar to the ASP:ScriptManager control and call the master manager client-side methods if necessary. "

and

"Accessing master manager client-side from content page"

   <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">
           function myUserControlClickHandler()
           {
               $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("content");
           }
       </script>
   </telerik:RadCodeBlock>

So it would be possible to get the manager from the javascript code on the client on the content page, however this brings up the crux of the prolem:

1. Will the RadAjaxManager1_AjaxRequest event be fired on the master page and have to be handled on the master page code behind?
That would mean that all Ajax requests initiated through client-side script throughout the application - I'm using this pattern all over the place - would have to be handled in a single function on the master page would you then have all the grid data-loading functions replicated in the master page.?.. Can you use delegate functions here? do you have an example?

2. If indeed the RadAjaxManager1_AjaxRequest resides in the code behind of the master page, how will it be able to access controls that are on the content page, and be able to compile. Would all content page controls that are referenced from within RadAjaxManager1_AjaxRequest on the master page need to be addressed with FindControl and casting?

3. Obviously maintaining the rad Ajax Manager configuration in the markup of the master page would become unmanageable for a large application. Should I then programmatically configure the master page Ajax Manager from the content page code behind a rather than in the markup? Could you convert my AJAX Manager Configuration to code as an example?

Sorry this is a long one, this stuff gets pretty complex and I wanted to be specific.

Thanks!

Jonathan

1 Answer, 1 is accepted

answered on 03 Oct 2008, 01:24 PM

Hello Jonathan,

Howevr your ajax manager is in the Master page, you can handle the AjaxRequest event in the content page. Use the following code in your content page (ClientDetail.aspx):

    
            protected void Page_Load(object sender, EventArgs e)  
        
            {  
        
               RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);  
        
               manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);  
        
            }  
        
            protected void manager_AjaxRequest(object sender, AjaxRequestEventArgs e)  
        
            {  
        
               //your code here  
        
            }

Find more about RadAjaxManager Proxy here.

You can add your RadAjaxManager in the asp declaration of the MasterPage without any concerns. However if you prefer adding it in codebehind, do that in the Page_Init event handler and add it to the Form controls collection.

You can review the following articles for more information about RadAjaxManager:
http://www.telerik.com/help/aspnet-ajax/ajxmasterpageupdateeverywhere.html
http://www.telerik.com/help/aspnet-ajax/ajxaddajaxsettingsprogrammatically.html
http://www.telerik.com/help/aspnet-ajax/ajxloadcontrolfromanotherwebusercontrolindifferentmasterpagecontentplaceholder.html

Let me know if this helps.

Kind regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.