This is a migrated thread and some comments may be shown as answers.

Resize and Expand the Grid 100% Height

5 Answers 3534 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Graham
Top achievements
Rank 1
Veteran
Graham asked on 11 Dec 2019, 05:09 PM

This is an example of how it was done using Kendo UI - http://dojo.telerik.com/EviNI

 

Is there a way of doing the same with the Blazor grid?

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 11 Dec 2019, 06:59 PM

Hi Graham,

The underlying concept is the same - you need to have an HTML structure that provides the desired dimensions for the layout you are looking for.

So, you should create a <div> element to hold the grid and have that element stretch to the desired size - whether CSS alone will suffice will depend on the layout and goal you have. Then, add a TelerikGrid in it and set its Height="100%".

If you want to calculate dimensions dynamically, you can use JS Interop in a fashion similar to the example for responsive charts we have. The idea is that JS Interop will calculate the needed dimensions from the DOM and pass them along to the C# code - in this example a static class is used because it's easiest to call from JS Interop. Once you have the data in the view model, you can use it as a parameter value.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Graham
Top achievements
Rank 1
Veteran
answered on 12 Dec 2019, 04:45 PM

I have tried to adapt the Responsive Chart example but the Grid component does not have a Refresh() method.

Is there another way of getting the grid to re-render after the window resizes?

 

    protected async Task ResizeChart()
    {
        // now that you know the size of the chart container changed, re-render the chart
        ChartRef.Refresh(); 
        

0
Marin Bratanov
Telerik team
answered on 12 Dec 2019, 04:51 PM

Hello Graham,

If you resize the div holding the grid, and the grid has Height="100%", the browser should re-render it without extra steps.

If you want to set the grid height yourself, read the Height parameter from a field in the view model, and set that field from the event the JS Interop will raise. You may need to call StateHasChanged() at that point.

The grid should not need such a Refresh method, it is specific to the charts.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
1
Shawn
Top achievements
Rank 2
answered on 12 Jun 2020, 10:17 PM
Can we get some example code that shows a Grid at 100%,100% and resizes as I resize the browser window?
0
Marin Bratanov
Telerik team
answered on 13 Jun 2020, 07:21 AM

Hi Shawn,  

Another customer of ours made the following sample that shows one way to do this (an a few other things he uses): https://github.com/telerik/blazor-ui/tree/master/grid/adjust-height-with-browser

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Graham
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Graham
Top achievements
Rank 1
Veteran
Shawn
Top achievements
Rank 2
Share this question
or