Toggle Font Styles in Grids
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | All |
Browser | All |
Browser Version | All |
Description
How can I toggle between regular fonts and italics by clicking on a radio button in the toolbar of the Grid?
Solution
Use the CSS
jQuery method and the change
event of the radio button.
<div id="example">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label">Now:</label>
<input type="radio" name="time" onchange="checkBoxChanged('now')" checked/>
<label class="category-label">Specific Date:</label>
<input type="radio" name="time" onchange="checkBoxChanged('specific')" />
</div>
</script>
<script>
function checkBoxChanged(time) {
var grid = $("#grid").data("kendoGrid");
if (time == "now") {
$("#grid").css("font-style", "normal");
} else {
$("#grid").css("font-style", "italic");
}
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
ShipCountry: {
type: "string"
},
ShipName: {
type: "string"
},
ShipCity: {
type: "string"
},
ShipAddress: {
type: "string"
}
}
}
},
pageSize: 30
},
toolbar: kendo.template($("#template").html()),
height: 540,
resizable: true,
pageable: true,
columns: [{
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
}, {
field: "ShipName",
title: "Ship Name",
locked: true,
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}]
});
});
</script>
<style>
#grid .k-grid-toolbar {
padding: .6em 1.3em .6em .4em;
}
.category-label {
vertical-align: middle;
padding-right: .5em;
}
#category {
vertical-align: middle;
}
.refreshBtnContainer {
display: inline-block;
}
.toolbar {
float: right;
}
</style>
</div>