Questions on Kendo UI for Vue Forum

2 answers

223 views

Plea for help: Our front end guy left, and I've inherited his work :( I like the JS stuff, but I'm no expert.

Our new app has about a 4 megabyte app.js download, even when minified. We've turned on gzip compression on the server, and that gets it down to a bit over a meg, but we had a $1000 bandwidth overage last month!

I've been tasked with seeing if we are including unused code.

So, my question: In the docs I see this:

// As an alternative, you could import only the scripts that are used by the utility:

// import '@progress/kendo-ui/js/kendo.data' // Imports only the DataSource script and its dependencies

import '@progress/kendo-theme-default/dist/all.css'

import { DataSource,

HierarchicalDataSource,

GanttDataSource,

GanttDependencyDataSource,

PivotDataSource,

SchedulerDataSource,

TreeListDataSource,

DataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper'

Vue.use(DataSourceInstaller)

new Vue({

el: '#app',

components: {

DataSource,

HierarchicalDataSource,

GanttDataSource,

GanttDependencyDataSource,

PivotDataSource,

SchedulerDataSource,

TreeListDataSource,

DatasourceInstaller

}

})

I've got about six of these: layout, dateinputs, inputs, dropdowns, dialog, etc.

If I can identify which of the features I need from each I need from each "wrapper", can I cut this down? For instance, I'm sure we don't use gantt charts or pivots above.

Thanks,

Ed Greenberg

General Discussions

answered on 13 Mar 2020

3 answers

502 views

Vue Grid Wrapper Drag Drop a row

Hi,

Is dragging a row from view grid wrapper component available? There's nothing in here

General Discussions

answered on 12 Mar 2020

1 answer

86 views

Native Vue NumericTextBox Floating Label not correct

Go to example page for floating label https://www.telerik.com/kendo-vue-ui/components/inputs/floating-labels/

Type 0 into the numerictextbox field.

Notice the floating label comes down and overlaps with the currency value.

Floating label should not be coming down on a non empty value.

General Discussions

answered on 10 Mar 2020

3 answers

511 views

Kendo Spreadsheet live updates

I'm in the evaluation stage of working with the Spreadsheet. I need the ability to load a file and then read each row and send the data to an web api. The data that is returned will need to update the row. Sometimes there may be a 1000 or more rows. When I get back the api data can I update the individual cells or do I need to build a array and when I'm done load it? I would like for the end user to see the updates as they happen and have it scroll down as the rows are being updated .

answered on 09 Mar 2020

4 answers

367 views

How to add custom field to data source?

I add "duration" field to data source but it throw error "this.duration is not a function...".

So, How can I do this?

Thanks,

Chung

answered on 09 Mar 2020

2 answers

845 views

Zoomable Chart: How to set zoom level?

I am working with vue 2.5.17 and typescript 3.1.1. A client has requested a chart to display data (lots of data points). I implemented use of the kendo vue line chart with panning and zooming enabled. The good news is that the client loves it. The bad news is that they want the chart to start off zoomed out all the way when it is shown. I checked the zoomable properties under the kendo-chart API for vue, but I didn't see an option for setting the zoom level. Is there a way to set the chart's zoom level to be all the way zoomed out on launch?

answered on 06 Mar 2020

2 answers

69 views

eventsPerDay is not working in Vue(2020 R1 release)

Hi,

according to This Demo eventsPerDay Prop should work in kendo 2020 R1 release. But it is not working for the vue version of the kendo-scheduler-view. Is there any workaround to do in order to make this work?

One other thing is i even tried the css way with this but that also not working.

Thanks and Regards!!!

answered on 06 Mar 2020

2 answers

108 views

Expand animations not playing when importing only kendo.panelbar

I'm trying to import only the components needed, but when I import only the panelbar and the wrapper, the animation does not playing when expanding/unexpanding the panelbar.

The animation does play when importing all of kendo-ui, so what other component do I need to bring in to make the animations function?

StackBlitz of animation not playing here: https://stackblitz.com/edit/vue-3kamya?embed=1&file=index.js

answered on 05 Mar 2020

3 answers

98 views

Release notes / access to github repo

Hi Kendo,

Is there a place to read the latest changes or notes from the last release. The content on the site is a half year behind.
By example access to the github repo to see the latest commits or a wandered topic post with some info.

Kind regards,
Sander

General Discussions

answered on 05 Mar 2020

7 answers

224 views

Grid not updating with page 2, 3, 4, etc.

I am using the Grid, but manipulating the URL with search parameters. The first page works great, showing the total rows, number of pages, etc. When navigating to other pages, I can see that the grid is successfully generating and hitting the URL. Within the change() event, I can see the correct rows returned. However, the grid is not updating with the new content. Is there something else I need to do?

Here is the grid definition

<kendo-grid ref="gridComponent"

:data-source="quotes"

:auto-bind="true"

:selectable='true'

:sortable='true'

:resizable='true'

:pageable-page-size="pageSize"

:pageable-page-sizes='true'

:pageable-button-count='5'

:reorderable='true'

:no-records="noRecords"

v-on:databinding="onDataBinding"

v-on:databound="onDataBound"

v-on:change="rowSelected"

:sort="sortFilter">

computed: {

quotes: function () {

let vue = this

// eslint-disable-next-line

return new kendo.data.DataSource({

transport: {

read: {

url: this.queryString,

beforeSend: function (xhr) {

// xhr.setRequestHeader('Access-Control-Allow-Origin', '*')

xhr.setRequestHeader('Authorization', Constants.AUTH_KEY)

},

type: 'GET',

dataType: 'json'

}

},

schema: {

total: function (response) {

let records = 0

if (response && response.length > 0) {

records = response[0].Count

}

return records

}

},

pageable: 'true',

pageSize: 10,

serverPaging: 'true',

// testing the change event handler

change: function (e) {

// let data = this.data()

},

requestStart: function () { vue.loading = true },

requestEnd: function () { vue.loading = false }

})

},

queryString () {

var me = this.$store.getters.user

var agentNumber = me.userName

var searchURLstring = `${Constants.SEARCH_URL}?AgentNumber=${agentNumber}`

if (this.currentPolicyNo) {

searchURLstring += `&QuoteNumber=${this.currentPolicyNo}`

}

if (this.currentInsuredName) {

searchURLstring += `&InsuredName=${this.currentInsuredName}`

}

if (this.currentAddr1) {

searchURLstring += `&Address=${this.currentAddr1}`

}

if (this.currentSortField) {

searchURLstring += `&sortField=${this.currentSortField}`

searchURLstring += `&sortDirection=${this.currentSortField}`

}

searchURLstring += `&SearchScope=${this.searchScope}`

return searchURLstring

}

answered on 04 Mar 2020