RenderMode Inline ignored for panel with multiple controls

[Richard]

Good afternoon,

I am using ASP.NET AJAX version 2023.3.1010.45,

I have a page with a ComboBox and Grid.  By choosing an Item in the ComboBox and clicking a Button, it will locate the Item in the Grid.  If an Item is inserted into or deleted from the Grid, the ComboBox needs to update.  Both controls have the same ObjectDataSource as their data source.  This is why they share an Ajax Panel.

I am using a RadAjaxManager and RadAjaxLoadingPanel as follows (setting UpdatePanelsRenderMode to Inline):

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadComboItems">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridItems"/>
                    <telerik:AjaxUpdatedControl ControlID="RadComboItems" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGridItems">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridItems" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboItems" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" BackgroundTransparency="30" RenderMode="Lightweight">
    </telerik:RadAjaxLoadingPanel>

The ComboBox and Grid appear in the same RadAjaxPanel (also with RenderMode Inline):

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline">
    <label for="RadComboItems">Input/Select Item:</label>
    <telerik:RadComboBox ID="RadComboItems" runat="server" Height="200px" Width="200px" DataSourceID="odsItems" EnableVirtualScrolling="true" DataTextField="ItemId" DataValueField="RowNum" EmptyMessage="--Select a value--" RenderMode="Lightweight" EnableAjaxSkinRendering="true">
    </telerik:RadComboBox>
    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="btnFindItems" OnClick="btnFindItems_Click" EnableAjaxSkinRendering="true" />

    <telerik:RadGrid ID="RadGridItems" RenderMode="Lightweight" runat="server" AllowPaging="True" DataSourceID="odsItems" AllowSorting="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="True" AllowAutomaticDeletes="True" OnUpdateCommand="RadGridItems_UpdateCommand"                                    OnItemDataBound="RadGridItems_ItemDataBound" OnItemCommand="RadGridItems_ItemCommand" OnItemDeleted="RadGridItems_ItemDeleted" OnItemInserted="RadGridItems_ItemInserted" OnItemUpdated="RadGridItems_ItemUpdated" OnPreRender="RadGridItems_PreRender" CellSpacing="-1" GridLines="Horizontal" OnDetailTableDataBind="RadGridItems_DetailTableDataBind" AllowFilteringByColumn="true" OnInfrastructureExporting="RadGridItems_InfrastructureExporting">
....
....
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

When the page first renders, the ComboBox and Button render as expected:

<div class="RadAjaxPanel" id="ctl00_maincontent_ctl00_maincontent_RadComboItemsPanel" style="display: inline;">

Once the Button is pressed though, the rendering changes to Block:

<div class="RadAjaxPanel" id="ctl00_maincontent_ctl00_maincontent_RadComboItemsPanel">

Is there anyway to prevent this from happening, without having to specify this on the page:

    <style type="text/css">
        .RadAjaxPanel
        {
            display: inline !important;
        }
    </style>

Kind regards,

Richard

[Rumen]

Hi Richard,

You can manually call the Rebind() method of the RadGrid within the RadAjaxManager1_AjaxRequest event handler. This will force the grid to trigger the NeedDataSource event and bind the data. Here’s how you can modify your code:

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (e.Argument == "InitialPageLoad")
    {
        // Trigger the NeedDataSource event
        RadGridItem.Rebind();

        // Make the RadAjaxPanel visible
        RadAjaxPanel1.Visible = true;
    }
}

 

Regards,
Rumen
Progress Telerik

[Richard]

Hi Rumen - that's done it.  Thank you.

Kind regards,

Richard

[Richard]

Hi Rumen,

I was able to achieve what I needed by following the article.

I wrapped my existing RadAjaxPanel in an asp Panel, and set its visibility to false:

                <asp:Panel ID="Panel1" runat="server" CssClass="outer-panel">
                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Visible="false" LoadingPanelID="RadAjaxLoadingPanel1" ClientEvents-OnRequestStart="onRequestStart">
.....
                    </telerik:RadAjaxPanel>
                </asp:Panel>

I added an AjaxSetting for the RadAjaxManager to the RadAjaxManager, and added the OnAjaxRequest event handler. I didn't add the main panel (ID="Panel1") to the AjaxSettings as this doubled up the loading image also used by RadAjaxPanel1:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadComboItem">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridItem" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboItem" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGridItem">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridItem" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboItem" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

I added the Panel1 style:

    <style>
        .outer-panel {
            min-height: 600px;
        }
    </style>

And the AjaxRequest server event:

    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        if (e.Argument == "InitialPageLoad")
        {
            RadAjaxPanel1.Visible = true;
        }
    }

Thanks again for all of your help with this - it's much appreciated.

Kind regards,

Richard

 

 

[Rumen]

You are very welcome, Richard! It is great to hear that everything works as expected.

[Richard]

Hi Rumen,

I have updated the RadGrid's data source from ObjectDataSource to use NeedDataSource so that I can use custom paging.

The problem with this is that the OnNeedDataSource is not triggering automatically when the page loads as the grid is wrapped in a RadAjaxPanel that is Visible="false" until RadAjaxManager1_AjaxRequest ("InitialPageLoad") is called.

Is there a way to trigger the OnNeedDataSource automatically during "InitialPageLoad" so that the RadGrid is loaded and then the RadAjaxPanel is made visible? This is how it worked with the ObjectDataSource as the data source.

Kind regards,

Richard 

[Rumen]

Hi Richard,

