## XFly-Studio / Grid.Blazor .gitee-modal { width: 500px !important; }

Explore and code with more than 6 million developers，Free private repositories ！：）
Passing_grid_state_as_parameter.md 6.82 KB

# Passing grid state as parameter

Index

You can get the current grid state any time. Grid state contains the page number and all filter, searching and sorting information.

So you can pass it as a parameter to another page, for example it you want to edit a row of the grid. Then you can pass it back to the page containing the grid, so the grid can be created in the same state as it was left.

Some of these examples are showed in the GridBlazorServerSide project

## Get grid state and pass it to another page

• The easiest way to send the grid state to another page is creating a custom column with a button, as seen in Render button, checkbox, etc. in a grid cell:

    @page "/gridsample"
@using GridBlazor
@using GridShared
@using GridShared.Utility
@using Microsoft.Extensions.Primitives
@inject OrderService orderService

{
<GridComponent T="Order" Grid="@_grid"></GridComponent>
}
else
{
}

@code
{
private CGrid<Order> _grid;

{
Action<IGridColumnCollection<Order>> columns = c =>
{
};

var client = new GridClient<Order>(q => orderService.GetOrdersGridRows(columns, q), query, false, "ordersGrid", columns)
_grid = client.Grid;

// Set new items to grid
}
}

Then the ButtonCell has to implement the ICustomGridComponent interface. The GetState method of the optional Grid parameter must be called to get the grid state:

    @using GridBlazor
@using GridBlazorServerSide.Models
@using GridShared.Columns
@implements ICustomGridComponent<Order>
@inject IUriHelper UriHelper

<button class='btn btn-sm btn-primary' @onclick="MyClickHandler">Edit</button>

@code {
[Parameter]
public Order Item { get; protected set; }

[Parameter]
public CGrid<Order> Grid { get; protected set; }

private void MyClickHandler(UIMouseEventArgs e)
{
string gridState = Grid.GetState();
UriHelper.NavigateTo($"/editorder/{Item.OrderID.ToString()}/gridsample/{gridState}"); } } • In the case of a page containing more than one grid, the ButtonCell component must call a parent component function to pass more than one state. The call of the RenderComponentAs method must contain a list of Actions including just one element, the method used to call the new page:  ... @code { ... protected override async Task OnParametersSetAsync() { ... Action<IGridColumnCollection<Order>> oColumns = c => { c.Add().Encoded(false).Sanitized(false).RenderComponentAs<ButtonCell>(new List<Action<object>>() { MyAction }); c.Add(o => o.OrderID); c.Add(o => o.OrderDate, "OrderCustomDate").Format("{0:yyyy-MM-dd}"); c.Add(o => o.Customer.CompanyName); c.Add(o => o.Customer.IsVip); }; var oClient = new GridClient<Order>(q => orderService.GetOrdersGridRows(oColumns, q), query, false, "ordersGrid", oColumns) _grid = oClient.Grid; // Set new items to grid _task2 = oClient.UpdateGrid(); await _task2; } private void MyAction(object item) { string ordersGridState = _ordersGrid.GetState(); string customersGridState = _customersGrid.GetState(); UriHelper.NavigateTo($"/editorder/{((Order)item).OrderID.ToString()}/multiplegrids/{ordersGridState}/{customersGridState}");
}
}

Then the ButtonCell has to implement the ICustomGridComponent interface. And the Actions parameter must be defined:

    @using GridBlazor
@using GridBlazorServerSide.Models
@using GridShared.Columns
@implements ICustomGridComponent<Order>

<button class='btn btn-sm btn-primary' @onclick="MyClickHandler">Edit</button>

@code {
[Parameter]
public Order Item { get; protected set; }

[Parameter]
public IList<Action<object>> Actions { get; protected set; }

private void MyClickHandler(UIMouseEventArgs e)
{
Actions[0]?.Invoke(Item);
}
}

## Initializing grid with a state passed from another page

The page containing the grid must get the grid state parameter from the url.

• If the grid state parameter is not null or empty you have to create a QueryCollection object from the parameter.
• If the grid state parameter is null or empty you must use a new QueryDictionary.

The static method StringExtensions.GetQuery will convert the string to a Dictionary<string, StringValues> object that will be used in the GridClient contructor:

    @page "/gridsample"
@page "/gridsample/{GridState}"

...

[Parameter]
protected string GridState { get; set; }

@code
{
...

{
...
var query = new QueryDictionary<StringValues>();
if (!string.IsNullOrWhiteSpace(GridState))
{
try
{
query = StringExtensions.GetQuery(GridState);
}
catch (Exception)
{
// do nothing, GridState was not a valid state
}
}

var client = new GridClient<Order>(q => orderService.GetOrdersGridRows(columns, q),
query, false, "ordersGrid", columns, locale)
...
}
}

If the page contains more than one grid you have to use 2 parameters, one for each grid.