Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Kendo UI : Creating a data grid

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 781
    Comment on it

    This series would be introducing simple examples of the widget along with the problems and the solutions that were used during execution of a project.

    Kendo UI is a set library extended from Jquery developed and managed by Telerik.com.

    It has bin built upon jquery so this makes it easier for the developers to understand an code using Kendo UI if they are already familiar with Jquery.

    Kendo UI has an extensive set of widget that we can use to develop UI for web and mobile. It has a rich library and has support for angularjs also as an added feature to bind your data in to the views.

    Kendo UI is mobile friendly and responsive and therefore is a preferred commercial solution being used by many developers and companies.

    Some of the widgets that Kendo UI Provides are listed below.

    1. Kendo Grid
    2. ListView
    3. KendoWindows
    4. DatePicker
    5. AutoComplete

    To start with our first example for KendoGrid.

    We would need to include a few javascript files and css files in our code to be able to use kendo UI

    http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css
    http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css
    http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js
    

    These are the bare minimum set of files to be included for the kendo ui widgets

    To create a grid we need a data source which uses a JSON Object to fill in the data in to the grid rows.

    var employee = [ { firstName: "Naren", 
                 lastName: "Arora", 
                 email: "narendra.arora@evontech.com",
             designation: Assitant Architect   },
               { firstName: "Surit", 
                 lastName: "Agarwal", 
                 email: "surit.agarwal@evontech.com",
            designation: Software Developer },
               { firstName: "Sachin", 
                 lastName: "Joshi", 
                 email: "sachin.joshi@evontech.com",
             designation: SEO}];
    

    The above example creates a JSON with employee details and now we would create a Grid using the same.

    To create the grid element we would first need to create the HTML element for the grid.

    <div id=EmployeeGrid></div>
    

    The javscript code below would bind the HTML div element and create a Kendo Grid.

    var dataGrid = $("#EmployeeGrid").kendoGrid({
        selectable: "row",
        dataSource: Employee,
        height: "100%",
        sortable: true,
        columns: [ { title: "First Name", field: "firstName" }, 
                   { title: "Last Name", field: "lastName"},
                   { title: "Email", field: "email" },
               { title: Designation,field: designation} ],
        pageable: true
    }).data("kendoGrid");
    

    To understand the config variables, events and functions of the kendo grid please look into their documention available at http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

    We would look into some more examples and other widgets in the coming tutorials.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: