New to Kendo UI for jQuery? Download free 30-day trial

First Steps with Kendo UI for jQuery

Welcome to the First Steps guide on getting started with Kendo UI for jQuery!

This guide demonstrates how to start working with the suite by adding the needed resources and initializing a Kendo UI Grid.

The process draws on the following milestones:

  1. Download the controls
  2. Add the required JavaScript and CSS files
  3. Bind the Grid to data
  4. Initialize the Grid
  5. Configure the Grid

1. Download the Controls

You can quickly download the Kendo UI for jQuery controls after you log into your Telerik account.

2. Add the Required JavaScript and CSS Files

First, you will add the Kendo UI assets to your HTML document. In this sample case, you will use the Kendo UI CDN service. In other scenarios, you may want to host the files locally.

Always register jQuery before the Kendo UI script—otherwise, you will get JavaScript errors when you try to initialize a Kendo UI component or use the Kendo UI API.

To make sure all scripts are loaded, make a simple API call to render the Kendo UI version.

The $(function() { }); code block is a jQuery document.ready handler. All JavaScript code from this guide has to go inside this closure.

```html
    <link href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-main.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<!-- Add the Kendo library by either using the JAVASCRIPT MODULES -->
<script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.all.js" type="module"></script>

<!-- OR by using the BUNDLED JAVASCRIPT -->
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
```

3. Bind the Grid to Data

You will now create a Kendo UI DataSource with some dummy orders which will later be used to bind a Grid.

A hard-coded array of data items is the simplest way to create a datasource. In real-life scenarios, you may want to fetch remote data or configure editing (CRUD operations).

To ensure the correct implementation of the data operations, you need to configure the data field types. In addition, you will apply a page size and a default sorting by OrderDate.

var orderData = [
  { OrderID: 1, OrderDate: "2017-11-06T12:00:00", Freight: 12.34, ShipCity: "Antwerp", ShipCountry: "Belgium" },
  { OrderID: 2, OrderDate: "2019-03-02T12:00:00", Freight: 23.45, ShipCity: "Singapore", ShipCountry: "Singapore" },
  { OrderID: 3, OrderDate: "2019-06-26T12:00:00", Freight: 34.56, ShipCity: "Shanghai", ShipCountry: "China" },
  { OrderID: 4, OrderDate: "2017-09-20T12:00:00", Freight: 45.67, ShipCity: "Hamburg", ShipCountry: "Germany" },
  { OrderID: 5, OrderDate: "2017-12-12T12:00:00", Freight: 56.78, ShipCity: "Mumbai", ShipCountry: "India" },
  { OrderID: 6, OrderDate: "2018-02-08T12:00:00", Freight: 67.89, ShipCity: "Shanghai", ShipCountry: "China" },
  { OrderID: 7, OrderDate: "2018-05-05T12:00:00", Freight: 78.90, ShipCity: "Tokyo", ShipCountry: "Japan" },
  { OrderID: 8, OrderDate: "2019-08-03T12:00:00", Freight: 89.01, ShipCity: "Port Klang", ShipCountry: "Malaysia" },
  { OrderID: 9, OrderDate: "2018-10-29T12:00:00", Freight: 90.12, ShipCity: "Rotterdam", ShipCountry: "Netherlands" },
  { OrderID: 10, OrderDate: "2018-01-23T12:00:00", Freight: 10.32, ShipCity: "Vancouver", ShipCountry: "Canada" },
  { OrderID: 11, OrderDate: "2018-04-17T12:00:00", Freight: 21.43, ShipCity: "Colón", ShipCountry: "Panama" },
  { OrderID: 12, OrderDate: "2017-07-11T12:00:00", Freight: 32.54, ShipCity: "Manila", ShipCountry: "Philippines" },
  { OrderID: 13, OrderDate: "2017-10-24T12:00:00", Freight: 43.65, ShipCity: "Singapore", ShipCountry: "Singapore" },
  { OrderID: 14, OrderDate: "2018-03-11T12:00:00", Freight: 54.76, ShipCity: "Busan", ShipCountry: "South Korea" },
  { OrderID: 15, OrderDate: "2018-06-17T12:00:00", Freight: 65.87, ShipCity: "Shenzhen", ShipCountry: "China" },
  { OrderID: 16, OrderDate: "2018-10-13T12:00:00", Freight: 76.98, ShipCity: "Hong Kong", ShipCountry: "China" },
  { OrderID: 17, OrderDate: "2019-04-19T12:00:00", Freight: 87.09, ShipCity: "Dubai", ShipCountry: "UAE" },
  { OrderID: 18, OrderDate: "2019-07-25T12:00:00", Freight: 98.21, ShipCity: "Felixstowe", ShipCountry: "UK" },
  { OrderID: 19, OrderDate: "2017-09-22T12:00:00", Freight: 13.24, ShipCity: "Los Angeles", ShipCountry: "USA" },
  { OrderID: 20, OrderDate: "2018-12-09T12:00:00", Freight: 35.46, ShipCity: "New York", ShipCountry: "USA" },
  { OrderID: 21, OrderDate: "2018-02-04T12:00:00", Freight: 57.68, ShipCity: "Guangzhou", ShipCountry: "China" },
  { OrderID: 22, OrderDate: "2019-05-16T12:00:00", Freight: 9.87, ShipCity: "Long Beach", ShipCountry: "USA" },
  { OrderID: 23, OrderDate: "2019-08-18T12:00:00", Freight: 24.13, ShipCity: "Singapore", ShipCountry: "Singapore" }
];

