Aurelia + Kendo UI + Bridge with Typescript

Help Requests
1

Hi, I am new to Aurelia, this is my first project. My company is using Kendo UI on other projects which are using mvc and jquery and they do not seems to have any problem. Now they want me to use kendo ui with bridge for this Aurelia project so that we are consistent with other application. All Kendo UI samples are in Javascript but I am using typescript since I have done some angular + typescript project before and I prefer that.

I am not finding much help on what is the right approach, I can not find any samples in Typescript, should I use javascript for kendo or is there any easy way to convert JavaScript to typescript. Just want to check if anyone else had similar situation and what approach you followed?

1 Like
2

The generic answer is yes. The Aurelia-KendoUI team has created several examples , typescript support included. This information is presented in Aurelia KendoUI Bridge online documentation. This document has not been upgraded for almost a year so the samples may not run as documented.

The section may have the answers to your question. Yo should also become a member of the Gitter chatroom at https://gitter.im/adriatic/Aurelia-KendoUI

1 Like
3

Thanks, appreciate your feedback, any other suggestions?

1 Like
4

Also, if you recommend using kendo ui with aurelia(with typescript), so far I am not finding it easy unless it’s the learning curve and not enough resources?

1 Like
5

I use Aurelia with KendoUI + Typescript, there is nothing complicated about it. What specifically would you like help with?

Robert

1 Like
6

Thanks, good to hear. I am trying to have Kendo UI grid with

  1. Server side paging -
  2. Filtering in Grid
  3. In my API call we also need to add token(Azure Authentication).

this is my current code when not using Kendo Grid:

return this.client
.createRequest(this.customerEndPoint)
.asGet()
.withParams({ pageNumber: pageNumber, pageSize: pageSize })
.send()
.then(result => {
if (result) {
let data = JSON.parse(result.response);
if (data && data.items && data.items.length > 0) {
this.customers = <CustomerModel[]>data.items;
};
};
});
}

client
.configure(config => {
config
.withHeader(‘Accept’, ‘application/json’)
.withHeader(‘Content-Type’, ‘application/json’)
.withBaseUrl(appConfig.ApiBaseUrl)
.withInterceptor(new HttpInterceptorService(authService))
});
aurelia.container.registerInstance(‘ApiClient’, client);

Do you have similar typescript code for Grid with above? Also Currently we handle paging in the grid, but if I use ServerPaging, do I need to change API code. Currently we return data in this format.

{
“paging”: {
“pageSize”: 50,
“pageNumber”: 1,
“pages”: 12,
“pageItems”: 50,
“totalItems”: 553
},
“items”: [
{
“createdDate”: “2017-09-20T14:42:48”,
“createdBy”: “CreatedByValue”,
“id”: 2,
“name”: “NameValue4”
},
{
“createdDate”: “2017-09-20T14:42:48”,
“createdBy”: “CreatedByValue”,
“id”: 3,
“name”: “NameValue”
}
}

1 Like
7

You can use the triple ```javascript with closing ``` markdown for code to preserve spacing.

//```javascript
// Code Here
//```

return this.client
   .createRequest(this.customerEndPoint)
   .asGet()
   .withParams({ pageNumber: pageNumber, pageSize: pageSize })
   .send()
   .then(result => {
      if (result) {
         let data = JSON.parse(result.response);
         if (data && data.items && data.items.length > 0) {
            this.customers = <CustomerModel[]>data.items;
         };
      };
   });
}
1 Like