RadGrid resize and repaint

[KO]

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>

[KO]

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.

[Pavlina]

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