Maximize Spreadsheet to page size

3 posts, 1 answers
  1. Kenneth
    Kenneth avatar
    14 posts
    Member since:
    Jan 2012

    Posted 16 Feb 2017 Link to this post

    I want to make the Spreadsheet control the same size as the browser window.  So I am trying to use the RadSplitter/RadPane method to do this.  However, it's not really working and there are several weird things happening.

                <telerik:RadSplitter ID="splitter" runat="server" OnClientLoaded="SplitterLoaded"
                    BorderSize="1" PanesBorderSize="1" Width="99%">
                    <telerik:RadPane ID="pane" runat="server" Width="100%">
                        
                        <telerik:RadSpreadsheet runat="server" ID="radSheet" Height="99%" Width="99%" />
                    
                    </telerik:RadPane>
                </telerik:RadSplitter>

     

    1.  As seen in the "sheet_before_event" image, the control doesn't initially fill the RadPane.

    2.  However, after an event is fired (click in my case) the spreadsheet will then fill the RadPane, as seen in "sheet_after_event" image.

    3.  Through all of this the sheet view inside the control remains small with scroll bars.

    Am I trying to do something that isn't currently supported?

     

  2. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    467 posts

    Posted 21 Feb 2017 Link to this post

    Hello Kenneth,

    This appearance is caused by the fact that the Spreadsheet is rendered before the end of the Pane resizing.

    To workaround this issue, one option is to resize the underlying Kendo widget of the Spreadsheet in the OnClientLoaded and OnClientResized event handlers:

    <script>
        function OnClientResized(sender, args) {
            var spreadsheet = $find('<%= radSheet.ClientID %>');
            spreadsheet.get_kendoWidget().resize();
        }
     
        function OnClientLoaded(sender, args) {
            var spreadsheet = $find('<%= radSheet.ClientID %>');
            spreadsheet.get_kendoWidget().resize();
        }
    </script>
    <telerik:RadSplitter ID="splitter" runat="server" OnClientLoaded="OnClientLoaded"
        BorderSize="1" PanesBorderSize="1" Width="99%">
        <telerik:RadPane ID="pane" runat="server" Width="100%" OnClientResized="OnClientResized">
            <telerik:RadSpreadsheet runat="server" ID="radSheet" Height="99%" Width="99%" />
        </telerik:RadPane>
    </telerik:RadSplitter>

    Regards,
    Peter Milchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Kenneth
    Kenneth avatar
    14 posts
    Member since:
    Jan 2012

    Posted 23 Feb 2017 in reply to Peter Milchev Link to this post

    Exactly what I needed!  Thank you!!!
Back to Top