This recipe demonstrates how to change your Kendo theme.
Reopen the same file you used or created from the 1-initializing.html exercise file. In this recipe, you'll be making a simple change to realize how easy it is to change the theme of your grid.
In the <head> section of your document, change the reference to kendo.default.min.css to any of the other themes included in the style folder with your Kendo download. The following is an example that should be easy to see once you save your changes and refresh the page in the browser:
<!DOCTYPE html> <html> <head> <title>Kendo UI Grid How-to</title> <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css"> <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.metro.min.css"> <script src="kendo/js/jquery.min.js"></script> <script src="kendo/js/kendo.web.min.js"></script> </head>
Without referencing a Kendo theme stylesheet, your grid will essentially look like a plain table with borders. Kendo generates the same classes every time a grid is initialized, so the theme simply defines the style of those classes. If you look inside any particular theme folder, for example Metro, you'll notice that Kendo uses sprites to keep the file size and load time down.