Escolar Documentos
Profissional Documentos
Cultura Documentos
3. Globalization:
Kendo supports globalized scripts you can set locale
using script line such as kendo.locaization and all the
kendo controls will render its value according to locale
4. MVVM:
Kendo gives you the feature of two-way binding like
angular do. The View is automatically updated once the
model value is changed. To achieve two-way binding
there is an attribute called “rebind” we just need to
decorate the input control with “rebind” attribute.
5. Datasource:
Its a javascript data source and you can use the data
source for creating update delete operations in your
server endpoints. So you can create a data source on
your page and tell URL for reading is so and so, URL for
the insert is so and so, URL for Update is so and so and
URL for delete is so and so. All these operations will be
done by the Kendo data source out of the box.
6. Drag & Drop:
Kendo provides pre built drag and drops UI features.
that can be easily used by just including certain libraries
of Kendo.
LET’S GET STARTED…
Kendo UI supports CSS3, HTML5, Javascript, Jquery as
well as AngularJS both 1 and Angular JS 2. But in this
article, I am going to show how we can implement
kendo grid for Angular 2-
<kendo-grid-column field=“EmployeeID“
title=“Employee ID” width=“120”>
</kendo-grid-column>
<kendo-grid-column field=“EmployeeName“
title=“Employee Name”>
</kendo-grid-column>
<kendo-grid-column field=“Salary“
title=“Salary“ width=“230”>
</kendo-grid-column>
<kendo-grid-column field=“Designation“
title=“Designation“ width=“230”>
</kendo-grid-column>
</kendo-grid> `
})
export class AppComponent {
private students: any[] = [{
“EmployeeID“: 101,
“EmployeeName”: “Sunil Kumar“,
“Salary“: 25000,
“Designation“:‘Software Engineer’
}, {
“EmployeeID“: 102,
“EmployeeName”: “Rohit Rana“,
“Salary“: 19000,
“Designation“: Dot Net Developer
}, {
“EmployeeID“: 103,
“EmployeeName”: “Rinku Pathak“,
“Salary“: 29000,
“Designation“: Software Engineer
}, {
“EmployeeID“: 104,
“EmployeeName”: “Sunny Goel“,
“Salary“: 15000,
“Designation“: Software Engineer
}, {
“EmployeeID“: 105,
“EmployeeName”: “Rinku Pathak“,
“Salary“: 29000,
“Designation“: Software Engineer
}, {
“EmployeeID“: 106,
“EmployeeName”: “Ravi Gupta“,
“Salary“: 33000,
“Designation“: Software Engineer
}];
}
Step 11: Change following code in Index.html file
Index.html
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>KendoAngular</title>
<base href=“/”>
<meta name=“viewport”
content=“width=device-width, initial-scale=1”>
<link rel=“icon” type=“image/x-icon”
href=“favicon.ico”>
</head>
<body>
<first–app>Loading…</first–app>
</body>
</html>
Step 12: Use below-given command to install the
theme.
npm install -S @telerik/kendo-theme-default
NOTE: TO INSTALL THE THEME RUN ABOVE GIVEN
COMMAND IN THE ROOT OF THE PROJECT.
Step 13: Use below-given command to add the theme
package into your project
@import “~@telerik/kendo-theme-
default/styles/packages/all”;
Step 14: Installation is now completed. Let’s now run
the application using the following command
“ng serve”
NOTE: PLEASE FOLLOW STEP 15 IF YOU GET THE
FOLLOWING ERROR GIVEN BELOW.
Inline image Kendo UI