Questions on Kendo UI for Vue Forum

2 answers

97 views

How can collaspe control Splitter to custom button?

I want to collapsible splitter for custom button.

not splitbar.

How can collaspe control Splitter to custom button?

answered on 04 Jan 2019

1 answer

113 views

Layout samples

Hello!

Any chance you could post sample code of layouts like the Veautify team did?

https://vuetifyjs.com/en/layout/pre-defined

The dashboard sample (https://github.com/telerik/vue-dashboard) hasn't been updated in a while and it doesn't work in IE11

Thanks!

answered on 31 Dec 2018

1 answer

449 views

Kendo Grid With TypeScript

Hello!

I have a problem:

I was going to use kendo-grid with typescript. I use npm packages @progress/kendo-grid-vue-wrapper and typescript version ^2.9.2. When I used sample with localdatasource, I got the error:

vue.runtime.esm.js?2b0e:1819 TypeError: Cannot read property 'length' of undefined

at VueComponent.mounted (index.js?363d:39)

at callHook (vue.runtime.esm.js?2b0e:3025)

in this code @progress/kendo-base-components-vue-wrapper/dist/es/kendo-base-component/index.js?363d

mounted: function mounted() {

if (this.$el.classList.length > 0) { <-- $this.el is #comment node and does not have classList property

this.nativeClasses = [].concat(_toConsumableArray(this.$el.classList));

} else {

this.nativeClasses = [];

}

answered on 26 Dec 2018

1 answer

729 views

Datasource with dynamic URL/data

I have a web application on which I have a grid which is fed by a datasource object.

The datasource essentially queries a url, but the data to be sent (transport.read.data) is actually dynamic and I would like it to be bound to some parameter of my view.

I tried to do it this way:

<kendo-datasource ref = "myDataSource"
transport-read-data-type="json"
:transport-read-url = "dataURL"
:transport-read-cache = false
:transport-read-data = "dataArgs"
schema-data="aums">
</kendo-datasource>

with dataURL and dataArgs being computed properties in my view instance.

However, when they are updated in the vue instance, the changes do not propagate to the Datasource.

Is this a known issue?

Thanks.

answered on 24 Dec 2018

1 answer

267 views

Kendo Grid - autoFitColumn with Vue

Is it possible to auto fit column width with Vue? I see it in the jQuery implementation, though I am not quite sure how to do it using Vue.

answered on 21 Dec 2018

1 answer

566 views

How can we add Kendo UI Grid Group Header Template in Vue ?

I am facing issue with display number of rows in a particular group header in kendo grid group header template in single file component in Vue.

This is my code.

<kendo-datasource ref="localDataSource" :data="filteredUsers"

:group='{ field : "Role", aggregates: [ { field: "Role", aggregate: "count" }] }'>

</kendo-datasource>

<kendo-grid :height="500" :data-source-ref="'localDataSource'" :resizable="true"

:filterable="false":sortable-allow-unsort="true":sortable-show-indexes="true"

:scrollable-virtual="true" :pageable-numeric="false"

:pageable-previous-next="false" :pageable-messages-display="'Showing {2} users'"

:editable="'popup'":toolbar="[{name: 'excel', text: 'Excel'}]"

:excel-file-name="'Motadata_UserListing.xlsx'" :excel-filterable="true" >

<kendo-grid-column :selectable="true" :width="35"></kendo-grid-column>

<kendo-grid-column :field="'UserId'" :hidden="true"></kendo-grid-column>

<kendo-grid-column :field="'UserName'" :width="150"></kendo-grid-column>

<kendo-grid-column :field="'UserType'":width="180"></kendo-grid-column>

<kendo-grid-column :field="'Role'" :width="170"

:group-header-template='headerTemplate'></kendo-grid-column>

<kendo-grid-column :field="'AssignedGroups'" ></kendo-grid-column>

<kendo-grid-column :field="'Email'":width="210" ></kendo-grid-column>

<kendo-grid-column :field="'Description'":width="200" ></kendo-grid-column>

<kendo-grid-column :field="'Status'" :width="170" :template="this.toggleTemplate()"></kendo-grid-column>

</kendo-grid>

Vue js code

data () {

return {

users:[ {

"UserId":1,

"UserName":"Rahul",

"UserType":"System Users",

"Role":"Super Admin",

"AssignedGroups":"Sales",

"Status":true,

"Email":"rahul@motadata.com",

"Description":"Rahul is a java developer"

},

{

"UserId":2,

"UserName":"Meet",

"UserType":"System Users",

"Role":"Super Admin",

"AssignedGroups":"Finance",

"Status":false,

"Email":"meet@motadata.com",

"Description":"meet is a CA"

},

{

"UserId":3,

"UserName":"Ravi1",

"UserType":"System Users",

"Role":"Admin",

"AssignedGroups":"Sales",

"Status":true,

"Email":"ravi@motadata.com",

"Description":"Ravi is a java developer"

},

{

}]

}

},

Methods:{

headerTemplate () {

return kendo.template("Role #=value# (#= count #)");

}

answered on 20 Dec 2018

3 answers

225 views

kendopanelbar causing You are using the runtime-only build of Vue ...

I had this working and have tried to identify what change caused this but since yesterday, when I try to render a vue with kedopanelbar I get the following in Firefox debugger:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. found in ---> <KendoPanelbar> <LeftNav> at src\views\LeftNav.vue <App> at src\App.vue <Root>

The kendopanelbar is still being accessed but the error seems to be more to do with webpack etc.

Can anyone suggest where I can look please?

Brian