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:
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.
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'">
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?
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);
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
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?
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.
Using the kendo vue grid wrapper how can I add a css class to a kendo-grid-column ?
I try to use v-bind:steps="{ hour: 1, minute: 15 }" but turns out it doesn't have any effect.
I would like to make sure if it is not supported or I have misconfigured.
Thanks!