Kendo jQuery UI

Build Better jQuery
Apps Faster

A complete jQuery UI component library that allows to quickly build stunning
and high-performance responsive web applications.

$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read:
        "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers",
    },
    pageSize: 20,
  },
  height: 550,
  groupable: true,
  sortable: true,
  pageable: {
    refresh: true,
    pageSizes: true,
    buttonCount: 5,
  },
  columns: [
    {
      template:
        "<div class='customer-photo'" +
        "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
        "<div class='customer-name'>#: ContactName #</div>",
      field: "ContactName",
      title: "Contact Name",
      width: 240,
    },
    {
      field: "ContactTitle",
      title: "Contact Title",
    },
    {
      field: "CompanyName",
      title: "Company Name",
    },
    {
      field: "Country",
      width: 150,
    },
  ],
});
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/13"),
  startTime: new Date("2013/6/13 07:00 AM"),
  height: 600,
  views: [
    "day",
    { type: "workWeek", selected: true },
    "week",
    "month",
    "agenda",
    { type: "timeline", eventHeight: 50 },
  ],
  timezone: "Etc/UTC",
  dataSource: {
    batch: true,
    transport: {
      read: {
        url: "https://demos.telerik.com/kendo-ui/service/tasks",
        dataType: "jsonp",
      },
      update: {
        url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
        dataType: "jsonp",
      },
      create: {
        url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
        dataType: "jsonp",
      },
      destroy: {
        url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
        dataType: "jsonp",
      },
      parameterMap: function (options, operation) {
        if (operation !== "read" && options.models) {
          return { models: kendo.stringify(options.models) };
        }
      },
    },
    schema: {
      model: {
        id: "taskId",
        fields: {
          taskId: { from: "TaskID", type: "number" },
          title: {
            from: "Title",
            defaultValue: "No title",
            validation: { required: true },
          },
          start: { type: "date", from: "Start" },
          end: { type: "date", from: "End" },
          startTimezone: { from: "StartTimezone" },
          endTimezone: { from: "EndTimezone" },
          description: { from: "Description" },
          recurrenceId: { from: "RecurrenceID" },
          recurrenceRule: { from: "RecurrenceRule" },
          recurrenceException: { from: "RecurrenceException" },
          ownerId: { from: "OwnerID", defaultValue: 1 },
          isAllDay: { type: "boolean", from: "IsAllDay" },
        },
      },
    },
    filter: {
      logic: "or",
      filters: [
        { field: "ownerId", operator: "eq", value: 1 },
        { field: "ownerId", operator: "eq", value: 2 },
      ],
    },
  },
  resources: [
    {
      field: "ownerId",
      title: "Owner",
      dataSource: [
        { text: "Alex", value: 1, color: "#f8a398" },
        { text: "Bob", value: 2, color: "#51a0ed" },
        { text: "Charlie", value: 3, color: "#56ca85" },
      ],
    },
  ],
});
$("#chart").kendoChart({
  title: {
    text: "Gross domestic product growth \n /GDP annual %/"
  },
    legend: {
    position: "bottom"
  },
    seriesDefaults: {
    type: "area",
    area: {
     line: {
      style: "smooth"
     }
    }
  },
  series: [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
  }, {
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }, {
    name: "Haiti",
    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
  }],
  valueAxis: {
    labels: {
      format: "{0}%"
    },
    line: {
      visible: false
    },
    axisCrossingValue: -10
  },
  categoryAxis: {
    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
    majorGridLines: {
     visible: false
    },
    labels: {
     rotation: "auto"
    }
  },
  tooltip: {
    visible: true,
    format: "{0}%",
    template: "#= series.name #: #= value #"
  }
});
$("#editor").kendoEditor({
  resizable: {
    content: true,
    toolbar: true,
  },
});
DemoGrid
Scheduler
Charts
Editor
More Demos

Looking for a set of UI components to enhance your jQuery application? Take a look at our jQuery demos and documentation by using the links below and sign up for a trial to get access to our support ticketing system!

How Does Kendo UI Cut
Development Time?

