RadAjaxLoadingPanel displays minimized if HorizontalAlign is set on MasterTableView in a RadGrid

[Steven]

I have a perplexing issue. My user control has a RadAjaxManager, RadGrid and RadAjaxLoadingPanel. The loading panel overlays the RadGrid as expected during updates to the grid. The grid is configured to display a hierarchy of a straight forward master detail pattern.

However, if I set the HorizontalAlign property to any value other than NotSet for the MasterTableView of the RadGrid, the loading panel displays as a very narrow control at the top of the RadGrid. Is this a known issue and is there a work around?

    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="Fieldset" EnableRoundedCorners="true" />
        <telerik:radajaxmanager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
    DefaultLoadingPanelID="RadAjaxLoadingPanel1" EnableHistory="True" ClientEvents-OnRequestStart="RequestStart"
    ClientEvents-OnResponseEnd="ResponseEnd" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1" >
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"
                        LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnResponseEnd="ResponseEnd" OnRequestStart="RequestStart" />
    </telerik:radajaxmanager>
    <telerik:radajaxloadingpanel ID="RadAjaxLoadingPanel1" runat="server"
        Skin="Windows7" EnableAjaxSkinRendering="true"   >
    </telerik:radajaxloadingpanel>


    <telerik:RadGrid  ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
        OnDetailTableDataBind="RadGrid1_DetailTableDataBind" AllowFilteringByColumn="true"
    AllowSorting="True" AutoGenerateHierarchy="True" CellSpacing="0"  PageSize="25"
    Skin="Windows7" ClientSettings-AllowExpandCollapse="true"
    GridLines="None" oncolumncreated="RadGrid1_ColumnCreated"
    onitemdatabound="RadGrid1_ItemDataBound"  OnItemCommand="RadGrid1_ItemCommand"
    onitemcreated="RadGrid1_ItemCreated" ondatabound="RadGrid1_DataBound" HorizontalAlign="Right" >
        <MasterTableView HorizontalAlign="Right" AllowPaging="true" AllowFilteringByColumn="true" CommandItemDisplay="Top" Caption="Performance Data" >
        <DetailTables>
        <telerik:GridTableView AllowFilteringByColumn="false" HorizontalAlign="Right" >
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
            </telerik:GridTableView>
        </DetailTables>
        <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" />

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
        </MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

        <ExportSettings>
            <Excel Format="Biff"></Excel>
        </ExportSettings>

        <ClientSettings ReorderColumnsOnClient="true">
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
    </telerik:RadGrid>

[Eyup]

Hello Steven,

It is an inherited property - use the following settings instead:

<MasterTableView ... ItemStyle-HorizontalAlign="Right" AlternatingItemStyle-HorizontalAlign="Right">

Additionally, please note that you will need to use RadAjaxManagerProxy in your case:
http://www.telerik.com/help/aspnet-ajax/ajax-user-controls.html

Hope this helps.

Kind regards,
Eyup
the Telerik team

[Matt]

It sounds like this is the same issue I'm encountering.  However, when I set the alignment as per your suggestion, it only caused the items to be right-aligned; the loading panel still shows as a tiny sliver above the grid (see attached screenshot).  (Additionally, it *only* shows when a column is reordered or sorted; it doesn't appear when the toolbar button is clicked, which I would expect based on the definition below.)

Here's the layout for the rad ajax manager proxy, loading panel and grid:

<telerik:RadAjaxManagerProxy ID="rampNotesGrid" runat="server">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="tbNotesToolbar">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="grdNotes" LoadingPanelID="LoadingPanel" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="grdNotes">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="grdNotes" LoadingPanelID="LoadingPanel" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server"/>

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />

<telerik:RadContextMenu ID="mnuNoteContext" runat="server" ...removed for brevity...</telerik:RadContextMenu>

<telerik:RadToolBar ID="tbNotesToolbar" runat="server" ...removed for brevity...</telerik:RadToolBar>

<asp:Repeater ID="AccessibleToolbar" runat="server">...removed for brevity...</asp:Repeater>

<uc1:Search ID="NotesSearch" runat="server" ShowAdvancedSearchLink="False" ShowFieldsList="True" />

<asp:Label ID="lbl508Sort" runat="server"></asp:Label>

<telerik:RadGrid

    ID="grdNotes"

    runat="server"

    OnColumnCreated="grdNotes_ColumnCreated"

    OnItemCreated="grdNotes_ItemCreated"

    OnItemDataBound="grdNotes_ItemDataBound"

    OnNeedDataSource="grdNotes_NeedDataSource"

    OnPreRender="grdNotes_PreRender"

    AutoGenerateColumns="False"

    SkinID="HierarchicalGrid"

    GridLines="None"

    AllowCustomPaging="True"

    ShowStatusBar="True"

    PageSize="20"

    EnableLinqExpressions="False"

    Width="99%" CellSpacing="0">

    <MasterTableView

        HierarchyDefaultExpanded="true"

        HierarchyLoadMode="Client"

        AllowSorting="true"

        DataKeyNames="Id,ParentId,Token,IsRoot,Replies,NoteCreator"

        ClientDataKeyNames="Id,ParentId,Token,IsRoot,Replies,NoteCreator"

        NoDetailRecordsText=""

        EnableNoRecordsTemplate="False"

        TableLayout="Auto"

        Width="100%"

        HorizontalAlign="Right"

        EnableHeaderContextMenu="True">

        <SelfHierarchySettings ParentKeyName="ParentId" KeyName="Id" MaximumDepth="20" />

        <RowIndicatorColumn Visible="False" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

        <Columns>

            <telerik:GridClientSelectColumn DataTextField="Id" HeaderAbbr="Select" HeaderButtonType="TextButton"

                HeaderText="Select" HeaderTooltip="Select/Deselect" Text="Select" Visible="false"

                UniqueName="asgSelect">

            </telerik:GridClientSelectColumn>

            <telerik:GridBoundColumn DataField="Id" SortExpression="Id" UniqueName="Id">

                <HeaderStyle Width="50px" />

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Title" SortExpression="Title" UniqueName="Title"

                HtmlEncode="true">

                <HeaderStyle Width="150px" />

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Body" SortExpression="Body" UniqueName="Body" HtmlEncode="False">

                <HeaderStyle Width="350px" />

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="CreatedBy" SortExpression="CreatedBy" UniqueName="CreatedBy">

                <HeaderStyle Width="150px" />

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="CreatedDate" SortExpression="CreatedDate" UniqueName="CreatedOn">

                <HeaderStyle Width="150px" />

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="ParentId" HeaderText="Parent Id" SortExpression="ParentId"

                UniqueName="ParentId" Visible="false" />

            <telerik:GridBoundColumn DataField="Token" HeaderText="Token" SortExpression="Token"

                UniqueName="Token" Visible="false" />

            <telerik:GridBoundColumn DataField="IsRoot" HeaderText="Is Root" SortExpression="IsRoot"

                UniqueName="IsRoot" Visible="false" />

            <telerik:GridBoundColumn DataField="Replies" HeaderText="Replies" SortExpression="Replies"

                UniqueName="Replies" Visible="false" />

            <telerik:GridBoundColumn DataField="NoteCreator" HeaderText="NoteCreator" SortExpression="NoteCreator"

                UniqueName="NoteCreator" Visible="false" />

            <telerik:GridTemplateColumn UniqueName="Actions" Visible="false">

                <ItemTemplate>

                    <telerik:RadToolBar ID="rtbNoteActions" runat="server" SkinID="ActionToolbar" OnButtonClick="NotesGridToolbarButtonClicked"

                        OnClientButtonClicking="NoteActionToolbarClicking">

                        <Items>

                            <telerik:RadToolBarButton Text="Properties" CommandName="Properties" ImageUrl="~/Images/page_view.gif" />

                            <telerik:RadToolBarButton Text="Reply" CommandName="Reply" ImageUrl="~/Images/page_edit.gif" />

                            <telerik:RadToolBarButton Text="Security" CommandName="Security" ImageUrl="~/Images/shield16.gif" />

                            <telerik:RadToolBarButton Text="Delete" CommandName="Delete" ImageUrl="~/Images/delete16.gif" />

                        </Items>

                    </telerik:RadToolBar>

                </ItemTemplate>

                <HeaderStyle Width="15%"></HeaderStyle>

            </telerik:GridTemplateColumn>

        </Columns>

        <EditFormSettings>

            <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

        </EditFormSettings>

        <PagerStyle AlwaysVisible="True"></PagerStyle>

    </MasterTableView>

    <HeaderContextMenu EnableTheming="True">

        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

    </HeaderContextMenu>

    <ExportSettings ExportOnlyData="True" IgnorePaging="True">

    </ExportSettings>

    <ClientSettings

        Selecting-AllowRowSelect="true"

        Resizing-AllowColumnResize="true"

        AllowColumnsReorder="true">

        <Selecting AllowRowSelect="True"></Selecting>

        <ClientEvents

            OnRowSelected="NoteRowSelected"

            OnRowContextMenu="NoteContextMenu"

            OnRowDblClick="grdNotes_OnRowDblClick"

            OnGridCreated="NotePageLoad"

            OnTableCreated="ResizeAllNoteColumns"

            OnColumnResized="ResizeAllNoteColumns"

            OnColumnHiding="HideDetailColumn"

            OnColumnShowing="ShowDetailColumn" />

    </ClientSettings>

    <PagerStyle Position="Bottom" AlwaysVisible="True" Mode="NextPrevAndNumeric" Wrap="False"

        BackColor="White" Font-Size="Large" />

</telerik:RadGrid>

What else needs to be done in order for the loading panel to appear over the grid?  Additionally, why doesn't it appear when I click the toolbar button?

[Eyup]

Hello Matt,

Remove the following property and the issue should be resolved:

<MasterTableView ... HorizontalAlign="Right">

In addition, please note that using RadGrid to create a self-hierarchy is obsolete and no longer supported. I highly suggest that you try out the RadTreeList control:
http://demos.telerik.com/aspnet-ajax/treelist/examples/overview/defaultcs.aspx

Or use the standard grid hierarchy:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/programmatic-hierarchy/defaultcs.aspx

Hope this helps.

Regards,
Eyup
Telerik

[Matt]

Thanks, it works perfectly now.

(I just now realized that you had recommended ItemStyle-HorizontalAlign in your original response; I saw that I had the HorizontalAlign under the MasterTableView and overlooked the fact that they're not the same.)