Column not showing image from Url and doesn't load other page

[Elio]

SOLVED

Hi,

I'm trying to add a column in my project, but I face a problem I can't solve.

I added the html code in the gridcolumn template, but every time I run the project not only I don't see the images, but the grid can't load the other pages.

If I remove the template it works well.

(Channel is a list containg string Name, string Group, string Image)

This is my code:

https://pastebin.com/L8HJkV9X

update:

I forgot to add ModelType=@model in EjsGrid

and define model as

public Channel model = new Channel();

[Rahul Narayanasamy]

Hi Elio, 

 

Greetings from Syncfusion. 

 

Query: Column not showing image from Url and doesn't load other page 

 

We have validated your query and you want to show the images in column template(the image url is stored in one of the class property) column of the grid. To use templates, the grid must be bound with named model. This can be done by specifying the model type using the ModelType property of the grid component. Here, we have prepared the sample from your shared code snippets and it works fine without any problem. Please find the below code example and sample for your reference. 

 

[code example] 

 

@page "/" 

 

<EjsGrid DataSource="@gridData" ModelType="@model" 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" /> 

                } 

            </Template> 

        </GridColumn> 

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

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

    </GridColumns> 

</EjsGrid> 

 

@functions{ 

    public List<Channel> gridData    { get; set; } 

    public Channel model = new Channel(); 

    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; 

    } 

    public class Channel 

    { 

        public string Name { get; set; } 

        public string Group { get; set; } 

        public string Image { get; set; } 

    } 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnTemplate_(2)566078404  

 

Help Documentation: https://ej2.syncfusion.com/aspnet-core-blazor/documentation/grid/templates/  

 

Note: We have created the above sample with latest NuGet version(17.2.0.34) and latest source(17.2.34). 

 

Also, please ensure that you have used generic version of scripts in your application as like below. 

 

[_Host.cshtml] 

... 

    <environment include="Development"> 

        <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" /> 

        <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.34/fabric.css" rel="stylesheet" /> 

        <script src="https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js"></script> 

        <script src="https://cdn.syncfusion.com/ej2/17.2.34/dist/ejs.interop.min.js"></script> 

    </environment> 

    ... 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul