1 Star 0 Fork 0

QianXun-Studio / Grid.Blazor

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
Render_button_checkbox_etc_in_a_grid_cell.md 3.80 KB
一键复制 编辑 原始数据 按行查看 历史
Gustavo Navarro 提交于 2019-10-30 16:24 . Add extended sorting and grouping

GridMvc for ASP.NET Core MVC

Render button, checkbox, etc. in a grid cell

Index

You can use the RenderValueAs method to render a custom html markup in the grid cell. You must disable the default encoding and satinizing cell values using Encoded and Sanitized methods.

Button

    columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(o => @<button type="submit">Submit</button>);

Checkbox

    columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(o => Html.CheckBox("checked", false));

Custom layout

You can render any custom layout using razor @helper:

    @helper CustomRenderingOfColumn(Order order)
    {
        if (order.Customer.IsVip)
        {
            <text>Yes</text>
        }
        else
        {
            <text>No</text>
        }
    }

    @await Html.Grid(Model).Columns(columns =>
    {
        columns.Add(o => o.Customer.IsVip)
                .Titled("Vip customer")
                .SetWidth(150)
                .RenderValueAs(o => CustomRenderingOfColumn(o));
    }).RenderAsync()

ViewComponent

You can also use the RenderComponentAs method to render a custom view component in the grid cell:

    columns.Add().RenderComponentAs<ButtonCellViewComponent>(returnUrl);

RenderComponentAs method has 2 optional parameters:

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

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

You must also create a viewcomponent. The InvokeAsync method includes a mandatory parameter called Item, and 3 optional parameters:

Parameter Type Description
Item object (mandatory) the row item that will be used by the view component
Grid IGrid (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 view component (see Passing grid state as parameter)
Object object (optional) the parent component can pass an object to be used by the view component (see Passing grid state as parameter)

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

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

An example of view component is:

    public class ButtonCellViewComponent : ViewComponent
    {

        public async Task<IViewComponentResult> InvokeAsync(object Item, IGrid Grid, object Object)
        {
            int orderId = ((Order)Item).OrderID;
            ViewData["gridState"] = Grid.GetState();
            ViewData["returnUrl"] = (string)Object;

            var factory = Task<IViewComponentResult>.Factory;
            return await factory.StartNew(() => View(orderId));
        }

And the view:

    @model int

    @{
        string gridState = (string)ViewData["gridState"];
        string returnUrl = (string)ViewData["returnUrl"];
    }

    <b><a class='modal_link' href='/Home/Edit/@Model?returnUrl=@returnUrl&gridState=@gridState'>Edit</a></b>

<- Data annotations | Subgrids ->

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

搜索帮助