Questions on Kendo UI for Vue Forum

1 answer

298 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

125 views

Wrapper grid dynamic column binding issue

hi,

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

ColumnList is as follows.

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

createContactGridWithCustomFields(customFields: []) {

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;

}

console.log('cfid:', cusFieldId);

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 = this.helperService.loadGridColumns();

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

defcolumns.push(tc);

});

}

columns are added like this because the data i have is as follows. datafieldvalue

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

Any suggestions?

Grid

answered on 22 Apr 2020

1 answer

436 views

Grid checkbox column issue

Hello

I'm using the kendo Vue wrapper to implement a grid. I want to have the first column of my grid to be a checkbox column so i can select rows. As the docs suggested I wrote a selectable="true" kendo grid colomn. But no checkboxes are visible, I checked the DOM and it's because there are only input type checkbox tags with class "k-checkbox" added and not the nessecary labels with class "k-checkbox-label". I'm not sure if I'm missing something or the kendo grid column with binding :selectable isn't working properly.

<kendo-grid

ref="vehicleGrid"

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

:groupable="true"

:sortable="true"

:resizable="true">

<kendo-grid-column :selectable="true" :width="50"></kendo-grid-column>

...Other columns....

</kendo-grid>

Thanks for helping me!

Kind regards

Grid

answered on 16 Apr 2020

2 answers

571 views

How to change the format of the current date(Scheduler Component)

Hi

I'm using Kendo Scheduler Component

I use only month view and i want change the format of the current date.

I attached a description picture.

Please give me solution. Thank you.

answered on 03 Apr 2020

5 answers

245 views

Problem with Vue Donut chart incorrect rendering

Hello,
We have implemented Kendo Vue Donut chart, using visual function, that in most cases rendered well.
But we found that on certain devices (regardless bigger or smaller) the chart renders each slice of the donut as a full circle and puts them all one on top of the other. The attached image demonstrates it.
Our investigation shows that it is the result of the seriesDefaults holeSize value AND the visual function stroke line width.
Both are determined programmatically at run time.

The following values result with the correct donut you see in the image:
holeSize: 83
visual stroke width: 22 (or less)

And the following values result with the incorrect donut:
holeSize: 83
visual stroke width: 23 (or more)

Notice it is also related to the holeSize - for example the following will be rendered well:
holeSize: 85
visual stroke width: 23 (or more)

And holeSize 84 with visual stroke width of 23 is rendered incorrectly.

Can you please advise how we can make sure it will always be rendered correctly? Is there a certain ratio between the holeSize and the visual stroke width we need to maintain?

Thanks,

Ron.

answered on 25 Mar 2020

1 answer

131 views

Line Graph Chart Not Showing Curve

I am having a peculiar issue that may not even have a solution at least in regards to a Kendo UI chart property for Vue. The issue is that given a set of data points the chart is supposed to show a curve (the data is basically showing a degradation curve). Instead of a curve, the chart is display a straight line. I am not sure if there is a setting for the chart that can force the curve or if it needs to happen as a result of some kind of algorithm/calculation on the data itself. I have attached an image showing what the chart is essentially doing and what it needs to be doing. Any insight into this would be extremely helpful and appreciated. Thanks.

General Discussions

answered on 20 Mar 2020

1 answer

78 views

Native input onFocus not running

There is not documentation on how to use the onFocus prop on the native Vue input component.

https://www.telerik.com/kendo-vue-ui/components/inputs/api/InputProps/

I have tried binding a function to the prop but it doesn't not seem to be running. Could you update your documentation to provide an example on how to use this?

This is an example of how I tried it.

https://stackblitz.com/edit/wcvyxe

General Discussions

answered on 20 Mar 2020

1 answer

184 views

Kendo UI Vue Grid Wrapper Sticky Pagination

HI,

I'm working with the Project using Kendo Vue Grid Wrapper, and my client want to make the pagination always on the bottom,
Can we customize the Kendo Grid Wrapper pagination,to make it fixed on the bottom section?

Best Regards
Thank you

Grid

answered on 18 Mar 2020

2 answers

432 views

Kendo UI Vue, Sorting always null on API (DataSourceRequest)

Hi,

I'm new on the Kendo UI for Vue,

I Have some difficulty when working on in sorting, for some reason the sorting model value always null, I'm using DataSourceRequest model.

API

[HttpGet("grid")]

public IActionResult ListGrid([DataSourceRequest] DataSourceRequest request) {

// My code here

}

Vue

<kendo-datasource ref="datasource1"

:transport-read-url="'/api/service/grid'"

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

:server-paging="true"

:page-size="2"

:schema-data="'data'"