Telerik|KendoUI中文网 – Telerik、Kendo UI正版购买，Telerik、Kendo UI试用下载

更快地构建更好的JavaScript应用

带有jQuery，Angular，React和Vue库的JavaScript UI组件的最终集合。无论您选择哪种JavaScript框架，都可以快速构建引人注目的高性能响应Web应用程序。

Telerik_KendoUI产品技术交流群：726377843

$("#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
}});

import { Component } from '@angular/core';
import { customers } from './customers';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [kendoGridBinding]="gridData" [height]="410"
          [pageable]="{
            buttonCount: buttonCount,
            info: info,
            type: type,
            pageSizes: [5, 10, 20],
            previousNext: previousNext
          }"
          [sortable]="true"
          [groupable]="true"
          [filterable]="true"
          [pageSize]="10">
          <kendo-grid-column field="ContactName">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="customer-photo"
               [ngStyle]="{ backgroundImage: getUrl(dataItem.CustomerID) }"></div>
        <div class="customer-name">
            {{ dataItem.ContactName }}
        </div>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="ContactTitle"></kendo-grid-column>
          <kendo-grid-column field="CompanyName"></kendo-grid-column>
          <kendo-grid-column field="Country"></kendo-grid-column>
        </kendo-grid>
    `,
    styles: [`
      .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
      }

      .customer-name {
          display: inline-block;
          vertical-align: middle;
          line-height: 32px;
          padding-left: 3px;
      }
    `]
})
export class AppComponent {
                    public gridData: any[] = customers;

                    constructor() { }

                    public getUrl(id: string) {
                    return `url('https://demos.telerik.com/kendo-ui/content/web/Customers/${id}.jpg')`;
                    }
}

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart
      [title]="chartOptions.title"
      [legend]="chartOptions.legend"
      [seriesDefaults]="chartOptions.seriesDefaults"
      [series]="chartOptions.series"
      [valueAxis]="chartOptions.valueAxis"
      [categoryAxis]="chartOptions.categoryAxis"
      [tooltip]="chartOptions.tooltip">
    </kendo-chart>
  `
})
export class AppComponent {
                    public chartOptions = {
                title: {
                    text: "Gross domestic product growth /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}%"
                    }
                    }
}

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="row">
      <div class="col-6">
        <p>AutoComplete</p>
        <kendo-autocomplete [data]="listItems" [placeholder]="'Your favorite sport'">
        </kendo-autocomplete>
      </div>

      <div class="col-6">
        <p>ComboBox</p>
        <kendo-combobox [data]="listItems" [value]="'Basketball'">
        </kendo-combobox>
      </div>

      <div class="col-6">
        <p>DropDownList</p>
        <kendo-dropdownlist [data]="listItems" [value]="'Basketball'">
        </kendo-dropdownlist>
      </div>

      <div class="col-6">
        <p>MultiSelect</p>
        <kendo-multiselect [data]="listItems" [value]="value" [placeholder]="'Your favorite sports'"></kendo-multiselect>
      </div>
    </div>
  `
})
export class AppComponent {
                    public listItems: Array<string> = [
                    'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
                    'Football', 'Table Tennis', 'Tennis', 'Volleyball'
                    ];

                    public value = ['Basketball', 'Cricket'];
}

import React from 'react';
import ReactDOM from 'react-dom';

import { process } from '@progress/kendo-data-query';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

import { data } from './data';

const contactNameCell = (props) => {
                    return props.rowType === "data"
                    ? (<td role="gridcell" >
            <div
                    className="customer-photo"
                    style={{ backgroundImage: `url("https://demos.telerik.com/kendo-ui/content/web/Customers/${props.dataItem.CustomerID}.jpg")` }}>
            </div>
            <div className="customer-name">
                {props.dataItem.ContactName}
            </div>
        </td>)
                    : null
}

class App extends React.Component {
    state = {
        dataState: {
            skip: 0,
            take: 20
                    }
                    }
                    render() {
                    return (
                    <Grid
                    filterable
                    groupable
                    sortable
                    pageable={{ pageSizes: true, buttonCount: 5 }}
                    expandField="expanded"
                    data={process(data, this.state.dataState)}
                    onDataStateChange={this.handleDataStateChange}
                    onExpandChange={this.handleExpandChange}
                    {...this.state.dataState}
                    >
                <GridColumn field="ContactName" title="Contact Name" cell={contactNameCell} width="240px" />
                <GridColumn field="ContactTitle" title="Contact Title" />
                <GridColumn field="CompanyName" title="Company Name" />
                <GridColumn field="Country" title="Country" width="150px" />
            </Grid>
                    );
                    }

                    handleDataStateChange = (event) => {
                    this.setState({ dataState: event.data });
                    }
}

ReactDOM.render(<App />, document.getElementById('demo-react-grid'));</p>

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Chart,
    ChartTitle,
    ChartLegend,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartValueAxisItem,
    ChartValueAxis
} from '@progress/kendo-react-charts';

class App extends React.Component {
    categories = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
    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]
                    }];
                    render() {
                    return (
                    <Chart>
                <ChartTitle text="Gross domestic product growth /GDP annual %/" />
                <ChartLegend position="bottom" />

                <ChartCategoryAxis>
                    <ChartCategoryAxisItem categories={this.categories} />
                    <ChartCategoryAxisItem />
                </ChartCategoryAxis>

                <ChartValueAxis>
                    <ChartValueAxisItem labels={{ format: "{0}%" }} line={{ visible: false }} axisCrossingValue={-10} />
                </ChartValueAxis>

                <ChartSeries>
                    {this.series.map((item, idx) => (
                    <ChartSeriesItem
                    key={idx}
                    type="area"
                    line={{
                                style: "smooth"
                    }}
                    data={item.data}
                    name={item.name}
                    />
                    ))}
                </ChartSeries>
            </Chart>
                    );
                    }
}

ReactDOM.render(
                    <App />,
    document.getElementById('demo-react-charts')
)

import React from 'react';
import ReactDOM from 'react-dom';

import { AutoComplete, ComboBox, DropDownList, MultiSelect } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sports = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];

                    render() {
                    return (
                    <div className="row">
                <div className="col-6 ">
                    <p>AutoComplete</p>
                    <AutoComplete data={this.sports} placeholder="Your favorite sport" />
                </div>
                <div className="col-6 ">
                    <p>ComboBox</p>
                    <ComboBox data={this.sports} defaultValue="Basketball" />
                </div>
                <div className="col-6">
                    <p>DropDownList</p>
                    <DropDownList data={this.sports} defaultValue="Basketball" />
                </div>
                <div className="col-6 ">
                    <p>MultiSelect</p>
                    <MultiSelect data={this.sports} defaultValue={["Basketball", "Cricket"]} />
                </div>
            </div>
                    );
                    }
}

ReactDOM.render(
                    <AppComponent />,
    document.getElementById('demo-react-dropdowns')
);

new Vue({
  el: '#vueapp',
                        template: `<kendo-grid :data-source="localDataSource">
                            <kendo-grid-column :field="'ContactName'"
                                               :template="contactNameTemplate"
                                               :title="'Contact Name'"
                                               :width="240"></kendo-grid-column>
                            <kendo-grid-column :field="'ContactTitle'"
                                               :title="'Contact Title'"
                                               :width="120"></kendo-grid-column>
                            <kendo-grid-column :field="'CompanyName'"
                                               :title="'Company Name'"
                                               :width="120"></kendo-grid-column>
                            <kendo-grid-column :field="'Country'" :width="120"></kendo-grid-column>
  </kendo-grid>`,
                        data: {
      contactNameTemplate: `<div class='customer-photo'
                                                 style='background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/#:CustomerID#.jpg");'></div>
                           <div class='customer-name'>#: ContactName #</div>`,
                            localDataSource: localData
                    }
                    })

new Vue({
    el: '#vueapp',
                                template: ` <kendo-scheduler :data-source="localDataSource"
                                                 :date="date"
                                                 :height="600"
                                                 :timezone="'Etc/UTC'">
                                  <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
                                  <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
                                  <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
                                  <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
    </kendo-scheduler>`,
                                data: {
        date: new Date('2018/6/6'),
                                    localDataSource: [
                    {
              id: 1,
                                        start: new Date("2018/6/6 08:00 AM"),
                                        end: new Date("2018/6/6 09:00 AM"),
                                        title: "Interview"
                    },
                    {
              id: 2,
                                            start: new Date("2018/6/6 08:00 AM"),
                                            end: new Date("2018/6/6 09:00 AM"),
                                            title: "Meeting"
                    }
                    ]
                    }
                    })

 new Vue({
    el: '#vueapp',
                                        template: `<kendo-chart
                                    :title-text="'Gross domestic product growth /GDP annual %/'"
                                    :legend-position="'bottom'"
                                    :legend-position="'horizontal'"
                                    :series-defaults-type="'area'"
                                    :series="series"
                                    :category-axis-categories="categories">
        </kendo-chart>`,
                                        data: {
        date: new Date('2018/6/6'),
                                            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: "Russian Federation",
                                                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                    }, {
            name: "Germany",
                                                        data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
                    },{
            name: "World",
                                                            data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                    }],
                                                            categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
                    }
                    })

new Vue({
    el: '#vueapp',
                                                        template: ` <kendo-editor :resizable-content="true"
                                                                     :resizable-toolbar="true"
                                                                     :value="htmlText"
                                                                     style="height:280px"
                                                                     rows="10"
                                                                     cols="30">
    </kendo-editor>`,
                    data () {
                    return {
            htmlText: "<p>Some sample text.</p>"
                    }
                    }
                    })

JavaScript，HTML5，Angular， React和 Vue UI小部件，用于响应式Web和数据可视化

更多演示下载免费试用版

Kendo UI如何如此优秀

Kendo UI提供了构建现代，美观，响应式应用程序所需的一切

加速应用上市时间

轻松将高级UI组件添加到现有设计中，或在新设计开始时利用我们全面的库。Kendo UI使您可以通过集成组件来处理UI中所需的所有关键功能，将更多时间放在专有功能上，如此缩短开发周期。

UI组件合集高颜值高能力

我们为您提供具有高级数据网格组件、图表、报表、甘特图、流程图等解决方案。Kendo UI通过集成我们的可配置组件，使您可以快速轻松地向应用程序添加高级功能，并且使整个应用程序的外观一致。

支持流行的框架

Kendo UI在面对当前流行的技术（包括jQuery，Angular，React和Vue）进行开发时，它提供了最佳的UI性能。Kendo UI集成便捷，配置无忧。

降低设计风险

Kendo UI是被全世界诸多企业广泛使用的库。官方团队的持久技术支持，加上全世界庞大的用户社区，这保证了Kendo UI始终保持业界领先的持久活力。

下载免费试用版

所有Kendo UI组件

Key Features

CHARTS

Barcodes

Conversational UI

Chat

Data Management

Diagrams & Maps

Diagram
Map

Editors

Framework

Gauges

Interactivity & UX

Layout

MEDIA

MediaPlayer

NAVIGATION

Scheduling

Key Features

CHARTS

Editor

Editor

BUTTONS

COMMON FEATURES

CONVERSATIONAL UI

Chat

TreeList

TreeList

DATE INPUTS

DIALOGS

Labels

Scheduler

Scheduler

DROPDOWNS

GAUGES

GRIDS

Grid

Upload

INPUTS

Notifications

Notification

Progress Bars

LAYOUT

Key Features

ANIMATIONS

Buttons

CHARTS

SPECIAL FEATURES

CONVERSATIONAL UI

Chat

DIALOGS

EDITOR

Editor

FORM

Form

DATEINPUTS

DROPDOWNS

Gauges

INPUTS

LAYOUT

Key Features

CHARTS

BARCODES

CONVERSATIONAL UI

Chat

DATA MANAGEMENT

INTERACTIVITY & UX

Styling

EDITORS

FRAMEWORK

DataSource

GAUGES

DIAGRAMS & MAPS

Diagram
Map

MEDIA

MediaPlayer

LAYOUT

NAVIGATION

SCHEDULING

NASA，HP和Millions信任的选择

十五年来的不懈追求，Kendo UI以无与伦比的质量帮助了数百万开发人员为关键任务应用程序创造了良好的用户体验。参与Kendo UI的开发人员将为您提供持续支持，以便您可以按时交付项目。我们将与您携手，每年三次更新迭代以及无时无刻的全面支持来解决您所面对的业务挑战。

140K +

用户

210万+

开发者

400+

奖项

.NET开发者

Telerik® DevCraft

为.NET环境提供的.NET控件、Kendo UI JavaScript组件、报告、自动化测试和开发工具

下载免费试用版了解更多 >

JavaScript开发者

Kendo UI ®

JavaScript，HTML5，Angular， React和 Vue UI小部件，用于响应式Web和数据可视化

下载免费试用版了解更多 >

升级到DevCraft

满足您的发展需求的灵活选择

Telerik .NET和Kendo UI JavaScript组件以及报表和生产力工具使您可以快速在任何Web，桌面或移动平台上构建现代且高性能的应用程序。他们还提供了灵活的支持选项，旨在满足您的各种需求。

通过利用我们直观的API，数千个具有源代码可用性的演示，全面的文档以及各种VS模板，可以优化您的开发时间和预算。

下载免费试用版

很棒的JavaScript组件，可用于快速，高质量的Web应用程序开发。Kendo UI非常易于使用，并且可以快速从中获取结果。

Goran Bajer美国政府软件开发人员

在这个行业工作了20多年之后，我已经看到了很多框架的出现和发展，但是Kendo UI到目前为止是混合/移动/本地应用程序的优秀选择。不仅因为其易用性，而且与其他人也玩得很好。

Geovanni HudsonPCYC高级WEB / UI应用工程师

作为国防部的一名开发人员，我们能够将Kendo UI快速集成到一个预先存在的C＃应用程序中，从而为他们甚至不知道自己想要的客户端提供功能。这主要是因为节省了大约1+百万的成本。我将Kendo UI推荐给任何想要以惊人的UI打动客户的人。感谢Telerik团队！

Gerald Hirsch美国政府前端开发人员

DESKTOP

MOBILE

REPORTING & QA

WEB

PRODUCT BUNDLES

DevCraft

DESKTOP

MOBILE

REPORTING & QA

WEB

PRODUCT BUNDLES

DevCraft

更快地构建更好的JavaScript应用

Kendo UI如何如此优秀

加速应用上市时间

UI组件合集 高颜值高能力

支持流行的框架

降低设计风险

所有Kendo UI组件

Key Features

CHARTS

Barcodes

Conversational UI

Data Management

Diagrams & Maps

Editors

Framework

Gauges

Interactivity & UX

Layout

MEDIA

NAVIGATION

Scheduling

Key Features

CHARTS

Editor

BUTTONS

COMMON FEATURES

CONVERSATIONAL UI

TreeList

DATE INPUTS

DIALOGS

Labels

Scheduler

DROPDOWNS

GAUGES

GRIDS

Upload

INPUTS

Notifications

Progress Bars

LAYOUT

Key Features

ANIMATIONS

Buttons

CHARTS

SPECIAL FEATURES

CONVERSATIONAL UI

DIALOGS

EDITOR

FORM

DATEINPUTS

Grid

SCHEDULER

TREELIST

DROPDOWNS

Gauges

INPUTS

LAYOUT

Key Features

CHARTS

BARCODES

CONVERSATIONAL UI

DATA MANAGEMENT

INTERACTIVITY & UX

EDITORS

FRAMEWORK

GAUGES

DIAGRAMS & MAPS

MEDIA

UI组件合集高颜值高能力