Kendo grid basic example.

Direct OData binding with filtering in the header.

by Sandeep Kumar

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.flat.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.flat.min.css">
<h1> Kendo UI controls</h1>
<div id="example">
  <div class="demo-section k-content">

    <h4>Date picker:</h4>
    <input id="datepicker" value="01/17/2017" title="datepicker" style="width: 80%" />

    <h4 style="margin-top: 2em;">Month picker:</h4>
    <input id="monthpicker" value="Jaunary 2018"         title="monthpicker" style="width: 80%" />
    
    <h4><label for="colorCombo">Choose Color</label></h4>
    <input id="colorCombo" value="1" style="width: 80%;" />
    
     <h4>Slider</h4>
    <input id="slider" class="balSlider" value="0" title="slider" />
  </div>
</div>

CSS

html{
    font-size: 13px; 
    font-family: Tahoma, Verdana, Helvetica, sans-serif;   
    color: dimgrey;
}

div.balSlider {
  width: 100%;
}

div.balSlider .k-slider-selection {
  display: none;
}

JavaScript

$(document).ready(function() {
  // create DatePicker from input HTML element
  $("#datepicker").kendoDatePicker();

  $("#monthpicker").kendoDatePicker({
    // defines the start view
    start: "year",

    // defines when the calendar should return date
    depth: "year",

    // display month and year in the input
    format: "MMMM yyyy",

    // specifies that DateInput is used for masking the input element
    dateInput: true
  });
  
  
  var comboData = [
    { text: "Black", value: "1" },
    { text: "Orange", value: "2" },
    { text: "Grey", value: "3" }
  ];

  // create DropDownList from input HTML element
  $("#colorCombo").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: comboData,
    index: 0,
    change: onChange
  });
  
  var colorCombo = $("#colorCombo").data("kendoDropDownList");

  colorCombo.select(0);
  
  function onChange() {
  	//code on change event.
  };
  
  var slider = $("#slider").kendoSlider({
    increaseButtonTitle: "Right",
    decreaseButtonTitle: "Left",
    min: 0,
    max: 100,
    smallStep: 2,
    largeStep: 1
  }).data("kendoSlider");

});