![[干货盘点]UI控件Telerik入门级教程放送](https://image.evget.com/2021/08/04/1920-64yr9xx1ikpzpivvez.jpg)
带有jQuery，Angular，React和Vue库的JavaScript UI组件的最终集合。无论您选择哪种JavaScript框架，都可以快速构建引人注目的高性能响应Web应用程序。
下载免费试用版
$("#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提供了构建现代，美观，响应式应用程序所需的一切
轻松将高级UI组件添加到现有设计中，或在新设计开始时利用我们全面的库。Kendo UI使您可以通过集成组件来处理UI中所需的所有关键功能，将更多时间放在专有功能上，如此缩短开发周期。
我们为您提供具有高级数据网格组件、图表、报表、甘特图、流程图等解决方案。Kendo UI通过集成我们的可配置组件，使您可以快速轻松地向应用程序添加高级功能，并且使整个应用程序的外观一致。
Kendo UI在面对当前流行的技术（包括jQuery，Angular，React和Vue）进行开发时，它提供了最佳的UI性能。Kendo UI集成便捷，配置无忧。
Kendo UI是被全世界诸多企业广泛使用的库。官方团队的持久技术支持，加上全世界庞大的用户社区，这保证了Kendo UI始终保持业界领先的持久活力。
十五年来的不懈追求，Kendo UI以无与伦比的质量帮助了数百万开发人员为关键任务应用程序创造了良好的用户体验。参与Kendo UI的开发人员将为您提供持续支持，以便您可以按时交付项目。我们将与您携手，每年三次更新迭代以及无时无刻的全面支持来解决您所面对的业务挑战。
用户
开发者
奖项
满足您的发展需求的灵活选择
Telerik .NET和Kendo UI JavaScript组件以及报表和生产力工具使您可以快速在任何Web，桌面或移动平台上构建现代且高性能的应用程序。他们还提供了灵活的支持选项，旨在满足您的各种需求。
通过利用我们直观的API，数千个具有源代码可用性的演示，全面的文档以及各种VS模板，可以优化您的开发时间和预算。
下载免费试用版
返回