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

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

4 Answers 46 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 06 Mar 2013, 10:50 AM
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>

4 Answers, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 11 Mar 2013, 09:39 AM
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.
0
Matt
Top achievements
Rank 1
answered on 27 Dec 2013, 04:14 PM
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?
0
Eyup
Telerik team
answered on 02 Jan 2014, 09:32 AM
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.
0
Matt
Top achievements
Rank 1
answered on 02 Jan 2014, 02:51 PM
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.)
Tags
Ajax
Asked by
Steven
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Matt
Top achievements
Rank 1
Share this question
or