Images in grid - show text when image file not available

[Eddie Willcox]

Hi,

I am using Syncfusion ASP.NET MVC version 19.4.0.41. I am currently using column template to load images from file system and it works perfectly. 

I want to display the text "No Image Available" when an image file is not found in the specified location. below is the code to render the image in the template column:

 <div id="dataGrid">

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

    {

        col.Field("ProductCode").HeaderText("Code").HeaderText("Code").IsPrimaryKey(true).Add();

        col.Field("Description").HeaderText("Item").Width("400px").HeaderText("Item").AllowEditing(false).Add();

        col.Field("Colour").HeaderText("Colour").AllowEditing(false).Add();

        col.Field("Price").HeaderText("Price Ex VAT").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).AllowEditing(false).Add();

        col.Field("Pack").HeaderText("Pack").AllowEditing(false).Add();

        col.Field("Barcode").HeaderText("Barcode").AllowEditing(false).Add();

        col.HeaderText("Image").Template("#template").AllowEditing(false).Add();

        col.Field("QtyToOrder").HeaderText("Order").EditType("numericedit").ValidationRules(new { required = true }).Add();

    }).Locale("en-ZA").GridLines(Syncfusion.EJ2.Grids.GridLine.Both).EnableAltRow(true).Load("load").Height("700px").EditSettings(edit => { edit.AllowEditing(true).AllowAdding(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string>() { "Search" }).Render()

    </div>

<style>

    .image img {

        height: 60px;

        width: 60px;

        border-radius: 10px;

        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);

    }

    .e-grid .e-altrow {

        background-color: lightgrey !important;

    }

</style>

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

    <div class="image">

        <img src="/Content/Images/${ProductCode}.jpg" alt="${ProductCode}" />

    </div>

</script>

In the the template script, i would like to first check that the image name is available in /Content/Images. If it is, the image must be displayed in the grid. If not, then "No Image Available" must be displayed in the grid.

If this is possible, please supply me with an example.

[Rajapandiyan Settu]

Hi Eddie, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by using alt attribute of img. 

 

 

            <img src="/Content/Images/${ProductCode}.jpg" alt="No Image Available" /> 

 

 

Please let us know if you have any concerns. 

Regards, 

Rajapandiyan S