Render_button_checkbox_etc_in_a_grid_cell.md

Blazor server-side

Render button, checkbox, etc. in a grid cell

Index

The prefered method is using a Blazor component because it allows event handling with Blazor. But you can also use the RenderValueAs method to render a custom html markup in the grid cell, as it is used on ASP.NET MVC Core projects. In this case events will be managed using Javascript.

You have to use the RenderComponentAs method to render a component in a cell:

    columns.Add().RenderComponentAs<ButtonCell>();

RenderComponentAs method has 3 optional parameters:

Parameter	Type	Description
Actions	IList<Action> (optional)	the parent component can pass a list of Actions to be used by the component (see Passing grid state as parameter)
Functions	IList<Func<object,Task>> (optional)	the parent component can pass a list of Functions to be used by the child component
Object	object (optional)	the parent component can pass an object to be used by the component (see Passing grid state as parameter)

If you use any of these paramenters, you must use them when creating the component.

The generic type used has to be the component created to render the cell.

You must also create a Blazor component that implements the ICustomGridComponent interface. This interface includes a mandatory parameter called Item of the same type of the grid row element, and 4 optional parameters:

Parameter	Type	Description
Item	row element (mandatory)	the row item that will be used by the component
GridComponent	GridComponent (CascadingParameter optional)	Parent Grid component
Grid	CGrid (optional)	Grid can be used to get the grid state (see Passing grid state as parameter)
Actions	IList<Action> (optional)	the parent component can pass a list of Actions to be used by the component (see Passing grid state as parameter)
Functions	IList<Func<object,Task>> (optional)	the parent component can pass a list of Functions to be used by the child component
Object	object (optional)	the parent component can pass an object to be used by the component (see Passing grid state as parameter)

Actions, Functions and Object must be used when calling the RenderComponentAs method, but Grid can be used without this requirement.

The component can include any html elements as well as any event handling features.

RenderCrudComponentAs

RenderCrudComponentAs is a variant of RenderComponentAs to be used on grids with CRUD forms. The main difference is:

• Columns defined with RenderCrudComponentAs are visible on CRUD forms and on grids
• Columns defined with RenderComponentAs are visible on grids, but not visible on CRUD forms.

You must configure columns created with RenderCrudComponentAs as Hidden if you want to show them just on CRUD forms:

    c.Add(true).RenderCrudComponentAs<Carousel>();

And finally all columns included in the grid but not in the CRUD forms should be configured as "CRUD hidden" using the SetCrudHidden(true) method.

Notes:

• You can have more granularity in the "CRUD hidden" configuration. You can use the SetCrudHidden(bool create, bool read, bool update, bool delete) method to configure the columns that will be hidden on each type of form.
• You can have more granularity in the components configuration. You can use the RenderCrudComponentAs<TCreateComponent, TReadComponent, TUpdateComponent, TDeleteComponent> method to configure the components that will be shown on each type of form. Id you don't want to show any component for a specific type of form you must use NullComponent

Button

In this sample we name the component ButtonCell.razor:

    @implements ICustomGridComponent<Order>
    @inject IUriHelper UriHelper

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

    @code {
        [CascadingParameter(Name = "GridComponent")]
        public GridComponent<Order> GridComponent { get; set; }
        
        [Parameter]
        public Order Item { get; set; }

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

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

        [Parameter]
        public object Object { get; protected set; }

        private void MyClickHandler(MouseEventArgs e)
        {
            if (Actions == null)
            {
                string gridState = Grid.GetState();
                if (Object == null)
                {
                    UriHelper.NavigateTo($"/editorder/{Item.OrderID.ToString()}/gridsample/{gridState}");
                }
                else
                {
                    string returnUrl = (string)Object;
                    UriHelper.NavigateTo($"/editorder/{Item.OrderID.ToString()}/{returnUrl}/{gridState}");
                }
            }
            else
            {
                Actions[0]?.Invoke(Item);
            }
        }
    }

Checkbox

    @using GridShared.Columns
    @implements ICustomGridComponent<Order>

    <input type='checkbox' @onchange="@CheckChanged" />

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

        private void CheckChanged()
        {
            Console.WriteLine("Check changed: Item " + Item.OrderID);
        }
    }

Custom layout

    @using GridShared.Columns
    @implements ICustomGridComponent<Order>

    <b><a class='modal_link' href='#' @onclick="@MyClickHandler">Edit</a></b>

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

        private void MyClickHandler(MouseEventArgs e)
        {
            Console.WriteLine("Button clicked: /Home/Edit/" + Item.OrderID);
        }
    }

<- Data annotations | Subgrids ->