Display Custom Markup in Grid Columns

3 posts, 0 answers
  1. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 18 Apr Link to this post

    We are using SignalR binding within our grids to display column information. One thing we would like to do is show custom markup such as a web video. How would we go about displaying a video or custom markup within a Kendo Grid Column? Specifically in the code columns.Bound(p => p.Message) below?

    I'm thinking I may need to use a client template, but so far I haven't been able to get it to work.

    @(Html.Kendo().Grid<DSTDBContext.Models.Core.Notification>()
     .Name("NotificationHomeGrid")
    .HtmlAttributes(new { style = "height: 99%;" })
    .Scrollable(o => o.Height("height: 100%;"))      
    .Resizable(resizable => resizable.Columns(true))
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(pageable => pageable
    .Refresh(true)
    .Enabled(false)
    .PageSizes(false))
    .Columns(columns =>
    {
    columns.Bound(p => p.Id)
    .Title("Actions")
    .Width(65)
    .Filterable(false)
    .Sortable(false)
    .ClientTemplate("<i class=\"fa fa-exclamation-circle fa-lg\"></i>");
    columns.Bound(p => p.NotificationDate)
    .Title("Date")
    .Width(250)
    .Filterable(false)
    .Sortable(false)
    .ClientTemplate("");

    columns.Bound(p => p.Message)
    .Title("Notification")
    .Width(300)
    .Sortable(true)
    .Filterable(false);
    })

    .DataSource(dataSource => dataSource
    .SignalR()
    .AutoSync(true)
    .Events(events => events.Push("onPush"))
    .Sort(s => s.Add("CreatedAt").Descending())
    .Transport(tr => tr
    .Promise("notifyHubStart")
    .Hub("notifyHub")
    .Client(c => c
    .Read("Read")
    .Update("Update")
    .Create("Create"))
    .Server(s => s
    .Read("Read")
    .Update("Update")
    .Create("Create")))
    .Schema(schema => schema
    .Model(model =>
    {
    model.Id(p => p.Id);
    model.Field("NotificationDate", typeof (DateTime));
    model.Field(p => p.Message);
    }
    )
    )
    )
    )

  2. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 18 Apr in reply to Justin Link to this post

    The code we are trying to render looks like this:

    <!DOCTYPE html><html><body><svg width="300" height="200">  <polygon points="100,10 40,198 190,78 10,78 160,198"  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />Sorry, your browser does not support inline SVG.</svg> </body></html>
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Milena
    Admin
    Milena avatar
    224 posts

    Posted 19 Apr Link to this post

    Hello,

    In order to display raw html content in Grid's column, it is needed to disable Html encoding of the column. From security point of view, all columns are encoded by default. 

    Regards,
    Milena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top