[Solved] Show thumbnail only if image path is not null

[Mattias]

Hi,
I have the same scenario as your demo: http://demos.telerik.com/aspnet-mvc/grid/templatesclientside
But I don't have an image for each row, can I use an if-statement in some way to hide the image if there isn't anyone?

Regards,
Mattias

[Dimo]

Hello Mattias,

In this scenario you can't include an IF statement in the Grid component declaration, because you don't have access to the datasource there. The common way to handle such situations is to use the RowDataBound client event:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#OnRowDataBound

For example, this will hide the thumbnail for the ALFKI customer ID. If you want to preserve the larger row height, use a visibility:hidden style.

function RowDataBound(e)
{
   if (e.dataItem.CustomerID == "ALFKI") {
       $("img", e.row).css("display", "none");
   }
}

Kind regards,
Dimo
the Telerik team

[Mattias]

I don't know what I'm doing wrong but I can't get the alert test to pop up?!

@{Html.Telerik().Grid(Model.Items)
      .Name("Grid")
      .HtmlAttributes(new {@class = "grid"})
      .DataKeys(keys => keys.Add(x => x.ID))
      .DataBinding(dataBinding =>
      {
          dataBinding.Server()
              .Select("Index", "Bioguiden")
              .Update("Update", "Bioguiden");
      })
      .Editable(editing => editing.Mode(GridEditMode.PopUp))
      .EnableCustomBinding(true)
      .PrefixUrlParameters(false)
      .ClientEvents(events => events.OnRowDataBound("Grid_RowDataBound"))
      .Columns(columns =>
      {
          columns.Template(x =>

                  "<img src=\"/Image.aspx?Path=" + x.ImagePath + "&Height=50&MaxWidth=100\" alt=\"\" />"

              ).Title(Resources.Movie.Title);
          columns.Bound(x => x.Title).Title(Resources.Movie.Title);
          columns.Bound(x => x.DistributorName).Title("Distributör");
          columns.Bound(x => x.DistributorNumber).Title("Distributörsnummer");
          columns.Bound(x => x.Genre).Title(Resources.Movie.Genre);
          columns.Bound(x => x.MovieFormat).Title(Resources.Movie.MovieFormat);
          columns.Bound(x => x.PremiereDate).Title(Resources.Movie.PremiereDate).Format("{0:d}")
              .HeaderHtmlAttributes(new { @class = "right" })
              .HtmlAttributes(new { @class = "right" });
          columns.Bound(x => x.UpdatedDate).Title(Resources.Movie.UpdatedDate).Format("{0:g}")
              .HeaderHtmlAttributes(new { @class = "right" })
              .HtmlAttributes(new { @class = "right" });

          columns.Command(commands =>
              {
                  commands.Edit();
          //        commands.Delete();
              }).Width(120).Title("").HtmlAttributes(new { @class = "right" });
      })
      .Sortable(s => s.OrderBy(m => m.Add(Model.SortColumn).Order(Model.SortDirection)))
      .Pageable(paging => paging.Style(GridPagerStyles.NextPreviousAndNumeric)
          .PageSize(Model.PageSize)
          .Position(GridPagerPosition.Both)
          .Total(Model.TotalRowsInDatabase))
      .Render();
      }


  @section js {
  <script type="text/javascript">
      function Grid_RowDataBound(e) {

          alert("oki!");

          if (e.dataItem.ImagePath == "") {
              $("img", e.row).css("display", "none");
          }
      }
  </script>
  }

[Mattias]

I solved this way at the moment:

"<img src=\"/Image.aspx?Path=" + x.ImagePath + "&Height=50&MaxWidth=100\" alt=\"\" onerror=\"this.style.display = 'none'\" />"

But it would be better to be able to not generate the image at all if there isn't one, so the request doesn't hit the Image.aspx unnecessary.

/Mattias

[Dimo]

Hello Mattias,

In your first message you stated that you are using client templates, however, judging by the code snippet, you are using server templates.

Here is the required syntax to insert an IF statement in the Column declaration:

(this demo is used as a starting point - http://demos.telerik.com/aspnet-mvc/grid/templatesserverside )

columns.Template(c => {
    %><img
        alt="<%= c.CustomerID %>"
        src="<%= (c.CustomerID != "ALFKI" ? Url.Content("~/Content/Grid/Customers/" + c.CustomerID) : "aaa") + ".jpg" %>"
      /><%
}).Title("Picture");

On a side note, you can use IF statement in a client template if you change the <#= #>  string to <# #>. Afterwards the content inside the expression is not returned, but evaluated. For example, if we use the Client Templates demo as a starting point...

.ClientTemplate("<# if (CustomerID == 'ALFKI') { return 'aaa'; } else { return '<img src=\"" + Url.Content("~/Content/Grid/Customers/") + "' + CustomerID + '.jpg\" />'; } #>")

The above will return "aaa" for the first row (CustomerID = ALFKI) and an image element for all other rows.

Kind regards,
Dimo
the Telerik team