Questions on Kendo UI for Vue Forum

2 answers

291 views

Best way to expand Kendo DropDownList to viewport height

I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>

I'm currently trying it with this approach but I'm wondering if there's a better way:

1seoqu (forked) - StackBlitz

The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered. In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.

DropDownList wrapper

answered on 04 Feb 2022

16 answers

431 views

Grid Detail Template

So how do we add a Detail Template? The docs are seriously lacking for Vue wrappers!!

I have this - which i assume would reference a $ref od "detail" but instead outputs a string

<kendo-grid ref="grid"
:data-source-ref="'dataSource'"
:menu="true"
:sortable='true'
:pagable="true"
:groupable="false"
:detail-template="'detail'">

answered on 01 Nov 2018

1 answer

225 views

Wrapper grid dynamic column binding issue

hi,
I have used vue wrapper grid, columns binding as a list. Columns are binded.

<KendoGrid

ref="ContactList"

id="contactListView"

:selectable="'multiple'"

:reorderable="true"

:sortable="false"

:resizable="true"

:scrollable-endless="true"

:filterable="false"

:columns="columnList.filter(x=>x.selected==true)"

:editable="commonContactInfo.isGridEditable"

@change="onContactRowClick"

@save="saveContact"

:data-source="ContactsListForSelection"

@databound="onDatabound"

:allowCopy="true"

></KendoGrid>

ColumnList is as follows.

let columns: any[] = [

{

width: 50,

title: 'Select All',

selectable: 'multiple',

selected: true,

disabled: false

},

{

title: `First Name`,

field: 'firstname',

selected: true,

disabled: true,

isVisible: true,

width: 150

},

{

title: `Middle Name`,

field: 'middlename',

selected: true,

disabled: false,

isVisible: true,

width: 150

},

{

title: `Last Name`,

field: 'lastname',

selected: true,

disabled: false,

isVisible: true,

width: 250

},

{

title: `Initials`,

field: 'initials',

selected: true,

disabled: false,

isVisible: true,

width: 250

},

{

title: `Address`,

field: 'address',

selected: true,

disabled: false,

isVisible: true,

width: 250

}]

I use a seperate method to change this column list. later. There I add new columns to the grid as well.

if (this.commonContactInfo.customFieldsForGroups.length > 0) {

let Customcolumns: any[] = [];

let field = '';

let cusFieldId = '';

this.commonContactInfo.customFieldsForGroups.forEach((cf:CustomFieldsDto) => {

if (cf.pkFieldId !== undefined) {

cusFieldId = cf.pkFieldId;

}

this.commonContactInfo.fetchedContactsList.forEach((cont:ContactDto) => {

Object.keys(cont.customFields).forEach(k => {

if (this.commonHelper.getPlainGuidString(k) === cusFieldId) {

if (cont.customFields[k].DataType === 'DateValue') {

console.log(cont.customFields[k].DateValue);

field = 'customFields[' + k + '].DateValue';

}

if (cont.customFields[k].DataType === 'StringValue') {

console.log(cont.customFields[k].StringValue);

field = 'customFields[' + k + '].StringValue';

}

if (cont.customFields[k].DataType === 'IntValue') {

console.log(cont.customFields[k].IntValue);

field = 'customFields[' + k + '].IntValue';

}

});

Customcolumns.push({

title: cf.fieldName,

field: field, // 'customFields[' + field + '].DateValue',

selected: true,

disabled: true,

isVisible: true,

width: 150

});

let defcolumns = columnsList;

Customcolumns.forEach((tc:any) => {

defcolumns.push(tc);

});

this.ColumnsList= defcolumns;

this.ColumnsList.forEach((e:any) => {

e.selected = true;

});

}

columns are added like this because the data i have is as follows. datafieldvalue (see attached file)

Issue is after this even the columns are added the data in the customfields are not binding.

Any suggestions?

Grid

answered on 23 Apr 2020

1 answer

524 views

[JEST] testing combobox wrapper component

Hello everyone!

I am trying to implement a search field component based on kendo-combobox wrapper.

I want to cover via JEST unit tests the changed value but I can not trigger the change event and assert the component value.

I am sharing with you guys this code example : https://codesandbox.io/s/tender-proskuriakova-89bcm?fontsize=14&hidenavigation=1&theme=dark

Can you help me on this assertion : expect(wrapper.vm.$data.value).toEqual(1);

answered on 19 Feb 2020

5 answers

206 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

176 views

Kendo-Vue-Grid Way to not lose sort when datasource is refreshed?

I have a kendo-vue-grid like so:

<kendo-grid v-bind:data-source="loggedInUsers"
v-bind:sortable-mode="'multiple'"
v-bind:sortable-allow-unsort="false"
v-bind:sortable-show-indexes="true"
v-bind:height="250">
<kendo-grid-column field="username" title="Agent Name">
</kendo-grid-column>
<kendo-grid-column field="count" title="Count">
</kendo-grid-column>
</kendo-grid>

`loggedInUsers` which is used as datasource in above contains elements like:
`{ username: 'test', count: 1 }` .

My problem is that this `loggedInUsers` array gets updated every five seconds and when it gets updated, all the sorting that is done on columns gets lost. Is there a way to preserve this sort settings?

Grid

answered on 20 Feb 2019

1 answer

927 views

Dart SASS deprecating slash for division

I'm getting a handful of these errors and it causes issues with automated testing/build pipelines.

Example:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($drop-hint-arrow-size, 2) or calc($drop-hint-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

I could fix them easily, but I'd rather leave the NPM packages as we received them. Are there plans to update the SCSS files for Kendo UI Vue to support the latest library expectations?

General Discussions

Styling / Themes

answered on 27 May 2022

1 answer

161 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.