Column Template

[Yoab Youssoufou]

Hello,

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

https://ej2.syncfusion.com/aspnetcore/Grid/ColumnTemplate#/material

<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");

            }

            else

            {

                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-columns>

                            <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>

                        </e-grid-columns>

                    </ejs-grid>

<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]

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. 

Regards, 

Thavasianand S. 

[Yoab Youssoufou]

Perfect thank you!

[Thavasianand Sankaranarayanan]

Hi Yoab, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.