Questions on Kendo UI for Vue Forum

1 answer

180 views

Scheduler: Combine server filtering with dynamic loaded resources

Hello,

i am currently evaluating kendo ui and i am in a struggle while implementing the following:

Since i have many resources and events i want to use server filtering.

The example from the link below works great for event filtering.
https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/filtering/server-filtering

My problem is i would need the resources also to load dynamically from a datasource(with start/end set parameters)
But since the resources seems to be loaded before the scheduler view seems to be ready i do not have the start/end variables.

Changing the resources after the scheduler is loaded and perform a scheduler.refresh does not work.
It is showing the changed resources only after an action on the scheduler (change view, click on today)

Do you have any hints for this?

Thank you and best regards, Alex

answered on 30 Nov 2018

1 answer

2.6K+ views

How can i add auto row number to grid?

Hi, i want to add auto row number in grid, i have tested itemtemplate but it doesnot work, also in group mode i want to work row numbers!

<template>

<div class="wrapper wrapper-content animated fadeInRight">

<div class="k-rtl">

<kendo-datasource

ref="datasource1"

:transport-read-url="'/trips'"

:transport-read-data-type="'json'"

:transport-parameter-map="parameterMap"

:schema-model-id="'ID'"

:schema-model-fields="schemaModelFields"

:batch="false"

:page-size="25"

></kendo-datasource>

<kendo-grid

ref="grid"

:page="page"

@databinding="onDataBinding"

:height="600"

:data-source-ref="'datasource1'"

:editable="'inline'"

:groupable="groupable"

>

<kendo-grid-column title="#" :template="itemTemplate"></kendo-grid-column>

<kendo-grid-column field="TruckID" title="T"></kendo-grid-column>

<kendo-grid-column field="ShovelID" title="S"></kendo-grid-column>

<kendo-grid-column field="ShovelMeta" title="M"></kendo-grid-column>

<kendo-grid-column field="UnloadingID" title="TT"></kendo-grid-column>

<kendo-grid-column field="ServiceStatus" title="V"></kendo-grid-column>

<kendo-grid-column field="DT_ExitShovel" title="E"></kendo-grid-column>

<kendo-grid-column field="DT_ExitUnloading" title="ET"></kendo-grid-column>

</kendo-grid>

<script id="itemTemplate" type="text/x-kendo-template">

<div>{{ ++record}}</div>

</script>

</div>

</template>

<script>

const swal = require("sweetalert2");

export default {

data() {

return {

record: 0,

gpage: 1,

groupable: { messages: { empty: "تگ ها را انتخاب کنید" } },

}

},

mounted() {},

methods: {

itemTemplate: function(e) {

var template = kendo.template(kendo.jQuery("#itemTemplate").html());

return template(e);

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return { models: kendo.stringify(options.models) };

}

},

onDataBinding: function(ev) {

this.record = (this.gpage - 1) * this.$refs.datasource1.pageSize;

console.log(this.record);

},

onDataBound: function(ev) {

//console.log("Grid is now bound!");

},

page: function(e) {

this.gpage = e.page;

}

};

</script>

<style src="sweetalert2/dist/sweetalert2.min.css"></style>

answered on 29 Nov 2018

1 answer

217 views

StockChart can't access kendoWidget

I'm trying to access KendoWidget wrapper to print the chart in pdf. The code seems right but returning undefined when i try to call this.$refs.graph.kendoWidget()

the chart is rendered, i'm trying to trigger an event to catch the reference to the widget.

in the console i am printing the reference to the element, the function and the result of the function

after that i expand the vue ref element and i see the function have the right target function but shows this message

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (<anonymous>:2:14)

i'm not sure if this is a scope problem or an error in the import.

Please help me with this

answered on 15 Nov 2018

5 answers

445 views

selecting rows in kendo-grid for vue, is slow

Hello
We are developing a module whereby what is selected on one grid filters a second grid. As part of this we need to enable multi-select on the master grid.

