This is a migrated thread and some comments may be shown as answers.

Add column with image link not bound

7 Answers 680 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 05 Feb 2013, 01:39 PM
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" })                             
   

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Feb 2013, 09:40 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eric
Top achievements
Rank 1
answered on 07 Feb 2013, 03:29 PM
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>    
0
Dimo
Telerik team
answered on 07 Feb 2013, 03:41 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff
Top achievements
Rank 1
answered on 06 Mar 2017, 08:19 PM

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?

0
Dimo
Telerik team
answered on 07 Mar 2017, 12:05 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rohith
Top achievements
Rank 1
answered on 10 May 2017, 06:25 AM

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

0
Dimo
Telerik team
answered on 11 May 2017, 12:51 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Eric
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Eric
Top achievements
Rank 1
Jeff
Top achievements
Rank 1
Rohith
Top achievements
Rank 1
Share this question
or