This is not working as soon as I put single quote or double quote with some html code into the Title and HeaderTemplate ==> not working in .Net Core
Error CS1061 'GridColumnGroupBuilder<????>' does not contain a definition for 'ClientHeaderTemplate' and no accessible extension method 'ClientHeaderTemplate' accepting a first argument of type 'GridColumnGroupBuilder
How can this be resolve kendo and Core 2019.3.917
Javascript equivalent failure
title: "<em class='text-danger text-big bg-danger'>Contact Info</em> - <strong class=text-info>Photo</strong>",
Code
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/multicolumnheaders">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<style>
.text-danger{
color:red;
padding:5px 15px 5px 15px;
}
.text-info{
color:orange;
}
.bg-danger{
background-color:#000000;
}
.text-big{
font-size:4rem;;
}
</style>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
resizable: true,
reorderable: true,
pageable: true,
columnMenu: true,
columns: [{
field: "CompanyName",
title: "Company Name",
width: 420
},
{
title: "<em class='text-danger text-big bg-danger'>Contact Info</em> - <strong class=text-info>Photo</strong>",
columns: [{
field: "ContactTitle",
title: "Contact Title",
width: 200
},{
field: "ContactName",
title: "Contact Name",
width: 200
},{
title: "Location",
columns: [ {
field: "Country",
width: 200
},{
field: "City",
width: 200
}]
},{
field: "Phone",
title: "Phone"
}]
}]
});
});
</script>
</div>
</body>
</html>
4 Answers, 1 is accepted
Rank 1
Iron
Just found a little work around by changing:
title: "<em class='text-danger text-big bg-danger'>Contact Info</em> - <strong class=text-info>Photo</strong>",
with
title: "-MYCOLUMNTITLE2CHANGE",
$(document).ready(function () {
//$("#grid thead [data-title='MYCOLUMNTITLE2CHANGE']").html("@Html.Raw(colTitle)");
$("#grid thead [data-title='MYCOLUMNTITLE2CHANGE']").html("@Html.Raw(colTitle)");
});
Hi Nicolas,
I have investigated the provided code snippets and I did notice that HTML is passed inside the title option. It is important to point out that if you would like to have more complex elements within the header, you would have to make use of the headerTemplate option. In the context of ASP.NET Core wrappers its implementation is as follows:
columns.Bound(o => o.ShipCountry).ClientHeaderTemplate("<em class='text-danger text-big bg-danger'>Contact Info</em> - <strong class=text-info>Photo</strong>");Notice the content of the rendered element in the Kendo UI Grid:
https://www.screencast.com/t/VUz8iqX0BTEn
I cannot be completely sure why the ClientHeaderTemplate throws an error. Is it possible for you to provide a sample in which the faulty behavior could be observed?
Best regards,
Tsvetomir
Progress Telerik
Rank 1
Iron
The code I gave up at the beginning gives the error.
I do understand the clientHeaderTemplate and use it accordingly, however this property is NOT available in the Core version for the GROUP Column. Only Title is available.
Hi Nicolas,
I apologize for my misunderstanding. It is correct that when there is a multi-column header, the template does not have a ClientHeaderTemplate option. The approach that you have provided by interchanging dynamically the HTML of the header is the correct approach to go for.
In case any other issues are encountered, let me know.
Regards,
Tsvetomir
Progress Telerik