This recipe demonstrates how to customize and format the data in a Kendo Grid column.
Copy the following code into your new HTML file:
<!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.default.min.css"> <script src="kendo/js/jquery.min.js"></script> <script src="kendo/js/kendo.web.min.js"></script> <script src="js/personData.js"></script> </head> <body> <h3 style="color:#4f90ea;">Exercise 6 - Customizing and Formatting Column Data</h3> <p><a href="EB9781849699136_3.html">Home</a></p> <script type="text/javascript"> $(document).ready(function() { var myDataSource = new kendo.data.DataSource({ data: personData, schema: { model: { fields: { FirstName: { type: "string" }, LastName: { type: "string" }, Rank: { type: "string" }, DOB: { type: "date" }, PersonId: { type: "number" } } } } } ); $("#myGrid").kendoGrid({ dataSource: myDataSource, columns: [ { field: "Name", title: "Full Name", width: "300px", template: '#=FirstName# #=LastName#' }, { field: "DOB", title: "Date of Birth", width: "300px", format: "{0:yyyy-MM-dd}" }, { field: "Rank", title: "Rank", width: "300px" } ] }); }); </script> <div id="myGrid"></div> </body> </html>
As you may have noticed, in this example, we chose to define our DOB
field in our datasource for us to be able to use it in the grid. We also added a format
parameter that accepts a filter pattern for our data. In this case, we want to format the date so that the user can properly sort the dates. We also concatenated the FirstName
and LastName
fields and gave that column a title of Full Name
. Lastly, we added a width
parameter to each column definition.