var gridDataSource = new kendo.data.DataSource({
    data: orderData,
    schema: {
        model: {
          fields: {
            OrderID: { type: "number" },
            Freight: { type: "number" },
            OrderDate: { type: "date" },
            ShipCountry: { type: "string" },
            ShipCity: { type: "string" }
          }
        }
    },
    pageSize: 10,
    sort: {
        field: "OrderDate",
        dir: "desc"
    }
});

4. Initialize the Grid

Now you are ready to initialize a Kendo UI Grid. First, add a new <div> element to the page.

<div id="ordersGrid"></div>

The following snippet contains the JavaScript code which will create the component instance and use the defined datasource. Place the code after the gridDataSource definition. For a runnable version of the page after the current step, refer to this demo.

$("#ordersGrid").kendoGrid({
  dataSource: gridDataSource
});

5. Configure the Grid

At this point, you have a populated the Kendo UI Grid. However, you need to improve and polish its performance, for example:

  • Define user-friendly column titles and widths.
  • Enable data operations—paging, sorting, and filtering.
  • Define a height and enable scrolling so that the Grid cannot expand indefinitely.

The following example demonstrates the updated Grid configuration.

$("#ordersGrid").kendoGrid({
  dataSource: gridDataSource,
  height: 400,
  pageable: true,
  sortable: true,
  filterable: true,
  columns: [{
    field:"OrderID",
    title: "Order ID",
    width: 160
  }, {
    field: "Freight",
    width: 160,
  }, {
    field: "OrderDate",
    title: "Order Date",
    width: 200,
  }, {
    field: "ShipCountry",
    title: "Ship Country"
  }, {
    field: "ShipCity",
    title: "Ship City"
  }]
});

The runnable example below demonstrates the final version of the page that you will create and build as a result of this tutorial.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started with Kendo UI for jQuery</title>

    <link href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-main.min.css" rel="stylesheet" />

    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="ordersGrid"></div>

    <script>
      $(function() {        
        var orderData = [
          { OrderID: 1, OrderDate: "2017-11-06T12:00:00", Freight: 12.34, ShipCity: "Antwerp", ShipCountry: "Belgium" },
          { OrderID: 2, OrderDate: "2019-03-02T12:00:00", Freight: 23.45, ShipCity: "Singapore", ShipCountry: "Singapore" },
          { OrderID: 3, OrderDate: "2019-06-26T12:00:00", Freight: 34.56, ShipCity: "Shanghai", ShipCountry: "China" },
          { OrderID: 4, OrderDate: "2017-09-20T12:00:00", Freight: 45.67, ShipCity: "Hamburg", ShipCountry: "Germany" },
          { OrderID: 5, OrderDate: "2017-12-12T12:00:00", Freight: 56.78, ShipCity: "Mumbai", ShipCountry: "India" },
          { OrderID: 6, OrderDate: "2018-02-08T12:00:00", Freight: 67.89, ShipCity: "Shanghai", ShipCountry: "China" },
          { OrderID: 7, OrderDate: "2018-05-05T12:00:00", Freight: 78.90, ShipCity: "Tokyo", ShipCountry: "Japan" },
          { OrderID: 8, OrderDate: "2019-08-03T12:00:00", Freight: 89.01, ShipCity: "Port Klang", ShipCountry: "Malaysia" },
          { OrderID: 9, OrderDate: "2018-10-29T12:00:00", Freight: 90.12, ShipCity: "Rotterdam", ShipCountry: "Netherlands" },
          { OrderID: 10, OrderDate: "2018-01-23T12:00:00", Freight: 10.32, ShipCity: "Vancouver", ShipCountry: "Canada" },
          { OrderID: 11, OrderDate: "2018-04-17T12:00:00", Freight: 21.43, ShipCity: "Colón", ShipCountry: "Panama" },
          { OrderID: 12, OrderDate: "2017-07-11T12:00:00", Freight: 32.54, ShipCity: "Manila", ShipCountry: "Philippines" },
          { OrderID: 13, OrderDate: "2017-10-24T12:00:00", Freight: 43.65, ShipCity: "Singapore", ShipCountry: "Singapore" },
          { OrderID: 14, OrderDate: "2018-03-11T12:00:00", Freight: 54.76, ShipCity: "Busan", ShipCountry: "South Korea" },
          { OrderID: 15, OrderDate: "2018-06-17T12:00:00", Freight: 65.87, ShipCity: "Shenzhen", ShipCountry: "China" },
          { OrderID: 16, OrderDate: "2018-10-13T12:00:00", Freight: 76.98, ShipCity: "Hong Kong", ShipCountry: "China" },
          { OrderID: 17, OrderDate: "2019-04-19T12:00:00", Freight: 87.09, ShipCity: "Dubai", ShipCountry: "UAE" },
          { OrderID: 18, OrderDate: "2019-07-25T12:00:00", Freight: 98.21, ShipCity: "Felixstowe", ShipCountry: "UK" },
          { OrderID: 19, OrderDate: "2017-09-22T12:00:00", Freight: 13.24, ShipCity: "Los Angeles", ShipCountry: "USA" },
          { OrderID: 20, OrderDate: "2018-12-09T12:00:00", Freight: 35.46, ShipCity: "New York", ShipCountry: "USA" },
          { OrderID: 21, OrderDate: "2018-02-04T12:00:00", Freight: 57.68, ShipCity: "Guangzhou", ShipCountry: "China" },
          { OrderID: 22, OrderDate: "2019-05-16T12:00:00", Freight: 9.87, ShipCity: "Long Beach", ShipCountry: "USA" },
          { OrderID: 23, OrderDate: "2019-08-18T12:00:00", Freight: 24.13, ShipCity: "Singapore", ShipCountry: "Singapore" }
        ];

        var gridDataSource = new kendo.data.DataSource({
          data: orderData,
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                OrderDate: { type: "date" },
                ShipCountry: { type: "string" },
                ShipCity: { type: "string" }
              }
            }
          },
          pageSize: 10,
          sort: {
            field: "OrderDate",
            dir: "desc"
          }
        });  


        $("#ordersGrid").kendoGrid({
          dataSource: gridDataSource,          
          height: 400,
          pageable: true,
          sortable: true,
          filterable: true,
          columns: [{
            field:"OrderID",
            title: "Order ID",
            width: 160
          }, {
            field: "OrderDate",
            title: "Order Date",
            width: 200,
            format: "{0:dd MMMM yyyy}"
          }, {
            field: "ShipCountry",
            title: "Ship Country"
          }, {
            field: "ShipCity",
            title: "Ship City"
          }]
        });

      });

    </script>
  </body>
</html>

This is it! Now you are ready to dive more deeply into Kendo UI for jQuery and implement modern and slick web applications!

Next Steps

See Also

In this article