jquery-bg

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
}});
                
                
 
 
 

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!

More demos Learn more Download free trial

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.

part-of-devcraft

Need .NET with your JavaScript?

Flexible Options Matched to Your Development Needs

Our DevCraft package gives you the complete Telerik .NET and Kendo UI JavaScript component libraries in one convenient bundle. Want more? You also get our Reporting and Productivity tools included in DevCraft as well for an outstanding value. Easily build modern, high-performance apps on any web, desktop or mobile platform—fast.

Get started fast by taking advantage of thousands of demos (with source code) as well as comprehensive documentation and a full assortment of VS templates.

Learn more about DevCraft

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.

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, U.S. Government

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

Get Started