I have two separate scripts for getting the data item of the selected grids, but both seem a little slow, ~1 sec to ~3 secs.

The scripts we are testing are:

onChange: function(ev) {

var that = this;

var selected = $.map(ev.sender.select(), function(item) {

var tr = $(item).closest('tr');

var grid = that.$refs.itemsGrid.kendoWidget();

var data = grid.dataItem(tr);

return data.itemNumber;

});

this.$root.$emit('item-grid-selected',selected);

},

change: function(e) {

var selectedRows = e.sender.select();

var selectedDataItems = [];

for (var i = 0; i < selectedRows.length; i++) {

var dataItem = e.sender.dataItem(selectedRows[i]);

selectedDataItems.push(dataItem.name);

}

console.log(selectedDataItems);// contains all selected data items

this.$root.$emit('item-grid-selected',selectedDataItems);

},

with the grid code of:

<kendo-grid ref="itemsGrid"

:data-source="items"

v-on:databound="autoFitColumns"

:sortable-mode="'single'"

:sortable-allow-unsort="true"

:groupable="true"

:pageable="false"

:page-size="20"

:pageable-page-size="10"

:pageable-always-visible="false"

:filterable-mode="'row'"

:selectable="'multiple'"

:toolbar="[]"

:editable="false"

:server-paging="false"

:column-menu="true"

:scrollable-horizontal="true"

v-on:change="change"

v-on:save="grid_save">

</kendo-grid>

Without any event raised on the change event of the grid, the selection following a click of any rows in the grid is seemingly instant. Just for info, there are only three rows in this table, so it is not because there is a lot to go through.

Can you make any suggestions for speeding this up?

Regards
John

answered on 15 Nov 2018

1 answer

239 views

Change the Kendo UI Vue dynamically

We have a multilanguage application and we need to change the Kendo UI for Vue language dynamically.

We are found a Angular example https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/AngularJS/angular-dynamic-language-change, but this way is not available with Vue.

For our custom message with use vue-i18n plugin, but we want to use the kendo.messages.xx-XX.js files, but only (the last) is active.

Thks.

answered on 13 Nov 2018

1 answer

100 views

StockChart log error with dynamic dataset

when i change the data-source the console prints some error.

This is the template code

<kendo-datasource

:ref="'datasource'"

:data="chart">

</kendo-datasource>

<kendo-stockchart

:data-source-ref="'datasource'"

:date-field="'date'"

:category-axis-labels-rotation="'auto'"

:navigator-series="navigatorSeries"

:navigator-category-axis-labels-rotation="'auto'"

:theme="'sass'">

<kendo-chart-series-item

:type="'line'"

:field="'value'">

</kendo-chart-series-item>

</kendo-stockchart>

And this is the JS

export default {

name: "RatingHistory",

components: {

StockChart,

DataSource

},

data(){

return{

services:Object,

historicData:[],

fields: {

date: { type: 'date' }

},

navigatorSeries: {

type: 'area',

field: 'value'

}

},

computed:{

chart(){

return this.historicData

}

},

created(){

this.services = new Services()

this.fetchData()

},

methods:{

async fetchData(){

let result

try {

result = await this.services.getRatingHistory()

} catch(e) {

console.log("Error getting data--->", e)

}

if(result.successful && result.statusCode === 200){

this.historicData = result.data

}

};

The chart render as expected, but i always see this error.

any light on how to prevent it ?

answered on 13 Nov 2018

1 answer

601 views

Set global culture

How do you set another culture to be the default?

Trying to set Norwegian as the default the currency format is correct in Grid

answered on 02 Nov 2018

2 answers

114 views

Bar with negative stack

Hello All ,

We are trying to use a graph with negative stacks. I have looked through all the available Kendo charts and graphs but could not find a similar one. Can you please point me in the right direction if you came across a similar situation. I have attached the graph for reference.

Thank you