Add column with image link not bound

[Eric]

The code below works fine. I need to add a column to the grid that shows an image 
(bound or not bound I don't care as long as the image shows and not the model property).
The new column should launch a Kendo Window widget with a string property of the model
serving as the input content of the Kendo Window. The property on the model might be something like
model.FailureMessage.

Thanks,

Html.Kendo().Grid(Model.AppointmentList).Name("FailedAppointments")             
    .Columns(columns =>             
    {                 
            columns.Bound(o => o.MemberFirstName).Title("Member First Name").Width(50);                 
            columns.Bound(o => o.MemberLastName).Title("Member Last Name").Width(50);                 
            columns.Bound(o => o.ClientMemberID).Title("Client ID").Width(50);                 
            columns.Bound(o => o.ProviderID).Title("Provider ID").Width(50);                 
            columns.Bound(o => o.ProviderFirstName).Title("Provider First Name").Width(50);                 
            columns.Bound(o => o.ProviderLastName).Title("Provider Last Name").Width(50);                 
            columns.Bound(o => o.AppointmentDate).Title("Appointment Date").Width(50);                 
            columns.Bound(o => o.IHAAppointmentID).Hidden(true);             
    })             
    .Pageable(pager => pager.PageSizes(true))             
    .Sortable(sorting => sorting.SortMode(Kendo.Mvc.UI.GridSortMode.SingleColumn))             
    .Scrollable(scrolling => scrolling.Height(300))             
    .TableHtmlAttributes(new { Class = "dataGridTable" })                             
   

[Dimo]

Hi Eric,

The Grid provides the ability to add column templates for scenarios like yours:

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-customize-the-way-a-property-is-displayed-in-a-grid-bound-column?

In addition to bound columns with a template, you can also use unbound columns, if you don't need sorting and filtering for that column:

columns.Template(@<text>custom content here, which is not related to the data</text>).Title("Column Title");

In the latter case you can still use data from the data item, e.g. to attach handlers, pass parameters, etc:

columns.Template(@<text>custom content and @item.CompanyName</text>).Title("Column Title");

Greetings,
Dimo
the Telerik team

[Eric]

columns.Template(@<text>test</text>).Title("Info").Width(100);

This shows nothing in the column.


Which js library supports this functionality? I am registering kendo like the following after all jQuery references like so:

 
<script src="@Url.Content("~/Scripts/jquery/jquery-1.8.2.min.js")" type="text/javascript"></script>      
<script src="@Url.Content("~/Scripts/jquery/json2.js")" type="text/javascript"></script>     
<script src="@Url.Content("~/Scripts/jquery/jquery.corner.js")" type="text/javascript"></script>     
<script src="@Url.Content("~/Scripts/jquery/jquery.maskedinput-1.3.min.js")" type="text/javascript"></script>     
<script src="@Url.Content("~/Scripts/KendoUI/kendo.web.min.js")" type="text/javascript"></script>     
<script src="@Url.Content("~/Scripts/KendoUI/kendo.aspnetmvc.min.js")" type="text/javascript"></script>      
<script src="@Url.Content("~/Scripts/KendoUI/kendo.grid.min.js")" type="text/javascript"></script>    

[Dimo]

Hi Eric,

columns.Template() defines a server template to be used with server-side binding, as in your initial post. If you have switched to client-side binding, you need to use a client template.

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-have-conditional-logic-in-a-column-client-template?

http://docs.kendoui.com/getting-started/framework/templates/overview

Kind regards,
Dimo
the Telerik team

[Jeff]

I'm trying to do this on the client side. Instead of an image, I want to add an icon that changes when user edits a data in a row to indicate validation, essentially (but different than the validations provided my kendo). Essentially I need a column to throw html in after the user edits a  row.

 

Any resources available?

[Dimo]

Hello Jeff,

I can recommend the following resources:

A how-to article that shows how to manipulate the HTML output and styling of Grid rows when the widget is databound

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values

Events that can be used to know when the user enters or exits edit mode. You will have a reference to the data item and (depending on the edit mode) the table row.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-cancel

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save

Let me know if you have any specific questions.

Regards,
Dimo
Telerik by Progress

[Rohith]

Hi Dimo i want to add a column with a common image for all rows on server bound call.

BY adding the either of below code am just able to see an extra empty column but values.

columns.Template(@<text> <img src="~/Images/Message-50.png" width="30" height="30" /></text>).Title("").Width("25px");

columns.Template(@<text> ABC</text>).Title("").Width("25px");

Please help me in this regard

[Dimo]

Hello Rohith,

The code you have shown, requires server Grid binding (and the resulting server table row rendering). Is this being used? Can you show the Grid declaration?

Here are a couple of relevant resources.

http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/server-binding

http://demos.telerik.com/aspnet-mvc/grid/serverbinding

Regards,
Dimo
Telerik by Progress