Display Custom Markup in Grid Columns

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

    Posted 18 Apr 2016 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.

    .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
    .Columns(columns =>
    columns.Bound(p => p.Id)
    .ClientTemplate("<i class=\"fa fa-exclamation-circle fa-lg\"></i>");
    columns.Bound(p => p.NotificationDate)

    columns.Bound(p => p.Message)

    .DataSource(dataSource => dataSource
    .Events(events => events.Push("onPush"))
    .Sort(s => s.Add("CreatedAt").Descending())
    .Transport(tr => tr
    .Client(c => c
    .Server(s => s
    .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 2016 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. Milena
    Milena avatar
    253 posts

    Posted 19 Apr 2016 Link to this post


    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. 

    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