Grid wont resize within a splitter

4 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Mar 2013

    Posted 20 Aug 2014 Link to this post

    Hi I am having some issues with a grid within a splitter.  I have three panes and the grid is in the middle.  If i open and close either pane the grid will re size to stay visible without a scroll bar.  but if you manually re size a column and then open a splitter it does not re size like it did before.  Is there something im missing? here is a JSbin that shows whats happening

    http://jsbin.com/fuhuvecisova/1/edit

    if that doesnt work here is the code that does it.

    <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/splitter/index">
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
        <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
    </head>
    <body>
        
            <div id="example">
                <div id="vertical">
                    <div id="top-pane">
                        <div id="horizontal" style="height: 100%; width: 100%;">
                            <div id="left-pane">
                                <div class="pane-content">
                                    <h3>Inner splitter / left pane</h3>
                                    <p>Resizable and collapsible.</p>
                                </div>
                            </div>
                            <div id="center-pane">
                               <div id="example">
                <div id="grid"></div>

                <script>
                    $(document).ready(function () {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                                },
                                pageSize: 20
                            },
                            height: 550,
                            groupable: true,
                            sortable: true,
                          resizable: true,
                            pageable: {
                                refresh: true,
                                pageSizes: true,
                                buttonCount: 5
                            },
                            columns: [{
                                field: "ContactName",
                                title: "Contact Name",
                                width: 200
                            }, {
                                field: "ContactTitle",
                                title: "Contact Title"
                            }, {
                                field: "CompanyName",
                                title: "Company Name"
                            }, {
                                field: "Country",
                                width: 150
                            }]
                        });
                    });
                </script>
            </div>
                            </div>
                            <div id="right-pane">
                                <div class="pane-content">
                                    <h3>Inner splitter / right pane</h3>
                                    <p>Resizable and collapsible.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </div>

                <script>
                    $(document).ready(function() {
                        $("#vertical").kendoSplitter({
                            orientation: "vertical",
                            panes: [
                                { collapsible: false },
                                { collapsible: false, size: "100px" },
                                { collapsible: false, resizable: false, size: "200px" }
                            ]
                        });

                        $("#horizontal").kendoSplitter({
                            panes: [
                                { collapsible: true, size: "120px" },
                                { collapsible: false, },
                                { collapsible: true, size: "120px" }
                            ]
                        });
                    });
                </script>

                <style scoped>
                    #vertical {
                        height: 380px;
                        width: 700px;
                        margin: 0 auto;
                    }

                    #middle-pane { background-color: rgba(60, 70, 80, 0.10); }
                    #bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
                    #left-pane, #center-pane, #right-pane  { background-color: rgba(60, 70, 80, 0.05); }

                    .pane-content {
                        padding: 0 10px;
                    }
                </style>
            </div>


    </body>
    </html>
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Aug 2014 Link to this post

    Hello Michael,

    When there are widthless columns in the Grid, they are able to shrik and expand together with the Grid. As soon as you resize a column ("A"), however, the Grid table receives a pixel width, which ensures that all other columns do not change their width during and after the resize of "A". That's why the Grid table stops resizing together with the Grid.

    The observed behavior is by design. Please choose which features and behaviors are more important to you and what you are ready to sacrifice. Let me know if you need more information. Here is some documentaiton how the Grid behaves.

    http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

    http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#scrolling

    On a side note, having nested scrollbars is not convenient for end users. Please disable the Splitter pane scrollbars and use only the Grid scrollbars. The Grid must be 100% high in this case.

    http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#making-the-grid-100-high-and-auto-resizable

    You don't have to call the Grid's resize() method in this case, because the Splitter will do that.

    http://jsfiddle.net/dimodi/76k8W/4/

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    3 posts
    Member since:
    Mar 2013

    Posted 21 Aug 2014 in reply to Dimo Link to this post

    Im not sure that's 100% expected because in the example I gave you if you alter one of the columns with width already one of the columns with no width doesn't get set and should expand and contract but doesn't.  But if that's expected ill try and work around it.
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Aug 2014 Link to this post

    Hello Michael,

    The Grid table receives a width during column resize, no matter which column you resize. This is the only way to ensure that all columns, except the one that is resized, will persist their widths. So yes, the observed behavior is expected and by design (when scrolling is enabled).

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready