慧都2022年终活动火热开启，欢迎换购
Telerik ® 中文网
Telerik ® 中文网

更快地构建更好的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
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
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美国政府前端开发人员

获取产品
下载试用 产品报价
联系我们
重庆总部：023-68661681
购买
sales@evget.com
产品社群
QQ：726377843
友情链接
慧都控件网 | DevExpress控件中文网| MyEclipse中文官网 | FastReport官网| Stimulsoft中文网| 大数据解决方案 | TheBrain中文网
重庆慧都科技有限公司 © Copyright 2003-2022 渝ICP备12000582号-26
在线
客服 微信
QQ 电话
400-700-1020
 返回
顶部