Kendo UI – Graphs, Chart …

Kendo UI – Graphs, Chart …

Kendo UI – front-end framework that uses html5, css jquey to display high performance data  like charts, graphs … has both opensource and commerical version

Some good introduction videos and links on Kendo Ui

  • Getting Started with Kendo UI for ASP.NET MVC – Introduction videos on install and setting up Kendo with Visual Studio as new or existing Asp.net MVC project 
    • Provided that you purchase Kendo UI from Telerik
    • Open new project in Visual Studio -> Web -> Kendo UI  Template for MVC
    • Check that the library Kendo.mvc.dll is included in your reference in Visual Studio
    • Check that the script and styles are also included in your App_Start in the BundleConfig.cs
      • bundles.Add(new ScriptBundle(“~/bundles/kendo”).Include(
        “~/Scripts/kendo/2014.1.318/kendo.web.min.js”
        ));
        bundles.Add(new StyleBundle(“~/Content/kendo/css”).Include(
        “~/Content/kendo/2014.1.318/kendo.common.min.css”,
        “~/Content/kendo/2014.1.318/kendo.default.min.css”
        ));
    • In your View/Shared/_Layout.cshtml under the head section <head> </head> include the following

      @Styles.Render(“~/Content/css”)
      @Styles.Render(“~/Content/kendo/css”)
      <!–This bundle was moved by the Telerik VS Extensions for compatibility reasons–>
      @Scripts.Render(“~/bundles/jquery”)
      @Scripts.Render(“~/bundles/kendo”)

    • When you display the webpage use any browser, just do a right click and choose inspect, you should see the following

      <head>
      <link href=”/Content/site.css” rel=”stylesheet”>
      <link href=”/Content/kendo/2014.1.318/kendo.common.min.css” rel=”stylesheet”>
      <link href=”/Content/kendo/2014.1.318/kendo.default.min.css” rel=”stylesheet”>
      <script src=”/Scripts/jquery-2.1.4.js”></script><script src=”/Scripts/kendo/2014.1.318/kendo.web.min.js”></script>
      </head>

    • Goto Views and update index.cshtml add @(html.Kendo().DatePicker().Name(“Birthday”).Value(DateTime.Today))
    • Run and should see as below :- Easy !!!
    • kendodatapicker
  • The Kendo UI Dojo – interactive environment to see functionality of Kendo UI with lots of examples
  • More interactive example on Kendo – do with charts, grid, scheduler
  • Grid – very simple, step by step example on using Kendo with local and remote data source
  • Data source – example showing how to read, update, delete from a remote data source
  • Angular JS and Kendo UI by Jeremy Likness – Case example of using angular js and kendo

Leave a Reply

Your email address will not be published. Required fields are marked *