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

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

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:


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



1 Reply

RN Rahul Narayanasamy Syncfusion Team July 24, 2019 05:45 AM

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; } 
    } 
} 
 
 
 
 
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> 
    </environment> 
    ... 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


Loader.
Live Chat Icon For mobile
Up arrow icon