Customizing and formatting column data (Simple)

This recipe demonstrates how to customize and format the data in a Kendo Grid column.

Getting ready

Open 6-customizing.html in your editor or create a new document.

How to do it...

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>

How it works...

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset