Grid scroll height bug?

8 posts, 1 answers
  1. Steve
    Steve avatar
    1766 posts
    Member since:
    Dec 2008

    Posted 23 Apr 2012 Link to this post

    If I set scrollable and set the height, it puts the height on the "k-grid k-widget" element, but then the SAME value on the "k-grid-content" child item. 

    So shouldn't ...k-grid be the height, but the k-grid-content be (k-grid - k-grid-header)?

  2. Dimo
    Admin
    Dimo avatar
    7506 posts
    Member since:
    Sep 2012

    Posted 24 Apr 2012 Link to this post

    Hi Steve,

    I am not aware of such a behavior. Please check this demo:

    http://demos.kendoui.com/web/grid/index.html

    The Grid height is set to be 360px, while the content area is calculated on the fly and is less.

    Regards,
    Dimo
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. Steve
    Steve avatar
    1766 posts
    Member since:
    Dec 2008

    Posted 24 Apr 2012 Link to this post

    Wierd...here's my page

    <%@ Control Language="C#" %>
     
    <sitefinity:JavaScriptEmbedControl ID="kendoUIScript" runat="server" ScriptEmbedPosition="InPlace" Url="~/include/scripts/KendoUI/kendo.web.min.js" />
    <sitefinity:CssEmbedControl runat="server" Url="~/include/styles/Kendo/kendo.medportal.min.min.css" />
     
    <style type="text/css">
        #options-area
        {
            margin-top: 55px;
        }
         
        #options-area label
        {
            font-weight:bold;
        }
         
        #options-area .item
        {
            margin-bottom: 5px;
        }
         
        .k-grid.k-widget
        {
            border: 1px solid #e6e6e6 !important;
        }
        .k-grid-content
        {
            background: #fff;
        }
    </style>
     
    <div class="sfContentViews sfViewsTopSep" style="width: 600px;">
        <div class="header">
            <h3>
                <label for="selectedID">Selected Forum:</label>
                <span id="selectedIDLabel">None</span>
            </h3>
            <input id="selectedID" type="hidden" />
        </div>
        <ul id="forumGrid">
        </ul>
        <div id="options-area">
            <div class="item">
                <label for="selectedID">Count:</label>
                <input id="count" type="text" />
                <div class="sfExample">How many should we show on the page</div>
            </div>
        </div>
    </div>
     
    <script type="text/javascript">
        $(document).ready(function () {
            $("#count").kendoNumericTextBox({
                min: 1,
                format: "#"
            });
     
            $("#forumGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "http://" + window.location.hostname + "/Sitefinity/Services/Medportal/Community/ForumService.svc/forums",
                            dataType: "json"
                        }
                    }
                },
                height: 315,
                groupable: false,
                scrollable: true,
                sortable: true,
                pageable: false,
                selectable: "row",
                columns: [{
                    title: "Forum ID",
                    field: "Id",
                    filterable: true,
                    width: 75,
                    template: '<span class="key">${Id}</span>'
                },
                        {
                            field: "Name",
                            filterable: true,
                            template: '<span class="name">${Name}</span>'
                        },
                        {
                            field: "ThreadCount",
                            title: "Threads",
                            width: 60,
                            filterable: true,
                        },
                        {
                            field: "PostCount",
                            title: "Posts",
                            width: 60,
                            filterable: true,
                        }
                        , {
                            field: "Created",
                            width: 150,
                            template: '#= kendo.toString(new Date(Created),"yyyy-MMM-dd") #'
                        }
                ],
                change: function (e) {
                    // Selection event changed
                    var selectedID = $("#forumGrid .k-state-selected .key").html();
                    var selectedName = $("#forumGrid .k-state-selected .name").html();
     
                    $("#selectedID").val(selectedID);
                    $("#selectedIDLabel").html(selectedID + " - " + selectedName);
                },
                dataBound: function (e) {
                    var grid = $("#forumGrid").data("kendoGrid");
                    // selects grid item
                    grid.select(grid.tbody.find("td .key:contains('" + $("#selectedID").val() + "')").closest("tr"));
                }
            });
        });
     
    </script>


    And if you watch this video: http://screencast.com/t/8bDlAUcEgvmO

    The height is the same forcing me into a large margin to move the content below it instead of hidden under it.  Also the cssing a border doesn't work right...because the inner height overflows out of the outer (315px + 71px inner, 315 total outer)

  4. Dimo
    Admin
    Dimo avatar
    7506 posts
    Member since:
    Sep 2012

    Posted 24 Apr 2012 Link to this post

    Oh, yes - the Grid is initialized while it is inside a container with a display:none style. This is currently not supported - please do one of the following:

    + initialize it at a later stage
    + remove the outer div's height with Javascript
    + calculate and set the inner div's height

    Greetings,
    Dimo
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  5. Steve
    Steve avatar
    1766 posts
    Member since:
    Dec 2008

    Posted 24 Apr 2012 Link to this post

    Ah okay...any chance you guys would give us a repaint() method (or whatever you want to call it) to do that recalc for us?

  6. Dimo
    Admin
    Dimo avatar
    7506 posts
    Member since:
    Sep 2012

    Posted 24 Apr 2012 Link to this post

    Hi Steve,

    The current implementation does not allow to include such a method easily, but I suppose we will have to add it one way or the other in the future in order to support the discussed scenario.

    Regards,
    Dimo
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  7. Steve
    Steve avatar
    1766 posts
    Member since:
    Dec 2008

    Posted 24 Apr 2012 Link to this post

    I'd add it to uservoice to track, but the implimentation there makes that impossible...I only get 10 votes...forever.  So I can never vote on new things or add new things. :)

  8. Answer
    Brandon
    Admin
    Brandon avatar
    21 posts
    Member since:
    Jul 2014

    Posted 25 Apr 2012 Link to this post

    Hi Steve,

    We appreciate your enthusiasm for UserVoice, and I personally enjoyed the email conversation we were able to have about it offline yesterday. I said this over email yesterday, but I'll share it again here so as to tie-off this thread. 

    I've discussed the suggestion of raising the vote limit over at UserVoice, and we've decided not to raise the limit for the time being. The economics of UserVoice (making ideas and votes scarce resources) makes sense to us, and we think the current vote limit is appropriate as very few users are hitting this ceiling.

    I also want to point out that your votes aren't gone forever. You get them back when an item is closed (or declined), or when you remove votes from an active item you've voted on in the past. So you do have options when it comes to recapturing votes. And if you voted for a popular item that you're invested in, take to Twitter and drum up support! The faster we implement something, the faster it's closed and you'll get those votes back.

    Thanks again for your feedback and for the discussion.

    Brandon

Back to Top