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

5 posts, 1 answers
  1. Steven
    Steven avatar
    3 posts
    Member since:
    Jan 2013

    Posted 06 Mar 2013 Link to this post

    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>
  2. Answer
    Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 11 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 27 Dec 2013 Link to this post

    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?
  5. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 02 Jan 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 02 Jan 2014 Link to this post

    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.)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017