Set the width of a specific column from code-behind

[richardv]

Hi, I am using an SfSplitter with an SfGrid and would like to be able to  give grid columns a calculated width based on some business logic when the splitter pane is dragged and I handle the Splitter's size change events.

I have already implemented a way to hide columns based on the available space using ShowColumns and HideColumns - but would also like to be able to change the width of specific columns to a value I would like to calculate myself.

I have tried to set the Width property of the column and called Refresh on the column itself/the grid but the width of the column remains the same.

Is it at all possible to change the width of a specific column to another value --from code behind-- after the initial rendering of the grid?

Kind regards,

Richard

[Vignesh Natarajan]

Hi Richard,  

 

Greetings from Syncfusion support. 

 

Query: “Is it at all possible to change the width of a specific column to another value --from code behind-- after the initial rendering of the grid?” 

 

Yes. We can achieve your requirement using RefreshColumns() and GetColumns() methods of the Grid. Refer the below code example.  

 

@using Syncfusion.Blazor.Buttons 

  

<SfButton Content="Change Width" OnClick="Change"></SfButton> 

  

<SfGrid @ref="Grid" DataSource="@Orders" Width="400" AllowPaging="true"> 

    <GridPageSettings PageSize="5"></GridPageSettings> 

    <GridColumns> 

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

. . . .. . . . . . .  

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

    public async Task Change() 

    { 

        var Col = await Grid.GetColumns(); 

        foreach(var wid in Col) 

        { 

            wid.Width = "30"; 

        }         

        Grid.Columns = Col; 

        Grid.RefreshColumns(); 

    } 

. . . . . . .. .  

} 

 

 

Note: We have modified the width of Grid on a button click. 

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/154298/ze/DataGridB-1306724082  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumns_System_Nullable_System_Boolean__  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumns  

 

Kindly get back to us if you have further  

 

Regards, 

Vignesh Natarajan  

[richardv]

Thank you for your reply! Regretfully this was not sufficient for my problem as I have created a custom GridColumn which inherits from GridColumn - in this I added some extra properties to define a growth factor/prioritiy etc in order to decide whether to show the column and to calculatie the required size.

The GetColumns() function does not return my "intstances". The Columns property however does. This surely comes because of JS interop.

Eventually i solved (hacked) my issue using a dictionary in which I set the calculated width and simply did a Width="@GetWidth(column-field-id)" 

[Vignesh Natarajan]

Hi Richard,  

 

We are glad that you have achieved your query and thank you for sharing the information.  

 

Kindly get back to us if you need any other assistance. 

 

Regards,
Vignesh Natarajan