Followed getting started documentation to setup a basic grid. I added a column template to bold the first column but it is not being applied. I tried the code in Dojo and it works. Triple checked the syntax, gird is displayed fine with all the data but no bold is applied.
Inspection of the html in chrome shown no style applied to the table data.
This has to be something really simple I'm overlooking...
here is the code:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Client</title>
<!-- Common Kendo UI CSS for web widgets and widgets for data visualization. -->
<link href="../css/kendo/kendo.common.min.css" rel="stylesheet" />
<!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. -->
<%--<link href="../css/kendo/kendo.rtl.min.css" rel="stylesheet" type="text/css" />--%>
<!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->
<link href="../css/kendo/kendo.default.min.css" rel="stylesheet" />
<!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. -->
<link href="../css/kendo/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
<!-- Kendo UI combined JavaScript -->
<script src="../js/kendo/kendo.all.min.js"></script>
<script>
var people = [
{ firstName: "John",
lastName: "Smith",
email: "[email protected]"
},
{ firstName: "Jane",
lastName: "Smith",
email: "[email protected]"
},
{ firstName: "Josh",
lastName: "Davis",
email: "[email protected]"
},
{ firstName: "Cindy",
lastName: "Jones",
email: "[email protected]"
}
];
$("#client_grid").kendoGrid({
autoBind: false,
selectable: true,
columns: [{
field: "firstName",
title: "First Name",
template: "<strong>#: firstName # </strong>"
},
{
field: "lastName",
title: "Last Name",
},
{
field: "email",
title: "Email",
}]
});
$("#client_grid").kendoGrid({
dataSource: people
});
</script>
</head>
<body>
<div id="client_grid" />
</body>
</html>Well, based on the code you provided, you are initializing the grid twice:
One:
$("#client_grid").kendoGrid({
autoBind: false,
selectable: true,
columns: [{
field: "firstName",
title: "First Name",
template: "<strong>#: firstName # </strong>"
},
{
field: "lastName",
title: "Last Name",
},
{
field: "email",
title: "Email",
}]
});
Two:
$("#client_grid").kendoGrid({
dataSource: people
});
And the second one is blowing away your config of the first(including the template).
Just do this instead:
$("#client_grid").kendoGrid({
dataSource: people,
autoBind: false,
selectable: true,
columns: [{
field: "firstName",
title: "First Name",
template: "<strong>#: firstName # </strong>"
},
{
field: "lastName",
title: "Last Name",
},
{
field: "email",
title: "Email",
}]
});
// Because autobind is false, you have to trigger the fetch somehow...
$("#client_grid").getKendoGrid().dataSource.read();
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments