default Grid column width ,column order

Hi, 


In the DataGrid, I use AllowResizing, AllowReordering and EnablePersistence. How can I set default values for column order and column width for the first time when the user runs the page?


thank you


12 Replies

NP Naveen Palanivel Syncfusion Team January 5, 2023 01:48 AM UTC


Hi Sarah,


Based on your query, we suspect you want clear persistence when grid is created. We have ResetPersistDataAsync used inside the grid created event. Please refer the code snippet and documentation for more information.


public void CreatedHandler(object args)

    {

        Grid.ResetPersistDataAsync();

    }

 


Documentation ; https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync
                            https://blazor.syncfusion.com/documentation/datagrid/state-management#handling-grid-state-manually
                    https://blazor.syncfusion.com/documentation/datagrid/events#created


Please let us know if you have any concerns.


Regards,

Naveen Palanivel



SA Sarah replied to Naveen Palanivel March 28, 2023 12:23 PM UTC

Hi,

I don't want to reset all user settings. Suppose we have columns A, B, C, D. I hide column C by default in the source code. The first time the user opens the page, there is a hidden C that can be removed from the hidden state. The next time the user opens the page, I want the same settings that the user set last time to be displayed, and I don't want to reset the settings.


I want the following items to be removed from the data grid settings on page load:

1-Grid_Column_HeaderFilter



2-Grid_ToolbarItem_Search_content



3-Grid_Column_Sort




MS Monisha Saravanan Syncfusion Team April 14, 2023 06:39 AM UTC


Hi Sarah,


Thanks for the patience.


Query: “I want the following items to be removed from the data grid settings on page load”


Yes we can achieve your requirement by clearing the unwanted settings in the persist properties and we suggest you to set new properties in Grid settings.


We have discussed the similar query on the below tread. So kindly refer the attached thread for your reference.


Reference: https://www.syncfusion.com/forums/172940/datagrid-toolbar-items-icon?reply=S2Jkb8


Also please find the attached sample using latest Nuget version for additional information and let us know if you face any difficulties.


Attachment: DataGrid_8fed2d8d.zip


SA Sarah replied to Monisha Saravanan December 27, 2024 10:55 AM UTC

Hi,

Thank you for your response and the problem has been resolved.

There is a problem that I followed up on in other forums and did not reach a conclusion and I am raising it here, maybe the problem will be resolved.

In the DataGrid component, I set the DataSource. One problem that exists is that sometimes, although the data source contains data, it is not displayed in the DataGrid Component. This problem existed and exists in different versions of Syncfusion, and unfortunately, I did not find a solution to this problem after following up. One point is that when the data source contains data and the DataGrid does not display it, when I click the Delete Settings button (the button that you guided and created in the previous post), it displays the data. Can you fix the problem of not displaying data in the DataGrid with this guide?

I am using the code below but the problem is still not resolved.


protected async override Task OnInitializedAsync()

{

 await GetDataGridData();

 await Task.Delay(300);

 await myGrid.Refresh();

 this.StateHasChanged();

}

 public async Task OnDataGridDataBound()

{

await ResetGridSetting(myGrid);

}



NP Naveen Palanivel Syncfusion Team December 31, 2024 01:17 AM UTC

Hi Sarah,


We have reviewed your query and noticed that, even though the data exists in the data source, it is not being displayed in the Grid. Before proceeding further, kindly provide the following details:


  • Please share the Grid code snippet along with the model class.
  • Please share your exact issue with a detailed explanation
  • Please share details about how the data is being added to the data source—whether it is during the initial rendering or dynamically, such as when a button is clicked to add data.
  • Share a video demonstration of the issue with a detailed explanation. This will greatly assist us in understanding the problem
  • share us an simple issue replicating sample

The above requested details will be very helpful for us to validate your requirement.


Regards,

Naveen



SA Sarah October 6, 2025 04:05 PM UTC

Hello,

I have designed a report that displays different data based on an input parameter.

I am using the DataGrid component with EnablePersistence="true", and users can show or hide specific columns.


Since the report changes based on the parameter value, I want each report to have its own grid settings (such as column visibility).

To achieve this, I set the Name property of the DataGrid dynamically based on the input parameter.


However, when a user makes a change (for example, hides or shows a column) in one report, the same change is also applied to the other reports.

It seems that the persisted settings are shared across grids, even though their names are different.


Please advise how I can make each report maintain its own persistence settings independently.



PS Prathap Senthil Syncfusion Team October 7, 2025 09:50 AM UTC

Thank you for contacting us.


Based on the reported issue we suspect that the issue might be due to using a custom Grid component with the same Grid ID and persistence enabled across multiple pages. In such cases, any changes made to one Grid instance can affect all other instances because the state is shared. To resolve this, we recommend assigning a unique Grid ID to each Grid instance. This will ensure that each Grid maintains its own state independently and avoids unintended behavior across different pages.

If the issue still persists after implementing this change, we kindly request the following details to help us investigate further:

  • The Grid code snippets along with the associated model class.
  • A simple, reproducible sample that demonstrates the issue.
  • A video showing the issue along with the steps to reproduce it.

These details will help us analyze the problem more effectively and provide a timely resolution. If needed, we’ll also be happy to assist you in implementing the suggested approach.



SA Sarah replied to Prathap Senthil October 9, 2025 02:21 PM UTC

Hello,

The source code is as follows.


Image_5373_1760019314917







SA Sarah October 9, 2025 02:22 PM UTC

The source code is as follows.


Image_2110_1760019577761





NP Naveen Palanivel Syncfusion Team October 13, 2025 08:58 AM UTC

Hi Sarah,

We reviewed your query and understand that you want to display different report data based on an input parameter, while ensuring that each report maintains its own independent persistence settings—such as column visibility—in the Syncfusion DataGrid.

We achieved your requirement by destroying and recreating the grid for each input parameter. This approach ensures that each report maintains its own persistence settings independently. If you switch back to a previously used parameter, the grid restores its previous state based on the provided ID in the SfGrid. Please refer to the code and sample for more information.

Sample : https://blazorplayground.syncfusion.com/embed/BXBSMjCAhRlzRDyj?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

@if (RequestId > 0 && showGrid == true)

{

    <SfGrid @ref="myGridCall" ID="@strDataGridId" DataSource="@lstDataGridSource" GridLines="GridLine.Both"

    EnableStickyHeader="true" Toolbar=@ToolbarItems ShowColumnChooser="true" AllowPaging="true"

    AllowSorting="true" AllowFiltering="true" AllowResizing="true" EnablePersistence="true"

    AllowReordering="true" Width="100%" RowHeight="40">

        <GridFilterSettings Type="FilterType.Excel"></GridFilterSettings>

        <GridSelectionSettings Mode="SelectionMode.Row"></GridSelectionSettings>

        <GridEvents OnDataBound="OnDataGridDataBound" TValue="EmployeeData"></GridEvents>

        <GridPageSettings PageSize="10" PageSizes="new int[] { 10, 20, 50 }"></GridPageSettings>

        <GridSearchSettings Operator="Syncfusion.Blazor.Operator.Contains" IgnoreCase="true"></GridSearchSettings>

 

        <GridColumns>

            <GridColumn Field="Id" HeaderText="ID" Width="100"

        </GridColumns>

    </SfGrid>

}

 

@code {

    private SfGrid<EmployeeData> myGridCall;

    private string RequestIdInput;

    private int _RequestId;

    public List<EmployeeData> lstDataGridSource = new();

    public string strDataGridId => "GridID" + RequestId;

 

    int RequestId;

 

    bool showGrid;

 

    private async Task ValueChangedHandler(String args)

    {

 

        string input = args.ToString();

 

        if (int.TryParse(input, out int value))

        {

            RequestId = value;

 

            LoadDataForRequestId(RequestId);

 

            showGrid = false;

 

            await Task.Yield();

            showGrid = true;

 

        }

 

    }


Regards,
Naveen



SA Sarah replied to Naveen Palanivel October 14, 2025 06:51 AM UTC

Hello and thank you for your response. Unfortunately, the link isn't working. If possible, please provide the source file. ValueChanged is not one of the Grid events.



NP Naveen Palanivel Syncfusion Team October 15, 2025 12:50 PM UTC

Hi Sarah,

Based on your request, we have prepared a sample project instead of a Playground link. Regarding the ValueChanged event — it is the event of the SfTextBox component. If you want to display different report data based on an input parameter, that parameter can be entered using the SfTextBox component.

Regards,
Naveen


Attachment: DataGridServerAppNet9_(2)_e1bca7f8.zip

Loader.
Up arrow icon