This is a migrated thread and some comments may be shown as answers.

Filterable Menu and KendoGridBinding attribute

1 Answer 448 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
Nathan asked on 10 Dec 2019, 02:49 PM

I have a question concerning the [kendoGridBinding] attribute and the [filterable]="menu" attribute. 

Can you bind a Kendo Grid using the [kendoGridBinding] attribute to an service Api call that returns an observable? 

I have my grid currently working with the [data] attribute using an observable but every time that I switch it to the [kendoGridBinding] attribute to be able to use advanced features my console throws errors and the grid data never loads. 

Here is the current list of attributes for my grid definition that seem to not work. Note I am attempting to do paging, sorting and filtering server side using a WebApi call.

<kendo-grid [kendoGridBinding]="schedulesToDisplay"
                [filterable]="menu"
                [style.height]="'100%'"
                [resizable]="true"
                [sortable]="{
                  allowUnsort: false,
                  mode: 'single'
                }"
                [filter]="state.filter"
                [pageable]="true"
                [pageSize]="10"
                [skip]="state.skip"
                [sort]="state.sort"
                [rowClass]="rowCallback"
                (dataStateChange)="dataStateChange($event)">

 

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 12 Dec 2019, 09:42 AM

Hello Nathan,

The built-in kendoGridBinding directive works with local data only and relies on receiving an array containing all data items and processing them on the client internally:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-built-in-directive

To use the Grid alongside server-side data operations, the developer will need to either handle the dataStateChange event and perform the respective requests manually like in the following example (binding the Grid "data" input):

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/#toc-indicating-ongoing-data-operations

... or to create a custom auto-binding directive that will handle the communication with the data service as demonstrated in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-directives

On a side note, the Grid "filterable" @Input expects the string "menu". When the syntax observed in the provided code snippet is used, it will instead be bound to a component class field named "menu":

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-filterable

https://www.telerik.com/kendo-angular-ui/components/grid/api/FilterableSettings/

When Angular property binding is used [someProp]="someValue", the value of a class field named someValue is bound to the respective @Input. To provide a specific string, the developer needs to either wrap it an additional set of quotes (single quotes to not meddle with the wrapping double quotes) - [someProp]="'some string'", or omit the square brackets around the option name, e.g. - someProp="some string" - this way the value on the right-hand side of the assignment will always be considered a string.

Further details are available in the official Angular documentation:

https://angular.io/guide/template-syntax#binding-syntax-an-overview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Nathan
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or