Node.js, KendoUI and Jade - Read

You can refer my previous post here on use cases of a CRUD application.

We will be illustrating the creation of a simple jade based read user interface for an employee object using KendoUI grid in the following post:

extends layout block content             script(type='text/javascript')                            $(document).ready(function() {                                     var keyValuesResult = !{result};                                     <!-- Data source for outer grid -->                                          var dataSource = new kendo.data.DataSource({                                                 pageSize: 6,                                                                 autoSync: true,                                                 data: keyValuesResult,                                                 schema: {                                                             model: {                                                                         fields: {                                                                                                 updated: { type: "date" },                                                                                                 created: { type: "date" },                                                                                                 address:{ type: "string" },                                                                                                 name:{ type: "string" },                                                                                                 employeeid:{ type: "string" },                                                                                                 _id:{type:"string"}                                                                                                 }                                                                                     }                                                                         }                                     });                                                                                                             <!-- Define the grid and attributes -->                                                var element = $("#myGrid").kendoGrid({                                                 dataSource:dataSource,                                                             pageSize: 6,                                                             serverPaging: true,                                                             serverSorting: true,                                                             databind:true,                                                                                                              height: 450,                                                             sortable: true,                                                             pageable: true,                                                             selectable: true,                                                             filterable: true,                                                             resizable: true,                                                             columns: [                                                                                     { field:"updated",title:"Updated Date",attributes:{title:"ToolTip"}, width: 150 },                                                                                     { field:"created",title:"Created Date",width: 150 },                                                                                     { field:"address",title:"Address",width: 100 },                                                                                     { field:"name",title:"Name",width: 100 },                                                                                     { field:"employeeid",title:"Employee Id",width: 50 },                                                                                     { field:"_id",title:"_id",width: 50}                                                                                     ],                                                             });                         });             h1= title             p Employee Details             #example.k-content             #myGrid

Summary of what is being done in the above Read UI:

1) We are defining a Kendo Grid, "myGrid"
2) Make sure to download the Kendo library to use this support from the official site under the library.
3) Create the datasource for the grid and assign the JSON object from server side.
4) Define the Kendo Grid attributes for pagination, sorting, editting and filtering features.

You can move on to the next section to see how to create the UpdateUI here.