Build your next application, or augment an existing one, with easy-to-use jQuery components designed with performance and rich user experience in mind, all for the jQuery developer.

Robust UI & Data
Visualization Library Built
for jQuery

The Kendo UI jQuery components have served developers for almost a decade, making Kendo UI one of the most robust and comprehensive jQuery component sets on the market. Taking the fundamentals of jQuery in mind we have created an extensive set of UI elements and data visualization components that are natural and easy for jQuery developers to pick up

Simply put: if you know jQuery you know Kendo UI.

Framework Helpers and Data Models

Concepts like client-side data models, templating, and automatic data requests are generally features that require supplemental libraries but with Kendo UI they are all included out of the box. Thanks to framework items like our DataSource, which provides a way to do full CRUD operations with simple configuration options across any data-bound component, everything that a jQuery developer would need for their applications comes built-in.

Modern Design & Themes

Kendo UI ensures that any developer can make their applications follow the latest and greatest standards when it comes to design. With implementations of Material Design, Bootstrap, and other modern designs, a stunning UI can be achieved by simply including a CSS file. Making the themes your own is a breeze with the ThemeBuilder tool which provides a way to update an entire theme to fit any corporate look-and-feel with a few clicks. Of course, for the developer or designer that wants to get their hands dirty themes can be modified with some customizations through Sass or CSS.

Legendary Support

Beyond the UI components Kendo UI ensures that all developers are well taken care of through its legendary support. Along with a set of UI components Kendo UI developers have a dedicated support ticketing system to assist developers throughout their application development efforts. On top of this support we also add in learning resources like a virtual classroom and professional services to ensure that no matter what the request might be, we have help readily available.

trust-radius-badge

Telerik and Kendo UI Earns Multiple TrustRadius Best of Development 2021 awards

Kendo UI has won Best Feature Set , Best Customer Support and Best Usability.

trust-radius-badge

Kendo UI Earns 2020 Top Rated Award for App Development Platform

Progress Kendo UI has earned TrustRadius’ Top Rated Award for App Development Platform. See the full list here.

All jQuery Components

Upgrade to Telerik DevCraft Complete

Be Ready for Any Project & Technology

Save up to 50% in development time by getting 1,250+ .NET and JavaScript UI components for building web, desktop and mobile apps.

Get the Best Value for Money

Enjoy Kendo UI (for Angular, React, jQuery, Vue) along with 12 products for .NET apps development, embedded reporting and mocking tools while saving up to 90% from the upgrade price.

Support and Learning

Industry leading support services backed by comprehensive documentation and learning resources.

Rich-User-Experience-Keeps-Apps-Healthy-at-Boston-Heart-Diagnostics
success story
"From a user experience, for a rich user experience, yes I found Kendo UI gives me the ability and utilities, otherwise I had to write them all."
Shalom Keynan,
Director of Application Development, Boston Heart Diagnostics
Watch video
jquery-blog-post
Blog Post

How to Use a jQuery Grid UI Component in Your Web App

Learn how to use the Kendo UI jQuery Grid to provide powerful tabular data viewing, manipulating, and editing features to your app.

What Developers Say

Great JavaScript components for fast and high quality web app development. Kendo UI is very easy to use and very fast to get results from.

GoranBajer
Goran Bajer Software Developer, Info Novitas Ltd.

After being in the industry for over 20 years I have seen a lot of frameworks come and go, but Kendo UI is by far the best for hybrid/mobile/native apps. Not only for its ease of use but it plays well with others.

GeovanniHudson
Geovanni Hudson Sr. Web/UI Application Engineer, PCYC

As a developer working for the DOD we were able to rapidly integrate Kendo UI into a pre-existing C# application providing functionality to the client they were not even aware they wanted. This cut down majorly on cost saving roughly 1+ million. I would recommend Kendo UI to anyone who wants to impress their client with amazing UI.
Thanks Telerik Team!

GeraldHirsch
Gerald Hirsch Front End Developer, U.S. Government
Telerik customers logos

Get Started

Kendo UI