1 Star 0 Fork 0

XFly-Studio / Grid.Blazor

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Passing_grid_state_as_parameter.md 6.82 KB
Copy Edit Web IDE Raw Blame History

GridBlazor for ASP.NET Core MVC

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
    
        @if (_task.IsCompleted)
        {
            <GridComponent T="Order" Grid="@_grid"></GridComponent>
        }
        else
        {
            <p><em>Loading...</em></p>
        }
    
        @code
        {
            private CGrid<Order> _grid;
            private Task _task;
    
            protected override async Task OnInitAsync()
            {
                Action<IGridColumnCollection<Order>> columns = c =>
                {
                    c.Add().Encoded(false).Sanitized(false).RenderComponentAs<ButtonCell>();
                    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 client = new GridClient<Order>(q => orderService.GetOrdersGridRows(columns, q), query, false, "ordersGrid", columns)
                _grid = client.Grid;
    
                // Set new items to grid
                _task = client.UpdateGrid();
                await _task;
            }
        }

    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
    {
        ...

        protected override async Task OnInitAsync()
        {
            ...
            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.

<- Subgrids | CRUD ->

Comment ( 0 )

Sign in for post a comment

1
https://gitee.com/fan0217/Grid.Blazor.git
git@gitee.com:fan0217/Grid.Blazor.git
fan0217
Grid.Blazor
Grid.Blazor
master

Search