Monday 19 August 2013

Kendo UI

Kendo UI is an HTML-5, Jquery-based framework for building modern web apps. The framework features lots of UI widgets, a rich data visualization framework, an auto-adaptive Mobile framework, and all of the tools needed for HTML5 app development, such as Data Binding, Templating, Drag-and-Drop API, and more.

Kendo UI comes in different bundles

  • Web - HTML5 widgets for desktop browsing experience
  • DataViz - HTML5 data visualization widgets
  • Mobile - HTML5 framework for building hybrid mobile applications
  • Complete - includes Kendo UI Web, Kendo UI DataViz and Kendo UI Mobile
  • Complete for ASP.NET MVC - Kendo UI Complete plus ASP.NET MVC wrappers for Kendo UI Web and Kendo UI DataViz

UI Widgets that we can use in Kendo UI

AutoComplete, Calendar, ColorPicker, ComboBox, DatePicker, DateTimePicker, DropDownList, Editor, Grid, ListView, Menu, MultiSelect, NumericTextBox, PanelBar, Scheduler, Slider, Splitter, TabStrip, TimePicker, Tooltip, TreeView,Upload, Window

Using Kendo UI

  1. Copy the /js and /styles directories of the Kendo UI Web distribution to your web application root directory
  2. Include the Kendo UI Web JavaScript and CSS files in the head tag of your HTML page

    <!-- Common Kendo UI Web CSS -->
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <!-- Default Kendo UI Web theme CSS -->
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <!-- jQuery JavaScript -->
    <script src="js/jquery.min.js" /><!-- Kendo UI Web combined JavaScript -->
    <script src="js/kendo.web.min.js" />

Basic Grid example using Kendo UI


In Grid we can do the lots of functionality using HTML-5 and J-Query which are as follows:
Initialization from table, Binding to local data,Binding to remote data, Batch editing, Inline editing, Popup editing, Editing custom editor, Virtualization of local data, Virtualization of remote data ,Hierarchy, Detail template, Toolbar template, Custom command, Aggregates, Filter menu customization, Sorting, Selection, Foreign Key column, Column reordering, Column resizing, Column menu, Row template, Events, API, RTL support, Keyboard navigation.

Source Code

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
            <script src="../../content/shared/js/people.js"></script>

        <div id="example" class="k-content">
            <div id="clientsDb">

                <div id="grid" style="height: 380px"></div>

            </div>

            <style scoped>
                #clientsDb {
                    width: 692px;
                    height: 413px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                    background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
                }
            </style>
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        columns: [{
                            field: "FirstName",
                            width: 90,
                            title: "First Name"
                        }, {
                            field: "LastName",
                            width: 90,
                            title: "Last Name"
                        }, {
                            width: 100,
                            field: "City"
                        }, {
                            field: "Title"
                        }, {
                            field: "BirthDate",
                            title: "Birth Date",
                            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                        }, {
                            width: 50,
                            field: "Age"
                        }
                        ]
                    });
                });
            </script>
        </div>


</body>
</html>


Sample Screens

   1.  Simple Grid


      2.  Group by Column

   
   3.  Grid within Grid

   
   4.  Toolbar within Grid

   
   5.  Filter Grid

   
   6.  Grid Calculation


























You can download all Kendo UI bundles from the following link:

About Author:
Vishal Kudale  is enthusiast .net developer who works as associate consultant with Systems Plus Pvt. Ltd. He in free time reads and write on various web technologies. He can be contacted at: vishal.kudale@spluspl.com
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)