Grid option properties

[Wayne Hiller]

Shouldn't I be able to pass option attributes to a Grid (Any widget) without binding? 

<kendo-grid>

    server-filtering,

    server-paging,

    etc

</kendo-grid>

 

Also the Column filterable attribute is generating a warning when I pass it an object (Says Boolean only). Can you please add Object to the filterable prop.

 

[Dimitar]

Hello Wayne,

Every Kendo UI widget has a built-in set of options that can be directly set. For example, the Grid exposes navigatable, selectable and many other options:

<kendo-grid :data-source="localDataSource"
  :navigatable="true"
  :selectable="true">
</kendo-grid>

Concerning the serverPaging and serverFiltering, those options are part of the DataSource component and can be set accordingly:

<kendo-datasource :filter="filterConfiguration"
         :schema-data="'result'"
         :server-filtering="true"
         :transport-read-url="{remote service}">
</kendo-datasource>

For a complete list of options for a particular component, you could refer to the API Reference link (available in the "Suggested Links" section in the Kendo UI for Vue Documentation). Each option that is described and demonstrated in the API Reference could be utilized as prop in its Vue counterpart. Refer to the Configuration article in the Vue Documentation for reference on how to correctly transform the API options to props.

Also, you are indeed correct that the filterable prop causes a warning in the browser console. I have logged this as a bug in the official Kendo UI GitHub repository (issue #4273). Although there is a warning message, you still should be able to set the filterable prop and it will work correctly:

<kendo-grid-column :filterable="{ cell: {enabled: false}}" field="ContactTitle" title="Contact Title"></kendo-grid-column>

However, please take into consideration that using inline props is generally not recommended, as these trigger redundant rebinding of the widgets with each reactive prop change. The preferred approach would be to use props to set the filterable configuration or alternatively configure the filter in the app data() method. For additional information on the matter, please refer to the following GitHub issue.

I have also updated your Telerik Points for helping us to discover this issue.

Regards,
Dimitar
Progress Telerik

[Wayne Hiller]

Thanks for the info. Sorry I was just talking about any boolean property in general. To me it feels wrong to have to bind a property like :server-paging="true" to a constant (true in this case). If you add Boolean as an allowed type on the prop declaration then I could just do server-paging no need to bind or specify a property value.

 

Is there a reason all your Demos use binding for every property (attribute) instead of using just a normal attribute?

 

 

 

[Dimitar]

Hello Wayne,

In general, the Kendo UI Wrappers for Vue read the entire props data and then serialize it to JSON, which is then set as the widget options. This process is automatic and is also the reason, why blooean props are required to be used.

Concerning the empty props(e.g. server-paging), these are evaluated by Vue as an empty string. Thus, when the empty string is serialized by Kendo, the result is equal to false. Therefore, including a prop with no value with the current implementation of the Vue wrappers is not possible. 

Of course, this functionality can be achieved with native components for Vue. There is a similar request in the Kendo UI Feedback Portal, which you could vote for.

Regards,
Dimitar
Progress Telerik

[Wayne Hiller]

Thanks Dimitar it makes more sense now. I guess the thing to keep in mind is that these are just wrappers around the jQuery components.