RadGrid resize and repaint

3 posts, 0 answers
  1. KO
    KO avatar
    17 posts
    Member since:
    Jun 2012

    Posted 15 Jun 2012 Link to this post

    What I have been trying to accomplish is having a RadGrid calculate its height to fill the rest of a RadPageView of a RadTabStrip/RadMultiPage control. The RadMultiPage should fill what is left of its RadPane, below all other elements that might be above the RadTabStrip. The first time the page is loaded, everything seems to be rendered and sized correctly, however, when resizing the window it seems that only the Grid that is currently visible gets resized, and all the others do not get rendered correctly even though they should all be repainted according to the scripts.

    <telerik:RadSplitter ID="InquiryDetailSplitter" runat="server" Orientation="Vertical" OnClientResized="SetElementDimensions"
     OnClientLoaded="SetElementDimensions">
        <telerik:RadPane ID="InquiryDetailFieldsPane" runat="server" Width="300px">
            ...
        </telerik:RadPane>
        <telerik:RadPane ID="InquiryDetailGridsPane" runat="server">
            <asp:Label ID="InquiryDetailPacketGridLabel" runat="server" CssClass="GridLabel" Font-Bold="true" Font-Size="80%"></asp:Label>
            <telerik:RadGrid ID="InquiryDetailPacketGrid" runat="server" ShowFooter="true" AutoGenerateColumns="false" CssClass="AccountGrid"
             OnItemCommand="InquiryDetailPacketGrid_ItemCommand" OnItemDataBound="InquiryDetailPacketGrid_ItemCommand">
                <MasterTableView ClientDataKeyNames="Id" DataKeyNames="Id">
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="View" UniqueName="View" DataField="Id" Aggregate="Count" FooterAggregateFormatString="{0} Accounts" HeaderStyle-Width="85px">
                            <ItemTemplate>
                                <asp:LinkButton ID="ShowDetailLink" runat="server" CommandName="ShowDetail" CommandArgument='<%# Eval("ID") %>' Text="View" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
                <FooterStyle HorizontalAlign="Right" />
            </telerik:RadGrid>
     
            <asp:Label ID="InquiryDetailNotesLabel" runat="server" CssClass="GridLabel" Font-Bold="true" Font-Size="80%">Additional information</asp:Label>
     
            <telerik:RadTabStrip ID="InquiryDetailNotesTabStrip" runat="server" MultiPageID="InquiryDetailNotesMultiPage" ShowBaseLine="false" AutoPostBack="false"
             >
                <Tabs>
                    <telerik:RadTab Text="Combined" Value="Combined" Visible="false" />
                    <telerik:RadTab Text="Transactions" Value="Transactions" Visible="false" />
                    <telerik:RadTab Text="Correspondence" Value="Correspondence" Visible="false" />
                    <telerik:RadTab Text="Comments" Value="Comments" Visible="false" />
                    <telerik:RadTab Text="Miscellaneous" Value="Misc" Visible="false" />
                    <telerik:RadTab Text="Online Activity" Value="OnlineActivity" />
                    <telerik:RadTab Text="Attachments" />
                </Tabs>
            </telerik:RadTabStrip>
     
            <telerik:RadMultiPage ID="InquiryDetailNotesMultiPage" runat="server" SelectedIndex="0">
                <telerik:RadPageView ID="CombinedPageView" runat="server" Visible="false" Height="100%">
                    <telerik:RadGrid ID="InquiryDetailCombinedGrid" runat="server" AutoGenerateColumns="false" Height="100%">
                        <MasterTableView Height="100%" >
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" />
                                <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" />
                                <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                        </ClientSettings>
                    </telerik:RadGrid>
                </telerik:RadPageView>
                <telerik:RadPageView ID="TransactionsPageView" runat="server" Visible="false" Height="100%">
                    <telerik:RadGrid ID="InquiryDetailTransactionsGrid" runat="server" AutoGenerateColumns="false" Height="100%">
                        <MasterTableView Height="100%">
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" />
                                <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" />
                                <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                        </ClientSettings>
                    </telerik:RadGrid>
                </telerik:RadPageView>
                <telerik:RadPageView ID="CorrespondencePageView" runat="server" Visible="false" Height="100%">
                    <telerik:RadGrid ID="InquiryDetailCorrespondenceGrid" runat="server" AutoGenerateColumns="false" Height="100%">
                        <MasterTableView Height="100%">
                            <Columns>
                                <telerik:GridBoundColumn  HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" />
                                <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" />
                                <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                        </ClientSettings>
                    </telerik:RadGrid>
                </telerik:RadPageView>
                <telerik:RadPageView ID="CommentsPageView" runat="server" Visible="false" Height="100%">
                    <telerik:RadGrid ID="InquiryDetailCommentsGrid" runat="server" AutoGenerateColumns="false" Height="100%">
                        <MasterTableView Height="100%">
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" />
                                <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" />
                                <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                        </ClientSettings>
                    </telerik:RadGrid>
                </telerik:RadPageView>
                <telerik:RadPageView ID="MiscellaneousPageView" runat="server" Visible="false" Height="100%">
                    <telerik:RadGrid ID="InquiryDetailMiscellaneousGrid" runat="server" AutoGenerateColumns="false" Height="100%">
                        <MasterTableView Height="100%">
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" />
                                <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" />
                                <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                        </ClientSettings>
                    </telerik:RadGrid>
                </telerik:RadPageView>
                <telerik:RadPageView ID="OnlineActivityPageView" runat="server" Height="100%">
                    <telerik:RadGrid ID="InquiryDetailOnlineActivityGrid" runat="server" AutoGenerateColumns="false" Height="100%">
                        <MasterTableView Height="100%">
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Date/Time" DataField="Date" DataFormatString="{0:g}" UniqueName="OnlineActivityDate" DataType="DateTime" HeaderStyle-Width="130px" />
                                <telerik:GridTemplateColumn HeaderText="Activity" UniqueName="Activity">
                                    <ItemTemplate>
                                        <%# AccountActionType((IAccountAction)Container.DataItem)%>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn HeaderText="User" DataField="UserFullName" UniqueName="UserFullName" />
                                <telerik:GridBoundColumn HeaderText="Details" DataField="Details" UniqueName="Details" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                        </ClientSettings>
                    </telerik:RadGrid>
                </telerik:RadPageView>
                <telerik:RadPageView ID="AttachmentsPageView" runat="server" Height="100%">
                    <telerik:RadGrid ID="InquiryDetailAttachments" runat="server" AutoGenerateColumns="false" Height="100%">
                        <MasterTableView Height="100%">
                            <Columns>
                                <telerik:GridBoundColumn HeaderText="Date/Time" DataField="UploadDate" DataFormatString="{0:g}" UniqueName="UploadDate" DataType="DateTime" HeaderStyle-Width="130px" />
                                <telerik:GridTemplateColumn HeaderText="Name" UniqueName="Name">
                                    <ItemTemplate>
                                        <%# AttachmentLink((CawFile)Container.DataItem) %>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn HeaderText="File Size" DataField="FormattedFileSize" UniqueName="FormattedFileSize" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
                        </ClientSettings>
                    </telerik:RadGrid>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </telerik:RadPane>
    </telerik:RadSplitter>
     
    <telerik:RadScriptBlock ID="GridDimensionScriptBlock" runat="server">
        <script type="text/javascript">
     
            // this function will set the MultiPage dimensions and then for every PageView in the MultiPage,
            // the nested RadGrid within the PageView will be redrawn to fulfill the new CSS rules.
            function SetElementDimensions(sender, args) {
     
                // set the dimensions according to the new window size
                var setHeight = SetMultiPageDimensions();
     
                // get the multi page control to interate through the page views
                var telerikMultiPage = $find("<%= InquiryDetailNotesMultiPage.ClientID %>");
                var pageCollection = telerikMultiPage.get_pageViews();
     
                // iterate the page views
                for (var i = 0; i != pageCollection._data.length; ++i) {
                    var pageIteration = pageCollection._data[i];
                    // check the size on the Page View element to make sure that it is sized at 100
                    var pageElement = $("#" + pageIteration._element.id);
                    pageElement.height(setHeight);
     
                    // if the page has children, use them to select the grid by its id and set rgDataDiv height
                    if (pageIteration._element.children.length > 0) {
                        var nestedGridId = pageIteration._element.children[0].id;
                        var nestedGrid = $find(nestedGridId);
                        $("#" + nestedGridId).height(setHeight);
                        nestedGrid.repaint();
                    }
                }
     
            }
     
            // Calculates and sets the height of the MultiPage element. This is accomplished by getting the top offset of the tabStrip and the
            // height of the tabStrip. These dimensions are then added together and subtracted from the height of the splitter itself for
            // the needed difference.
            function SetMultiPageDimensions(sender, args) {
                // get overall height available
                var splitterDivHeight = $("#" + "<%= InquiryDetailSplitter.ClientID %>").height();
                var tabStripDiv = $("#" + "<%= InquiryDetailNotesTabStrip.ClientID %>");
     
                // figure out the offset of the tab strip, and the height of the tabStrip to use in calculating available space
                // additional two: one for border and one for extra space
                var topOffset = tabStripDiv.offset().top + tabStripDiv.height() + 2;
     
                var additionalInfoMultiPageDiv = $("#" + "<%= InquiryDetailNotesMultiPage.ClientID %>");
     
                var heightToSet = splitterDivHeight - topOffset;
     
                additionalInfoMultiPageDiv.height(heightToSet);
     
                return heightToSet;
            }
        </script>
    </telerik:RadScriptBlock>
  2. KO
    KO avatar
    17 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    Am I going about this completely wrong? Honestly, if I can go about this just using CSS rules and forego the javascript altogether that would be optimal. Thanks for any assistance.
  3. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 20 Jun 2012 Link to this post

    Hi,

    In your case you need to set a different height to the RadGrid, e.g. calculate the available space on the screen with Javascript and set the RadGrid height client-side.

    Regards,
    Pavlina
    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.
Back to Top