template engine

[Pio Luca Valvona]

Hi,

I have in 

 <script type="text/x-template" id="detailtemplate"> tag

this code:

<img class='img-thumbnail' src="@Url.Content("${PathFoto}")[email protected]()" alt="Foto" />

where "PathFoto" return url with ~ and it would seem that Ulr.Content is ignored.

[Rajapandi Ravi]

Hi Pio,

Greetings from Syncfusion support

Based on your query we could see that you are returning a path from your datasource “PathFoto” column and like to display the respective image. While displaying the image inside the template we need to set a proper path, based on your query we have prepared a sample and achieved your requirement. Please refer the below code example and sample for more information.

HomeController.cs

 

public static List<ExportEmployeeDetails> GetAllRecords()

            {

                List<ExportEmployeeDetails> Emp = new List<ExportEmployeeDetails>();

                Emp.Add(new ExportEmployeeDetails(1, "../Scripts/Images/1.png", "Davolio", "Sales Representative", new DateTime(1948, 12, 08), new DateTime(1992, 05, 01), 2, "507 - 20th Ave. E.Apt. 2A ", " 98122", "[phone] ", "Seattle ", "USA", [email protected]));

                Emp.Add(new ExportEmployeeDetails(2, "../Scripts/Images/2.png", "Fuller", "Vice President, Sales", new DateTime(1952, 02, 19), new DateTime(1992, 08, 14), 4, "908 W. Capital Way", "98401 ", "[phone] ", "Kirkland ", "USA", [email protected]));

                return Emp;

            }

 

Index.cshtml

 

<div class="control-section">

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>

{

    col.Field("LastName").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

    col.Field("FirstName").HeaderText("Name").Width("170").Template("#template").Add();

     col.Field("Title").HeaderText("Title").Width("170").Add();

}).AllowPaging().AllowGrouping().AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render()

</div>

 

<script id="template" type="text/x-template">

    <div class="image">

        <img src="@Url.Content("${FirstName}")" width="50" height="50" alt="${FirstName}" />

    </div>

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gridsample-1908977580.zip

Regards,

Rajapandi R