Grid - Lots of Columns

[Preveen]

Hi,

How do I manage a grid that has around 20 to 25 columns?

The column names are not displayed fully.

I can't seem to enable horizontal scrolling.

Also: Is there a better way to show all the columns, other than horizontal scrolling...

Thanks!

[Vignesh Natarajan]

Hi Preveen,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I can't seem to enable horizontal scrolling. Also: Is there a better way to show all the columns, other than horizontal scrolling...” 

 

Horizontal scrollbar can be enabled in Grid by defining the Width property of the Grid. we have already documented this topic in our UG documentation. Please refer the below UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/scrolling/#scrolling  

 

Note: Horizontal scroller in Grid is better way to display contents of all columns when count is more. 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Preveen]

Is it possible to set the width only for the content of the grid?

Right now the entire grid control is resized. This creates a page wide horizontal scroll bar (the nav menu on the left also scrolls).

I just want the horizontal scrolling for the GRID content.

Here's an example of the Syncfusion documentation:

Hopefully this is possible.

Thanks!

[Vignesh Natarajan]

Hi Preveen,  

 

Query: “Is it possible to set the width only for the content of the grid? Right now the entire grid control is resized. This creates a page wide horizontal scroll bar (the nav menu on the left also scrolls).” 

 

Width property of Grid control is used to define the specific width to Grid control alone. If width of content exceeds the width of the Grid, then horiaozntal scrollbar will rendered for Grid control alone. Refer the below code example.  

 

<SfGrid DataSource="@Orders" AllowPaging="true" Width="700"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

      . . . . . .  

    </GridColumns> 

</SfGrid> 

 

  

Refer the below screenshot for the output 

 

 

 

Please find the sample which we have prepared using the latest version Syncfusion.Blazor nuget package.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/159339/ze/BlazorApp2325779760  

 

If you are still having doubt, kindly get back to us with more details along with code example of Grid definition. 

 

Regards,
Vignesh Natarajan 

[Preveen]

Hi Vignesh,

I have tried your sample and it works.

If I apply a fixed width to my grid it also works just like the sample.

I'm using 100% as the width value of the grid, which is why the columns just go off the page.

I need to use 100% so the entire available space is used.

Is there another way of achieving this, without specifying a fixed value?

[Vignesh Natarajan]

Hi Preveen,  

 

Query: “If I apply a fixed width to my grid it also works just like the sample. I'm using 100% as the width value of the grid, which is why the columns just go off the page.” 

 

We have analyzed your query and we understand that you want to render responsive grid inside the container (i.e.) adjust the height and width of Grid inside the container. We suggest you to define the height and width of Grid component as 100% and define static height / width to immediate parent element of the Grid.  

 

Refer the below code example.  

 

<div style="width: calc(100vw - 20rem); height: calc(100vw - 58rem);"> 

//Change the 20rem and 59rem values based on your browser page layout 

    <SfGrid DataSource="@Orders" Height="100%" Width="100%"> 

.. 

.. 

    </SfGrid> 

</div> 

 

Note: kindly specify the static height and width to Grid immediate parent element to adjust the grid inside the container.  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/scrolling/#responsive-with-parent-container  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Preveen]

Hi Vignesh,

This is perfect.

Exactly what I needed.

Thank you!

[Vignesh Natarajan]

Hi Preveen, 

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution. 

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

[Preveen]

Hi,

When I shrink the window width to be very narrow (emulating a mobile device) the entire grid is only about half the width.

What (simple) solution is there to this?

[Renjith Singh Rajendran]

Hi Preveen, 

We would like to inform you that, by default Grid will be rendered/adjusted based on its parent div element’s width and height.  

https://blazor.syncfusion.com/documentation/datagrid/scrolling/#responsive-with-parent-container 

So, as suggested in our previous update, we suggest you to calculate the width and height of grid’s parent div element dynamically using calc based on your application layout.  

Please refer the below codes and try by modifying your width and height values based on your application layout by changing the vh, vw and the rem values. 

 

<div style="width: calc(100vw - 1rem); height: calc(100vh - 2rem);"> 

    //Change the vw, vh and rem values based on your browser page layout 

    <SfGrid DataSource="@Orders" Height="100%" Width="100%"> 

        ... 

    </SfGrid> 

</div> 

Regards, 

Renjith Singh Rajendran 

[Alek]

Has anything changed regarding SfGrid grid content sizing? I also had a lot of difficulty wrangling it into the container size. The e-gridcontent size + e-gridheader size exceeds the SfGrid element's size, and then makes layout really frustrating.

Version:

"Syncfusion.Blazor" Version="18.4.0.35"

I am using the suggested 'hack' but feel this should be handled correctly by syncfusion. Am I missing something?

[Rahul Narayanasamy]

Hi Alek,

Greetings from Syncfusion.

We suspect that you are facing styling issues(grid content size not set properly while setting Grid height using the previously provided solution) in the latest version(v20.1.0.47). We are facing the below case from our end while upgrading to the latest version.

In version – 18.4.0.35

In the latest – v20.1.0.47

If this is the issue(the grid content height is not properly set and the pager is rendered along with grid content) you are currently facing in the latest version, then you can resolve the reported case by adding the below line in _Host.cshtml/_Layout.cshtml /index.html file.

<head>

    . . .

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />

    <script src=https://cdn.syncfusion.com/blazor/20.1.47/syncfusion-blazor.min.js type="text/javascript"></script>

</head>

We would like to inform you that we have included changes in loading scripts and styles in our latest version.

Release notes:

https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes

You can use any one of the below methods to load styles and scripts externally. Also kindly refer to the below ways for your additional information.

CDN	Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference
Static Web Assets	Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets   Styles - https://www.nuget.org/packages/Syncfusion.Blazor.Themes/

If it is not your reported case, then share more details about your problem(screenshot, video).

Please let us know if you have any concerns.

Regards,

Rahul