1. Home
  2. Forum
  3. Blazor
  4. Responsive Grid

Responsive Grid

Dear Support,
I would like to ask how can I get a responsive grid as described below:

Laptop Screen



Mobile  Screen





7 Replies
VN Vignesh Natarajan Syncfusion Team March 18, 2020 01:07 PM UTC

Hi Stephanie.  
 
Greetings from Syncfusion support  
 
Query: “I would like to ask how can I get a responsive grid as described below:” 
 
We have analyzed your query and found that you want to display Grid in two different format in two different modes (like laptop and mobile). We do not have direct support to achieve your requirement. But we can achieve your requirement by rendering  transposed grid when device type is of Mobile.  
 
Transposed Grid will refer the interchange of rows and columns. We have used column template feature to display the text inside the transposed Grid. For normal Grid, you can define the data source directly. But for Transposed Grid, we need to modify the Grid data.  
 
Refer the below code example.  
 
@inject IHttpContextAccessor httpContextAccessor 
  
@if (TransposedGrid != null) 
{ 
    //To difference normal Grid and transposed Grid 
    if (TransposedGrid == true) 
    { 
        <EjsGrid ID="TGrid" TValue="ExpandoObject" GridLines="GridLine.Vertical" RowHeight="60" Width="900" DataSource="@Transposed"> 
            <GridColumns> 
                @foreach (var col in Cols) 
                { 
                    <GridColumn Field="@col" Width="100"> 
                        <Template> 
                            @{ 
                                dynamic data = (context as ExpandoObject); 
                                <span>@(((IDictionary<String, Object>)data)[col])</span> 
  
                            } 
                        </Template> 
                    </GridColumn> 
                } 
            </GridColumns> 
        </EjsGrid> 
    } 
    else 
    { // render normal grid 
        <EjsGrid TValue="Order" Width="900" AllowPaging="true" DataSource="@Orders"> 
        </EjsGrid> 
    } 
  
} 
<style>    
    TGrid.e-grid .e-gridcontent { 
        border-top: 1px solid rgb(224, 224, 224); 
    } 
  
    #TGrid.e-grid .e-gridheader { 
        display: none; 
    } 
</style> 
@code{ 
    protected override async Task OnInitializedAsync() 
    { 
        //determine whether the device is mobile or not. 
        string device = httpContextAccessor.HttpContext.Request.Headers["user-agent"]; 
        if (device.Contains("Mobile")) 
. . . . . . . . . . . . ..  
        } 
        //normal datasource 
        Orders = Enumerable.Range(1, 45).Select(x => new Order() 
        { 
            OrderID = 1000 + x, 
. . .. . . . . . .. . . 
        }).ToList(); 
 
        //generating a transposed records 
        foreach (PropertyInfo prop in Orders[0].GetType().GetProperties()) 
        { 
. . . .. . . . . 
            Transposed.Add(list); 
        } 
    } 
} 
 
 
For your convenience we have prepared a sample which can be downloaded from below 
 
 
Note: Transposed Grid can be used only for display purpose.  
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 


SK Stephanie Koronidou March 19, 2020 08:14 AM UTC

Thank you for the reply. I will try the proposed solution and I will get back to you.

I have another question. Is it possible that the grid dimensions (width and height) to change automatically based on the size of the screen? and therefore the number of pages will change accordingly?



VN Vignesh Natarajan Syncfusion Team March 20, 2020 04:15 AM UTC

Hi Stephanie,  
 
Query: “ Is it possible that the grid dimensions (width and height) to change automatically based on the size of the screen?” 
 
By default Grid will adjust to its parent element. For default page, body element will be parent element. So if you resize the browser, Grid will be adjusted to it.  If you have customized the page for side bar, container etc. Then we need to define specific height and width to Grid parent element. And also need to specify Grid’s Width and Height property as 100%.  
 
Kindly refer our UG documentation or your reference. 
 
 
Kindly get back to us if you have further queries.  
 
Query2: “therefore the number of pages will change accordingly?” 
 
Using above solution will adjust the Grid height and width to its parent width, so that scroller will be rendered in Grid. you can scroll down to view the records. If you want to modify the page size of the Grid instead of scroller based on the screen size, then it can be achieved using only JavaScript function. So kindly confirm whether it is fine for you to use a JavaScript function to achieve your requirement. 
 
Based on your confirmation we will prepare a sample and update you the further details.  
 
Regards, 
Vignesh Natarajan. 


SK Stephanie Koronidou March 26, 2020 08:05 AM UTC

Dear Support,
Thank you for the reply.

Regarding my first Query.
Please note on the picture below: the parent element (class=main) is taking the whole page however the height of the grid is not adjusted to the height of the parent element.






VN Vignesh Natarajan Syncfusion Team March 27, 2020 06:15 AM UTC

Hi Stephanie,  
 
Query: “the parent element (class=main) is taking the whole page however the height of the grid is not adjusted to the height of the parent element.” 
 
Grid will adjusted to height and width based on its direct parent height an width. From the screenshot attached we could see that div element with class main is not direct parent of the Grid component. Hence it does not occupy entire space. For a default Blazor application with Grid control, div element with classname “content px-4” is the direct parent of Grid content. So grid will adapt to its direct parent height and width.  
 
So kindly define Height and Width property of Grid as 100% and specific height to its direct parent. Refer the below code example.  
 
@using Syncfusion.Blazor.Grids <SfGrid DataSource="@Orders" Height="100%" Width="100%" >. . . . . . . .</SfGrid>
[MainLayout.razor] 
@inherits LayoutComponentBase 
  
<div class="sidebar"> 
    <NavMenu /> 
</div> 
  
<div class="main"> 
    <div class="top-row px-4"> 
        <a rel='nofollow' href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> 
    </div> 
  
    <div class="content px-4" style="height: 500px;width:1000px"> 
        @Body 
    </div> 
</div> 
 
 
Kindly refer the below screenshot for your reference 
 
 
 
Note: in above screenshot, we have define the static height to Grid direct parent.  
 
Refer our UG documentation for your reference 
 
 
Kindly get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan. 


SK Stephanie Koronidou March 27, 2020 10:17 AM UTC

Dear Support,
Thank you for your help. Regarding my second query, can you please provide the JavaScript function to use in order to modify the page size of the Grid based on the screen size? 

VN Vignesh Natarajan Syncfusion Team March 30, 2020 10:47 AM UTC

Hi Stephanie, 
 
Query: “can you please provide the JavaScript function to use in order to modify the page size of the Grid based on the screen size? ” 
 
As per your request we have prepared a sample using Created event to call a JavaScript function. In that function we have changed the grid page size based on window height. Refer the below sample for your reference. 
 
 
kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan.  


Loader.
Up arrow icon