Add column with image link not bound

8 posts, 0 answers
  1. Eric
    Eric avatar
    57 posts
    Member since:
    Aug 2012

    Posted 05 Feb 2013 Link to this post

    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" })                             
       
  2. Dimo
    Admin
    Dimo avatar
    8406 posts

    Posted 07 Feb 2013 Link to this post

    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!
  3. Eric
    Eric avatar
    57 posts
    Member since:
    Aug 2012

    Posted 07 Feb 2013 Link to this post

    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>    
  4. Dimo
    Admin
    Dimo avatar
    8406 posts

    Posted 07 Feb 2013 Link to this post

    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!
  5. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jan 2017

    Posted 06 Mar Link to this post

    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?

  6. Dimo
    Admin
    Dimo avatar
    8406 posts

    Posted 07 Mar Link to this post

    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.
  7. Rohith
    Rohith avatar
    3 posts
    Member since:
    Apr 2017

    Posted 10 May in reply to Dimo Link to this post

    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

  8. Dimo
    Admin
    Dimo avatar
    8406 posts

    Posted 11 May Link to this post

    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.
Back to Top