adding an image to telerik data grid column

Question

I want to add an image to a data grid column, I am using telerik grid for this, however I get the following error, its on Line 51:

Compiler Error Message: CS1525: Invalid expression term ')'

Source Error:

Line 49:     column.Bound(o => o.HoursWorked).Title("Hours");
Line 50:     column.Template(o =>
Line 51:     {%>
Line 52:     <img src="/Content/img/delete.png" alt="Delete" title="Delete"/>
Line 53:     <%

Here is how I am trying to add an image to the column:

<div>
<%=Html.CustomGridFor("Hours", "WorkHours", "HoursWorked", GridOptions.EnableSelecting, Model).Columns(column =>
   {
     column.Bound(o => o.DateWorked).Title("Date").Width("65px");
     column.Bound(o => o.Description).Title("Description").Width("120px");
     column.Bound(o => o.HoursWorked).Title("Hours");
     column.Template(o =>
     {%>
     <img src="/Content/img/delete.png" alt="Delete" title="Delete" onclick="javascript:deleteHours();" />
     <%
     }).Title("").ClientTemplate(
     "<img src=\"/Content/img/delete.png\" alt=\"Delete\" title=\"Delete\"/>"
     ).Width(15);
     }).HtmlAttributes(new { style = "width: 270px;" });
     %>
</div>

Tried this too:

<div>
<%=Html.CustomGridFor("Hours", "WorkHours", "HoursWorked", GridOptions.EnableSelecting, Model).Columns(column =>
   {
     column.Bound(o => o.DateWorked).Title("Date").Width("65px");
     column.Bound(o => o.Description).Title("Description").Width("120px");
     column.Bound(o => o.HoursWorked).Title("Hours");

        column.Template(o =>
        {
        %>
            <img 
                alt="Delete" 
                src="/Content/img/delete.png" 
              />
        <%
        });

</div>

Is there a reason you're using a client and server template? I think this demo is almost exactly what you want, just use your delete image instead: http://demos.telerik.com/aspnet-mvc/grid/templatesserverside — MisterIsaak, Oct 15 '12 at 16:08
@Jisaak I tried the way suggested in demo you provided, still get the same error about invalid expression term ')'. I have updated my code above — user793468, Oct 16 '12 at 22:57

score 1 · Answer 1 · answered Oct 17 '12 at 10:02

1

Try to use this:

<div>
<%=Html.CustomGridFor("Hours", "WorkHours", "HoursWorked", GridOptions.EnableSelecting, Model).Columns(column =>
        {
           column.Bound(o => o.DateWorked).Title("Date").Width("65px");
           column.Bound(o => o.Description).Title("Description").Width("120px");
           column.Bound(o => o.HoursWorked).Title("Hours");
           column.Template(o => string.Empty).Title("")
                 .ClientTemplate(
                      "<img src=\"/Content/img/delete.png\" alt=\"Delete\" title=\"Delete\"/>")
                 .Width(15);
        }).HtmlAttributes(new { style = "width: 270px;" });
%>
</div>

answered Oct 17 '12 at 10:02

Kirill Bestemyanov

11,946
2
24
38

I was still getting the error: Compiler Error Message: CS1525: Invalid expression term ')' Removing ";" from the last line does add another column with no heading, but still dont see the delete image. – user793468 Oct 17 '12 at 17:37
Could you show what is html in client that is generated in this column with no heading? – Kirill Bestemyanov Oct 17 '12 at 17:40
This is what I see: – user793468 Oct 17 '12 at 17:49
I got it to work this way: column.Template(o => { %> <% }).Title("").ClientTemplate( " $\"Delete\"$ ") .Width(25).HtmlAttributes(new { style = "text-align: center;" }); }).Render(); And removing the "=" from first line – user793468 Oct 17 '12 at 17:59

adding an image to telerik data grid column

1 Answers1