We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





146132 Jul 22,2019 09:22 AM UTC Jul 24,2019 10:45 AM UTC Blazor 1
Tags: Grid
Asked On July 22, 2019 02:22 PM UTC


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:

I forgot to add ModelType=@model in EjsGrid
and define model as
public Channel model = new Channel();

Rahul Narayanasamy [Syncfusion]
Replied On July 24, 2019 10:45 AM UTC

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> 
        <GridColumn Field=@nameof(Channel.Image) HeaderText="foto" Width="120"> 
                    var ch = (context as Channel); 
                    <img src="@ch.Image" /> 
        <GridColumn Field=@nameof(Channel.Name) HeaderText="Name" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Channel.Group) HeaderText="Group" Width="150"></GridColumn> 
    public List<Channel> gridData    { get; set; } 
    public Channel model = new Channel(); 
    protected override void OnInit() 
            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; } 
Note: We have created the above sample with latest NuGet version( and latest source(17.2.34). 
Also, please ensure that you have used generic version of scripts in your application as like below. 
    <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> 
Please get back to us if you need further assistance. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon