display image in telerik grid column depending on status stored in database

Question

I have a strongly typed view where I display consultants with a delete image in one of the columns in a telerik grid. I have a column "Status" where I store if a consultant is active or inactive. What I want to do is, If a consultant has an "Active" status then display a grayed delete image(disabled, cant delete a consultant as he/she is active), else display a red delete image(enabled, can delete a consultant as he/she is inactive). Is this possible with my design below?

Controller Action:

public ActionResult Index()
{
    ViewData.Model = db.Consultants.OrderBy(p => p.ConsultantName);
    return View();
}

View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<UI.Models.Consultants>>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

                <table>
                    <tr>
                        <td><% Html.GridFor("Consultants", "Consultants", "Consultants", GridOptions.EnableSelecting, Model).Columns(column =>
                                {
                                    column.Bound(o => o.Code).Title("Code");
                                    column.Bound(o => o.Description).Title("Description");                                  
                                 column.Template(o =>
            {
                %>
                <img src="/Content/img/delete.png" alt="consultant" title="consultant" onclick="javascript:deleteConsultant(<%= o.consultantKey %>)" />
                <%
            }).Title("").ClientTemplate(
                      "<img src=\"/Content/img/delete.png\" alt=\"consultant\" title=\"consultant\" onclick=\"javascript:deleteConsultant(<#= ProjectKey #>)\"/>");
            column.Bound(o => o.consultantKey).Hidden();
        }).Render();            
                            %>
                        </td>
                    </tr>
                </table>
</asp:Content>

Any help is much appreciated.

Atanas Korchev · Accepted Answer · 2012-11-29T22:58:01.300

2

Yes, it is possible. You can have conditional logic in your template. Here is an example:

columns.Template(o => 
{
     if (o.Foo)
     {
       %> 
           <img src="img1.gif" />
       <%
     }
     else
     {
       %>
           <img src="img2.gif" />
       <%
     }
}).ClientTemplate("<# if (Foo) { #> <img src='img1.gif'/> <# } else { #> <img src='img2.gif' /> <# } #>");

edited Nov 29 '12 at 22:58

answered Nov 29 '12 at 21:29

Atanas Korchev

30,562
8
59
93

by adding an if check? it would be great if you explained or directed me to a resource. Thanks! – user793468 Nov 29 '12 at 21:36

score 0 · Answer 2 · answered Nov 29 '12 at 22:14

Something like this perhaps:

<%
String clientTempate;

if(Model.Active.Equals("Active"){
  clientTemplate = "<img src=\"/Content/img/delete.png\" alt=\"consultant\" title=\"consultant\" onclick=\"javascript:deleteConsultant(<#= ProjectKey #>)\"/>"
}
else{
  clientTemplate = "<img src=\"/Content/img/grayedout-delete.png\" alt=\"consultant\" title=\"consultant\" />"

}
%>


<% Html.GridFor("Consultants", "Consultants", "Consultants", GridOptions.EnableSelecting, Model).Columns(column =>
                                        {
                                            column.Bound(o => o.Code).Title("Code");
                                            column.Bound(o => o.Description).Title("Description");                                  
                                         column.Bound(o => o.consultantKey).Title("").ClientTemplate(clientTemplate);
                    column.Bound(o => o.consultantKey).Hidden();
                }).Render();            
                                    %>

display image in telerik grid column depending on status stored in database

2 Answers2