Flexgrid: How to save/load columns position

Flexgrid: How to save/load columns position

Posted by: piero.albino on 8 February 2025, 2:01 am EST

• 

  piero.albino

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 February 2025, 2:01 am EST

  Hi,I have the next question:

  The user reorder and resize the columns in a grid for better view of the information. However, everytime the page refresh the grid configuration is reset.
  
  I want to know if it’s possible to save and load the columns configuration(position and width). The data binding of the flexgrid is “on demand” mode.
  
  Please include the source code.
  
  Thank you.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 10 February 2025, 6:20 am EST - Updated 10 February 2025, 6:25 am EST

  Hi,

  Please find attached a sample demonstrating how to save the grid layout, including position and width, as a string and then restore it from that string.

  In this example, I am storing the state string in the browser’s “localStorage” and retrieving it from there. You can adapt this to store and retrieve the data from a database if needed.

  Additionally, the sample includes functionality for saving and loading sorting and filter configurations along with the column settings.

  Feel free to review the attached sample, and let me know if you encounter any issues.

  Regards,

  Ankit

  FlexGrid_Events_updated.zip

  

• 

  piero.albino

  • Post Options:
  • Link
    Copy

  Posted 10 February 2025, 3:02 pm EST

  Hi,
  
  Thank you for the response and the sample project. It would give some insight of how to implement it. But my question goes to if it’s possible to save/load the layout when i have set static number of columns used as follow:

  [code]
  
  <FlexGrid ItemsSource=“Items” @ref=“Grid” FrozenRows=“1” AutoGenerateColumns=false NewRowPosition=“GridNewRowPosition.Bottom” SelectionMode=“C1.Blazor.Grid.GridSelectionMode.Cell”>
  
  
  
  <C1.Blazor.Grid.GridColumn Binding=“BillToCustomer” Header=“BillToCustomer” Width=“150” HorizontalAlignment=“C1HorizontalAlignment.Center” HeaderHorizontalAlignment=“C1HorizontalAlignment.Center” />
  
  <C1.Blazor.Grid.GridColumn Binding=“BuyingGroup” Header=“BuyingGroup” Width=“150” HorizontalAlignment=“C1HorizontalAlignment.Center” HeaderHorizontalAlignment=“C1HorizontalAlignment.Center” />
  
  <C1.Blazor.Grid.GridColumn Binding=“PrimaryContact” Header=“PrimaryContact” Width=“150” HorizontalAlignment=“C1HorizontalAlignment.Center” HeaderHorizontalAlignment=“C1HorizontalAlignment.Center” />
  
  <C1.Blazor.Grid.GridColumn Binding=“Category” Header=“Category” Width=“150” HorizontalAlignment=“C1HorizontalAlignment.Center” HeaderHorizontalAlignment=“C1HorizontalAlignment.Center” />
  
  <C1.Blazor.Grid.GridColumn Binding=“Customer” Header=“Customer” Width=“150” HorizontalAlignment=“C1HorizontalAlignment.Center” HeaderHorizontalAlignment=“C1HorizontalAlignment.Center” />
  
  <C1.Blazor.Grid.GridColumn Binding=“PostalCode” Header=“PostalCode” Width=“150” HorizontalAlignment=“C1HorizontalAlignment.Center” HeaderHorizontalAlignment=“C1HorizontalAlignment.Center” />

      <C1.Blazor.Grid.GridColumn Binding="Sales" Header="Sales" Width="100" HorizontalAlignment="C1HorizontalAlignment.Center" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" Aggregate="C1.Blazor.Grid.GridAggregate.Sum" />
      <C1.Blazor.Grid.GridColumn Binding="SalesGross" Header="SalesGross" Width="100" HorizontalAlignment="C1HorizontalAlignment.Center" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" Aggregate="C1.Blazor.Grid.GridAggregate.Sum" />
      <C1.Blazor.Grid.GridColumn Binding="SalesReal" Header="SalesReal" Width="100" HorizontalAlignment="C1HorizontalAlignment.Center" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" Aggregate="C1.Blazor.Grid.GridAggregate.Sum" />
  
      <C1.Blazor.Grid.GridColumn Binding="DateInic" Header="Date Iniz." Width="100" HorizontalAlignment="C1HorizontalAlignment.Center"  HeaderHorizontalAlignment="C1HorizontalAlignment.Center" Format="d"/>
  </FlexGridColumns>
  

  [/code]
  
  I also have grouped and sorted the itemsource of the component.

  C1DataCollection<Customers> Items = new C1DataCollection<Customers>(new List<Customers>());
  public C1.Blazor.Grid.FlexGrid? Grid { get; set; }
  protected override async Task OnInitializedAsync()
  {
      Items = new C1DataCollection<Customers>(Customers.GetCustomers(15));
      List<GroupDescription> groupings = new();
      List<SortDescription> sortings = new();
      groupings.Add(new GroupDescription("BuyingGroup"));
      groupings.Add(new GroupDescription("Category"));
      groupings.Add(new GroupDescription("Customer"));
      sortings.Add(new SortDescription("BuyingGroup", C1.DataCollection.SortDirection.Ascending));
      sortings.Add(new SortDescription("Category", C1.DataCollection.SortDirection.Ascending));
  
      await Items.GroupAsync(groupings.ToArray());
      await Items.SortAsync(sortings.ToArray());
  }

  Thank you.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2025, 1:28 am EST - Updated 12 February 2025, 1:33 am EST

  Hi,

  Yes, the same approach works for static columns. I’ve created a sample based on your code (see attached).

  If you run into any problems, please share a sample or modify the attached one.

  Regards,

  Ankit

  

  FlexGrid_Events_updated.zip