Skip to content

Commit 96a8f99

Browse files
m-aliozkayam-aliozkaya
committed
Add how-to-integrate-kendo-ui-angular-with-aspnet-zero blog post
1 parent e3d39ae commit 96a8f99

3 files changed

Lines changed: 298 additions & 0 deletions

File tree

‎blog-posts/en/Images/Blog/kendo-ui-angular-calendar.png‎

136 KB
Loading

‎blog-posts/en/Images/Blog/kendo-ui-angular-tutorial.png‎

227 KB
Loading

‎blog-posts/en/how-to-integrate-kendo-ui-angular-with-aspnet-zero.md‎

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
# How to Integrate Kendo UI Angular with ASP.NET Zero
2+
3+
Learn how to integrate Kendo UI Angular, a comprehensive UI library, with ASP.NET Zero, a popular full stack .NET Core template based [ABP](https://aspnetboilerplate.com/). This integration enables the creation of modern, powerful web applications with enhanced productivity and performance.
4+
5+
## Create a New ASP.NET Zero Project
6+
7+
First, create a new project using the [ASP.NET Zero](https://aspnetzero.com/Download).
8+
9+
* Select the `ASP.NET Core & Angular` template.
10+
* You can choose single solution option if you want to have the backend and frontend in a single solution.
11+
12+
![kendo-ui-angular-tutorial](images/Blog/kendo-ui-angular-tutorial.png)
13+
14+
Then, follow the instructions to create a new project and make sure it runs successfully.
15+
https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Getting-Started-Angular
16+
17+
## Install Kendo UI Angular
18+
19+
Let's start by installing a [Calendar](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/) component. Run the following command to install the Kendo UI Angular DateInputs package.
20+
21+
```bash
22+
ng add @progress/kendo-angular-dateinputs
23+
ng add @progress/kendo-drawing
24+
ng add @progress/kendo-angular-dialog
25+
```
26+
27+
After the installation, run the following command to creating bundles for the application.
28+
29+
```bash
30+
yarn run create-dynamic-bundles
31+
```
32+
33+
Add the following code to the `app-shared.module.ts` file to import the Kendo UI Angular DateInputs module.
34+
35+
```typescript
36+
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
37+
38+
@NgModule({
39+
imports: [
40+
.
41+
.
42+
.
43+
.
44+
DateInputsModule,
45+
],
46+
})
47+
```
48+
49+
> Don't forget to activate the Kendo UI Angular license. You can find the instructions [here](https://www.telerik.com/kendo-angular-ui/components/my-license/).
50+
51+
52+
## Use Kendo UI Angular Components
53+
54+
First, open the `AppPermissions.cs` file and add the following permission.
55+
56+
```csharp
57+
public const string Pages_Administration_KendoUi = "Pages.Administration.KendoUi";
58+
```
59+
60+
Then, open the `AppAuthorizationProvider.cs` file and add the following permission to the `PermissionChecker` class.
61+
62+
```csharp
63+
var administration = pages.CreateChildPermission(AppPermissions.Pages_Administration, L("Administration"));
64+
65+
administration.CreateChildPermission(AppPermissions.Pages_Administration_KendoUi, L("KendoUi"));
66+
```
67+
68+
Create `kendo-ui` folder in the `src/app/admin` folder and add the following files.
69+
70+
*kendo-ui.component.ts*
71+
```typescript
72+
import { Component, Injector, OnInit } from '@angular/core';
73+
import { appModuleAnimation } from '@shared/animations/routerTransition';
74+
import { AppComponentBase } from '@shared/common/app-component-base';
75+
76+
@Component({
77+
templateUrl: './kendo-ui.component.html',
78+
animations: [appModuleAnimation()],
79+
})
80+
export class KendoUiComponent extends AppComponentBase implements OnInit {
81+
82+
constructor(injector: Injector) {
83+
super(injector);
84+
}
85+
86+
ngOnInit(): void {
87+
}
88+
}
89+
```
90+
91+
*kendo-ui.component.html*
92+
```html
93+
<div [@routerTransition]>
94+
<sub-header [title]="'KendoUi' | localize" [description]="'KendoUiHeaderInfo' | localize">
95+
<div role="actions"> </div>
96+
</sub-header>
97+
<div [class]="containerClass">
98+
<kendo-calendar></kendo-calendar>
99+
</div>
100+
</div>
101+
```
102+
103+
*kendo-ui-routing.module.ts*
104+
```typescript
105+
import { NgModule } from '@angular/core';
106+
import { RouterModule, Routes } from '@angular/router';
107+
import { KendoUiComponent } from './kendo-ui.component';
108+
109+
const routes: Routes = [
110+
{
111+
path: '',
112+
component: KendoUiComponent,
113+
pathMatch: 'full',
114+
},
115+
];
116+
117+
@NgModule({
118+
imports: [RouterModule.forChild(routes)],
119+
exports: [RouterModule],
120+
})
121+
export class KendoUiRoutingModule {}
122+
```
123+
124+
*kendo-ui.module.ts*
125+
```typescript
126+
import { NgModule } from '@angular/core';
127+
import { KendoUiRoutingModule } from './kendo-ui-routing.module';
128+
import { AdminSharedModule } from '@app/admin/shared/admin-shared.module';
129+
import { AppSharedModule } from '@app/shared/app-shared.module';
130+
import { KendoUiComponent } from './kendo-ui.component';
131+
132+
@NgModule({
133+
declarations: [KendoUiComponent],
134+
imports: [AppSharedModule, AdminSharedModule, KendoUiRoutingModule],
135+
})
136+
export class KendoUiModule {}
137+
```
138+
139+
Then, open the `admin-routing.module.ts` file and add the following route.
140+
141+
```typescript
142+
{
143+
path: 'kendo-ui',
144+
loadChildren: () => import('./kendo-ui/kendo-ui.module').then((m) => m.KendoUiModule),
145+
data: { permission: 'Pages.Administration.KendoUi' },
146+
},
147+
```
148+
149+
Finally, open the `app-navigation.service.ts` file and add the following menu item.
150+
151+
```typescript
152+
new AppMenuItem(
153+
'Kendo UI',
154+
'Pages.Administration.KendoUi',
155+
'flaticon-calendar',
156+
'/app/admin/kendo-ui'
157+
),
158+
```
159+
160+
Now, run the application and navigate to the `kendo-ui` page. If you successfully implemented KendoUi, you should see the Kendo UI Angular Calendar component.
161+
![kendo-ui-angular-calendar](images/Blog/kendo-ui-angular-calendar.png)
162+
163+
## Simple CRUD Operations with Kendo UI Angular Grid
164+
165+
### Install Kendo UI Angular Grid
166+
167+
Run the following command to install the Kendo UI Angular Grid package.
168+
169+
```bash
170+
ng add @progress/kendo-angular-grid
171+
```
172+
173+
After the installation, run the following command to creating bundles for the application.
174+
175+
```bash
176+
yarn run create-dynamic-bundles
177+
```
178+
179+
Add the following code to the `app-shared.module.ts` file to import the Kendo UI Angular Grid module.
180+
181+
```typescript
182+
import { GridModule } from '@progress/kendo-angular-grid';
183+
184+
@NgModule({
185+
imports: [
186+
.
187+
.
188+
.
189+
.
190+
GridModule,
191+
],
192+
})
193+
```
194+
195+
### Create components for CRUD operations
196+
197+
Let's create a simple CRUD operation using the Kendo UI Angular Grid component. First, create a new folder named `kendo-ui-grid` in the `src/app/admin` folder and add the following files.
198+
199+
Add the `Pages.Administration.KendoUiGrid` permission to the `Host` project, like the first example.
200+
201+
*kendo-ui-grid.component.ts*
202+
```typescript
203+
import { Component, Injector, OnInit } from '@angular/core';
204+
import { appModuleAnimation } from '@shared/animations/routerTransition';
205+
import { AppComponentBase } from '@shared/common/app-component-base';
206+
207+
@Component({
208+
templateUrl: './kendo-ui-grid.component.html',
209+
animations: [appModuleAnimation()],
210+
})
211+
export class KendoUiGridComponent extends AppComponentBase implements OnInit {
212+
213+
constructor(injector: Injector) {
214+
super(injector);
215+
}
216+
217+
ngOnInit(): void {
218+
}
219+
}
220+
```
221+
222+
*kendo-ui-grid.component.html*
223+
```html
224+
<div [@routerTransition]>
225+
<sub-header [title]="'KendoUiCrudExample' | localize" [description]="'KendoUiCrudExampleHeaderInfo' | localize">
226+
<div role="actions"> </div>
227+
</sub-header>
228+
<div [class]="containerClass">
229+
<kendo-grid></kendo-grid>
230+
</div>
231+
</div>
232+
```
233+
234+
*kendo-ui-grid-routing.module.ts*
235+
```typescript
236+
import { NgModule } from '@angular/core';
237+
import { RouterModule, Routes } from '@angular/router';
238+
import { KendoUiGridComponent } from './kendo-ui-grid.component';
239+
240+
const routes: Routes = [
241+
{
242+
path: '',
243+
component: KendoUiGridComponent,
244+
pathMatch: 'full',
245+
},
246+
];
247+
248+
@NgModule({
249+
imports: [RouterModule.forChild(routes)],
250+
exports: [RouterModule],
251+
})
252+
export class KendoUiGridRoutingModule {}
253+
```
254+
255+
*kendo-ui.module.ts*
256+
```typescript
257+
import { NgModule } from '@angular/core';
258+
import { KendoUiGridRoutingModule } from './kendo-ui-grid-routing.module';
259+
import { AdminSharedModule } from '@app/admin/shared/admin-shared.module';
260+
import { AppSharedModule } from '@app/shared/app-shared.module';
261+
import { KendoUiGridComponent } from './kendo-ui-grid.component';
262+
263+
@NgModule({
264+
declarations: [KendoUiGridComponent],
265+
imports: [AppSharedModule, AdminSharedModule, KendoUiGridRoutingModule],
266+
})
267+
export class KendoUiGridModule {}
268+
```
269+
270+
Then, open the `admin-routing.module.ts` file and add the following route.
271+
272+
```typescript
273+
{
274+
path: 'kendo-ui',
275+
loadChildren: () => import('./kendo-ui/kendo-ui.module').then((m) => m.KendoUiGridModule),
276+
data: { permission: 'Pages.Administration.KendoUiGrid' },
277+
},
278+
```
279+
Finally, open the `app-navigation.service.ts` file and add the following menu item.
280+
281+
```typescript
282+
new AppMenuItem(
283+
'Kendo UI CRUD Example',
284+
'Pages.Administration.KendoUiGrid',
285+
'flaticon-calendar',
286+
'/app/admin/kendo-ui-grid'
287+
),
288+
```
289+
290+
Now, run the application and navigate to the `kendo-ui-grid` page. If you successfully implemented KendoUi, you should see the Kendo UI Angular Grid component.
291+
292+
### Host Part of the Application
293+
294+
// TODO: Add the Host Part of the CRUD Application
295+
296+
### Angular Part of the Application
297+
298+
// TODO: Add the Angular Part of the CRUD Application

0 commit comments

Comments
 (0)