Questions on Kendo UI for Vue Forum

3 answers

1.1K+ views

Checkbox and text input inside ListBox item template

I know ListBox probably doesn't support this out of the box but I'm really struggling to find a solution to my problem.

I would like to customize the item template to contain a checkbox and a text input when it is moved to the right ListBox. I am able to put a checkbox and input in there no problem but I can't get the textbox to focus when clicked.I would also like to bind its value to the dataItem but I'm sure I can figure that part out once I'm able to actually type in the box.

Here is a Dojo demonstrating the problem:

https://dojo.telerik.com/eZuKoMoh/2

answered on 10 Dec 2018

3 answers

127 views

How to use filterable-ui attribute in TreeList with Vue

I'm using TreeList component and I want to rend dropdown list in column filters, I have set filterable to true and filterable-ui to rend function, but still failed, while it works in jquery TreeList. Failed meaning is rending default string type filters, not dropdown list. And I'm sure the attribute is received by component from vue chrome plugin.

Hoping some demoes to show how to work fine.

Code as following

HTML:

<kendo-treelist :data-source="resourceDataSource"
:filterable="true">
<kendo-treelist-column :field="'name'" :width="140"></kendo-treelist-column>
<kendo-treelist-column :field="'resourceType'" :width="100" :filterable="true" :filterable-ui="resourceTypeFilterableUi" :template="typeTemplate"></kendo-treelist-column>
</kendo-treelist>

JS:

resourceDataSource:

new kendo.data.TreeListDataSource({
serverPaging:true,
serverFiltering:true,
transport:{
read:{
url:'/api/RBAC/Resource/GetResouceListByTid',
type:"post",
dataType:'json',
data:{
companyId:vm.companyId
}
}
},
page:1,
pageSize:10,
schema: {
model: {
id: "id",
parentId: "parentId",
fields:{
resourceType:{ type:'string' }
}
},
data:function (res) {
return res.data.data
},
total:function (res) {
return res.data.total
}
}
})

Rend Function:

resourceTypeFilterableUi:function(element){
element.kendoDropDownList({
dataSource: resourceType,
dataTextField: "value",
dataValueField: "id"
})
}

answered on 05 Dec 2018

1 answer

303 views

How to remove tab by using tabstrip Vue

https://codesandbox.io/s/216z33wvjr

this is the link that show the reason of i am asking this question, seem like Vue kendo not have the function of remove and add the tab, i m using jquery and use it to add and remove the tab. Add the tab is easy but when i need to remove the tab, the fuction that i defined on the "x" seem like cannot fire the "remove" function i had create in the method of vue, seem like it was not found the method.

answered on 05 Dec 2018

1 answer

423 views

kendo vue grid nested objects

hi,

I want to show my binding data in kendo grid but I cant this with schema,anybody can help me? i do this:and my data transfer from my controller in "/loadlists"

<kendo-datasource

ref="datasource"

:type="'get'"

:pageSize="20"

:transportRead="'/loadlists'"

></kendo-datasource>

<kendo-grid

:height="550"

:dataSourceRef="'datasource'"

:groupable="true"

:sortable="true"

:pageable-refresh="true"

:pageable-page-sizes="true"

:pageable-button-count="5"

:filterable="true"

:columnMenu="true"

:schema-model-fields="schemaModelFields"

>

<kendo-grid-column :field="'VehicleName'" title=" vehicle name">

</kendo-grid-column>

<kendo-grid-column field="user_id" title="name"></kendo-grid-column>

<kendo-grid-column field="load_id" title="load"></kendo-grid-column>

<kendo-grid-column field="load_date" title="laod date"></kendo-grid-

column>

</kendo-grid>

and my data in vue:

data() {

return {

isLoading: false,

load: {},

loads: {},

schemaModelFields: {

VehicleName: { from: "vehicle.name" }

}

};

},

At this I try to bind my data transfer from controller to kendo grid and I cant

answered on 05 Dec 2018

7 answers

170 views

Tap Strip Content Cannot stay with Vue Component

I need to add the component that was created and put into the tabstripe content to show on the tabstriped but i seem like not supported

answered on 03 Dec 2018

1 answer

176 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.5K+ 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

215 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

443 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

234 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