100% Grid Height

4 posts, 1 answers
  1. Kenny
    Kenny avatar
    24 posts
    Member since:
    Jan 2015

    Posted 23 May Link to this post

    How does the new 100% grid height work?  Does it take the height of it's container? 

    I removed the height styling from some of my pages, but the grid just keeps expanding and you have to use the browser scroll bar to access it.  This is better than the fixed height, just trying to understand the new support.

    Thanks,

    Kenny

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4712 posts

    Posted 24 May Link to this post

    Hi Kenny,

    By default, the grid now has no height. This means that its element will expand to the height of the rows (which depends on the page size or total number of records).

    If you set Height="100%" this is the style attribute that will be rendered on the wrapping element, so it will take its parent height. You can read more about this in the following article: https://docs.telerik.com/blazor-ui/common-features/dimensions.

    Here is also an example, and at the end of the post is a screenshot that illustrates how this looks:

    @using Telerik.Blazor.Components.Grid
     
    <div style="height: 300px; border: 1px solid red;">
        <TelerikGrid Data="@MyData" Height="100%" Pageable="true">
            <TelerikGridColumns>
                <TelerikGridColumn Field="@(nameof(SampleData.ID))">
                </TelerikGridColumn>
                <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name">
                </TelerikGridColumn>
                <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date">
                </TelerikGridColumn>
            </TelerikGridColumns>
        </TelerikGrid>
    </div>
     
    @functions {
        //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
        public class SampleData
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public DateTime HireDate { get; set; }
        }
     
        public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
        {
            ID = x,
            Name = "name " + x,
            HireDate = DateTime.Now.AddDays(-x)
        });
    }


    Regards,
    Marin Bratanov
    Progress Telerik UI for Blazor
  3. Alexandre
    Alexandre avatar
    1 posts
    Member since:
    Jul 2016

    Posted 09 Jul in reply to Marin Bratanov Link to this post

    Hi Marin!

    TelerikGrid expects decimal value, your example is invalid on the current version. Any workaround?
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4712 posts

    Posted 09 Jul Link to this post

    Hello Alexandre,

    The dimensions properties are strings so you can put valid CSS values in them: https://docs.telerik.com/blazor-ui/common-features/dimensions. This has been the case in the last few versions and if your version expects a number only, then it is using an older version, perhaps up to 1.0.0, because we changed it to string after that. The current latest is 1.3.0 at the time of writing and I advise that you upgrade to it.


    Regards,
    Marin Bratanov
    Progress Telerik UI for Blazor
Back to Top