@page "/"
<EjsGrid DataSource="@gridData" Height="100%" Width="100%" AllowSelection="true" AllowPaging="true">

    <GridPageSettings PageSize="2"></GridPageSettings>



    <GridColumns>
        <GridColumn Field=@nameof(Channel.Image) HeaderText="foto" Width="120">
            <Template>
                @{
                    var ch = context as Channel;
                    <img src="@ch.Image" alt="" />
                }
            </Template>

        </GridColumn>
        <GridColumn Field=@nameof(Channel.Name) HeaderText="Name" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Channel.Group) HeaderText="Group" Width="150"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public List<Channel> gridData { get; set; }
    protected override void OnInit()
    {

        List<Channel> order = new List<Channel>();
        order.Add(new Channel { Name = "test1", Group = "Group A", Image = "Not avaible" });
        order.Add(new Channel { Name = "test2", Group = "Group B", Image = "https://png.pngtree.com/template/20190529/ourmid/pngtree-logo-chat-tv-image_206663.jpg" });
        order.Add(new Channel { Name = "test3", Group = "Group A", Image = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/HD-TV_Logo.svg/800px-HD-TV_Logo.svg.png" });

 gridData = order;
    }
}