To resolve the issue with the display style changing from inline to block after a postback, you can apply the UpdatePanelRenderMode="Inline" property to the <telerik:AjaxUpdatedControl> sub-tags within your RadAjaxManager configuration. This ensures the update panels maintain the inline display style during postbacks.

Here’s an example implementation:

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadComboItems" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGridItems" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="RadComboItems" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGridItems">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGridItems" UpdatePanelRenderMode="Inline" />
                        <telerik:AjaxUpdatedControl ControlID="RadComboItems" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnFindItems" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGridItems" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

Regards,
Rumen
Progress Telerik

[Richard]

Hi Rumen,

Many thanks for your reply.  I've applied UpdatePanelRenderMode="Inline" to the AjaxUpdatedControl settings for the RadGrid and RadComboBox and that has worked.

As a side note relating to the Ajaxified RadGrid, I did notice that the Export to Excel didn't work when a details row was expanded. It works fine when no rows are expanded. When a row is expanded the update panel is called and the grid is displayed without paging or filtering, and no file is produced.

To get around this I had to include the following code:

        function onRequestStart(sender, args) {
            if (args.get_eventTarget().indexOf("ExportToExcel") >= 0)
                args.set_enableAjax(false);
        }

It seems that the update panel ignores the Export to Excel by default, but only when no rows are expanded.  When the rows are expanded the Ajax panel is called.

Kind regards,

Richard

[Rumen]

Hi Richard,

I'm glad to hear that applying UpdatePanelRenderMode="Inline" resolved your issue with the RadGrid and RadComboBox.

Regarding the export issue you mentioned, it’s indeed a common challenge when exporting data from an Ajaxified grid, particularly when rows are expanded.

Your approach of using the onRequestStart function to disable Ajax for the export process is a great solution. By default, Ajax requests can interfere with the export functionality, especially when there are expanded details rows, as you’ve observed. Disabling Ajax in these scenarios ensures that a full postback is triggered, which is necessary for proper file export.

Your solution to disable AJAX during the export operation using the client-side script is indeed appropriate and explained in the documentation. This ensures a full postback occurs, allowing the export to function correctly.

function onRequestStart(sender, args) {
    if (args.get_eventTarget().indexOf("ExportToExcel") >= 0) {
        args.set_enableAjax(false);
    }
}

 

Regards,
Rumen
Progress Telerik

[Richard]

Thanks again Rumen.

One last question relating to the RadGrid and RadAjaxlLoadingPanel.

My RadGrid's data source is an ObjectDataSource that can take up to six seconds to load.  I was hoping that I could do something similar to this documentation.  How can I get the Loading Panel to appear before the ObjectDataSource starts its load, and close once the RadGrid and RadComboBox are populated?

Kind regards,

Richard

[Rumen]

Hi Richard,

Since you're already familiar with the RadAjaxManager and RadAjaxLoadingPanel setup, you're quite close to the solution you need.

For your request to show the RadAjaxLoadingPanel during the loading of your ObjectDataSource, the configuration you're using should automatically display the loading panel, provided you've set up the AJAX settings correctly.

To refine this, here’s a potential enhancement:

1) Ensure the Loading Panel Appears on Initial Load:

The RadAjaxManager and RadAjaxLoadingPanel should handle this automatically when the data load starts. However, if you’d like more explicit control over when the panel appears and disappears, you can manage this with client-side events using JavaScript as explained in the Show and Hide AjaxLoadingPanel explicitly article.

2) Manual Control of the Loading Panel:

If you want to explicitly control when the loading panel appears and disappears, this article provides a great approach: Show and Hide AjaxLoadingPanel explicitly. You can use the OnRequestStart and OnResponseEnd events to manually show or hide the loading panel.

Example JavaScript:

function onRequestStart(sender, args) {
    // Show the loading panel manually before the request starts
    var loadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
    loadingPanel.show("<%= RadGrid1.ClientID %>");
}

function onResponseEnd(sender, args) {
    // Hide the loading panel manually after the request completes
    var loadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
    loadingPanel.hide("<%= RadGrid1.ClientID %>");
}

 

3. RadAjaxPanel Alternative:

Alternatively, if you want to avoid managing it manually, you could keep using the RadAjaxPanel as it will automatically display the loading panel while the data source is loading.

This should give you full control over the loading experience and ensure that the panel is visible while your ObjectDataSource is loading.

Best Regards,
Rumen
Progress Telerik

[Richard]

Hi Rumen,

Thanks again for your detailed answer.

I've tried explicitly showing and hiding the AjaxLoadingPanel but still there is a delay before the page is displayed on initial page load.  The loading panel works perfectly once the page has loaded, and on all further updates/sorts/filters/deletes etc.  It's just that when I click the menu item to take me to the page with the RadGrid the browser remains on the previous page with the browser icon showing that it is doing something until the RadGrid and RadComboBox are bound and ready to use.

As I mentioned, the select method on the ObjectDataSource does take a while to complete - then both the RadGrid and RadComboBox are bound to it.

Kind regards,

Richard

[Rumen]

Hi Richard,

The delay is due to the initial server-side data retrieval for your ObjectDataSource, which happens before any client-side loading panel can be displayed

ASP.NET WebForms does not work with Asynchronous requests, so you cannot have loading indicators for data that is not ready yet. 

However, you can display a loading indicator for the entire page as shown at 
How To Show AjaxLoadingPanel on Initial Page Load 

I hope that this will help you resolve the issue. 

Regards,
Rumen
Progress Telerik