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 Answers, 1 is accepted
Rank 1
<!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>
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