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 Template

Thread ID:





145431 Jun 21,2019 09:58 AM UTC Jun 24,2019 10:08 AM UTC ASP.NET Core - EJ 2 3
Tags: DataGrid
Yoab Youssoufou
Asked On June 21, 2019 09:58 AM UTC

I have a ej2 dotnet core Grid and trying to display pictures in a column, I have followed your example on column templates below:

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" width="auto" height="359"> <e-grid-columns> <e-grid-column headerText="Employee Image" template="#template" textAlign="Center" width="150" ></e-grid-column> <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column> <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column> <e-grid-column field="Title" headerText="Title" width="170"></e-grid-column> <e-grid-column field="HireDate" headerText="Hire Date" format='yMd' textAlign="Right" width="135"></e-grid-column> <e-grid-column field="ReportsTo" headerText="Reports To" width="120"></e-grid-column> </e-grid-columns> </ejs-grid> </div> <script id="template" type="text/x-template"> <div class="image"> <img src="@Url.Content("~/scripts/Images/Employees/${EmployeeID}.png")" alt="${EmployeeID}" /> </div> </script>

This works well with file based pictures, but in my case I have had to store the pictures as binary files in a PostgreSQL Database.
I have a controller action that retrieves the picture:

 public IActionResult GetPic(long Id)
            if (_general.HasFile(Id, 1))
                byte[] cover = _general.GetImageFromDataBase(Id);               
                return File(cover, "image/png");
                byte[] noimage = _general.GetNoImageFromDataBase();
                return File(noimage, "image/png");
then in the view with the grid I have the following

  <ejs-grid id="DocGrid" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "ExcelExport" })" allowPaging="true" allowSorting="true" allowFiltering="true" gridLines="Both">
                        <e-data-manager url='/api/ArticlesApi' adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager>
                        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettings>
                        <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>
                        <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>
                        <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
                            <e-grid-column headerText="Article Pic" template="#template" textAlign="Center" width="150"></e-grid-column>
                            <e-grid-column field="Id" headerText="Article Id" isPrimaryKey="true" isIdentity="true" visible="false" textAlign="Right" width="125"></e-grid-column>
                            <e-grid-column field="Name" headerText="Name" width="120"></e-grid-column>
                            <e-grid-column field="Description" headerText="Description" width="170"></e-grid-column>
                            <e-grid-column field="Cost" headerText="Cost" type="number" format="N2" validationrules='@(new Dictionary<string, object> { { "required", true } })' width="120"></e-grid-column>
                            <e-grid-column field="IdString" headerText="Id string" width="120"></e-grid-column>
                            <e-grid-column headertext="" Template="#Edit" allowediting="false" width="40"></e-grid-column>
                            <e-grid-column headertext="" Template="#Delete" allowediting="false" width="40"></e-grid-column>

<script id="template" type="text/x-template"> <div class="image"> <img src="@Url.Action("GetPic", "Home", new { Id = "${Id}"})" alt="${Id}" /> </div> </script>

this doesn't work, I get an error that the string is malformed then I also tried :

<img src="@Url.Action("GetPic", "Home", new { Id = ${Id}})" alt="${Id}" />

but then the ${Id} is not even highlighted in purple in visual studio editor, meaning it is a syntaxe error, I have spent several hours trying all sorts of hacks to no avail.
The database functions are all working very well and tested because when I hardcode the Id like below :
<img src="@Url.Action("GetPic", "Home", new { Id = 2})" alt="${Id}" />
I get the expected normal behaviour for that record.

Please help me find a solution to this problem. Thnak you

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 24, 2019 10:00 AM UTC

Hi Yoab, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. When using the provided syntax, it seems to have always passing the Id value as 0 to the controller side, and we suspect that this is what might have caused the problem you are facing. We would like to suggest you to use the below syntax to successfully pass the Id value to the controller and return the proper image. 

<img src='@Url.Action("GetPic", "Home")?Id=${Id}' alt="${Id}" /> 

Please get back to us if you need further assistance. 

Thavasianand S. 

Yoab Youssoufou
Replied On June 24, 2019 10:06 AM UTC

Perfect thank you!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 24, 2019 10:08 AM UTC

Hi Yoab, 
Thanks for your update. 
We are happy that the problem has been resolved at your end. 
Thavasianand S. 


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