RadAjaxManager and ajaxified controls don't get along

[Pablo]

Hi, my name is Pablo Rodriguez and I've been having issues with ajaxified controls using load on demand and RadAjaxManager. I had to make most of my ajax requests by means of javascript callings to ajaxmanager.ajaxrequest() because after updating a load-on-demand combobox in the grid or a server-side- callback node in the treeview, when I perform any ajaxified postback  managed by ajaxmanager, it  would throw a javascript error and break the state of the page.  

My current scenario is: nested RadSplitters with RadPanes, a treeview on the left, a RadGrid on the right that holds related load-on-demand comboboxes in each row, a collapsible RadPane on the bottom and some buttons below that. You can see it on the screenshot:



Link to the picture

 

For example, if I work with the comboboxes and then click on any of the buttons on the bottom or any of the arrows on the vertical splitter and then try to expand a node in the tree or request items in any of the combos, I’ll be presented the loading message and nothing else will happen, no matter how many times I click on the tree node or the combobox.

The usual workflow is to select files in the tree and drop them to the grid (file queue) and then fill the comboboxes, select the files (fill the metadata of each file) and send them to the server using the “send” button.

I’m not using any ajax panel, all ajax requests are managed by RadAjaxManager or by the controls themselves. I’m using RadControls for ASP.NET AJAX 2008_1_415_dev

What would be the best combination of controls in this scenario? I don’t want to lose performance and I would like to have a stable page state anytime I make ajax requests to the server.

 

[Iana Tsolova]

Hello Pablo,

I assume that when you invoke ajax request through the ajaxRequest() client-side method of RadAjaxManager, then you handle this request on AjaxRequest server event. In the server event handler, you are updating some controls of the page. However, these changes would take effect in the responded page only if these controls are set as updated controls in the ajax settings where the RadAjaxManager is initiator. Can you confirm your page follows this requirement?
Additionally, I suggest that you send us stripped version of your scenario, for instance remove the layout and leave only the action and updated controls, and send it to us for further investigation. 

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Pablo]

Hello,

Here you can see a piece of code:

                        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
                            <AjaxSettings>
                                <telerik:AjaxSetting AjaxControlID="filesTreeView">
                                    <UpdatedControls>
                                        <telerik:AjaxUpdatedControl LoadingPanelID="RadAjaxLoadingPanel1" ControlID="fileListGrid" />
                                    </UpdatedControls>
                                </telerik:AjaxSetting>
                                <telerik:AjaxSetting AjaxControlID="removeFromQueueButton">
                                    <UpdatedControls>
                                        <telerik:AjaxUpdatedControl LoadingPanelID="RadAjaxLoadingPanel1" ControlID="fileListGrid" />
                                    </UpdatedControls>
                                </telerik:AjaxSetting>
                                <telerik:AjaxSetting AjaxControlID="sendToQueueButton">
                                    <UpdatedControls>
                                        <telerik:AjaxUpdatedControl LoadingPanelID="RadAjaxLoadingPanel1" ControlID="fileListGrid" />
                                    </UpdatedControls>
                                </telerik:AjaxSetting>
                                <telerik:AjaxSetting AjaxControlID="applyAllButton">
                                    <UpdatedControls>
                                        <telerik:AjaxUpdatedControl ControlID="RadSplitter1" LoadingPanelID="applyRadAjaxLoadingPanel" />
                                    </UpdatedControls>
                                </telerik:AjaxSetting>
                               <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                                    <UpdatedControls>
                                        <telerik:AjaxUpdatedControl ControlID="fileListGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                                        <telerik:AjaxUpdatedControl ControlID="metadataGrid" />
                                        <telerik:AjaxUpdatedControl ControlID="filesTreeView" />
                                        <telerik:AjaxUpdatedControl ControlID="JobFilesLoggingStatusLabel" />
                                    </UpdatedControls>
                                </telerik:AjaxSetting>
                                <telerik:AjaxSetting AjaxControlID="metadataPane">
                                    <UpdatedControls>
                                        <telerik:AjaxUpdatedControl ControlID="metadataPane" LoadingPanelID="metadataRadAjaxLoadingPanel" />
                                    </UpdatedControls>
                                </telerik:AjaxSetting>
                            </AjaxSettings>
                        </telerik:RadAjaxManager>

Also the send button is as follow:

<asp:Button ID="sendToENButton" runat="server" OnClientClick="ShowLoadingMessage();return false;" Text="Send" Font-Names="Verdana" Font-Size="11px" />

and the javascript function:

        function ShowLoadingMessage()
        {
            if (fileListGrid.MasterTableView.get_selectedItems().length > 0)
            {
                var jobFilesLoggingStatusLabel = document.getElementById("<%= JobFilesLoggingStatusLabel.ClientID %>");
                jobFilesLoggingStatusLabeljobFilesLoggingStatusLabel.innerHTML = jobFilesLoggingStatusLabel.innerHTML + "<br />> Starting Sending Process...";
            }

            InitializeLogBar();

            setTimeout("var ajaxManager = $find('<%= RadAjaxManager1.ClientID %>');ajaxManager.ajaxRequest('send')",3000);

        }

My first approach of doing all this was just to set the send button as the initiator and update the grid. But using load on demand combos in the grid and let the ajaxmanager update the grid when the send button is clicked results in an error on the page. That's why I had to use the client-side ajax requests.
Note also the setTimeout() within the ShowLoadingMessage(), I don't know why but this is neccesary to make it happen. Any idea?

Regards,

Pablo.

[Iana Tsolova]

Hi Pablo,

Your ajax settings look fine to me. Could you specify what is the error message you receive when set the button to update the grid?

Regarding the setTimeout: it might be necessary in cases where there is current request running when you call the ajaxRequest() method. On the other hand, with the timeout set, the current request would have been finished and a new one could start. Do you think this could be with you?

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.