Questions on Kendo UI for Vue Forum

0 answers

100 views

hi i want to ask about wrapper and naative component. is that possible to combine wrapper and native component in 1 feature? for example im using grid table from native component and filter columnMenu checkbox from wrapper component. i already try it but still not working until now
appreciate your help. thanks

Checkbox

DropDownTree wrapper

Grid

asked on 06 Jan 2023

5 answers

674 views

Grid - card view

Hi

Is it possible to switch to a card view in the grid component? If not, is it possible to keep the filter options from <kendo-grid> and then have a switch to change between the <kendo-grid-column>'s and another custom view?

Or maybe another suggestion?

answered on 01 Feb 2019

1 answer

829 views

Kendo vue dropdownlist binding updating but not showing on UI

1
1
SAMPLE https://stackblitz.com/edit/usjgwp?file=index.html
I want to show a number of kendo dropdownlist(s) on a page. The exact number depends on an API call. This API call will give me an array of objects. The objects have the following properties: Id, name, type, role and isSelected.
The number of dropdownlist that has to be shown on this page should be equal to the number of unique type values in the API response array. i.e, numberOfDropdowns = stakeholders.map(a => a.type).distinct().count().
Now, each dropdown will have a datasource based on the type property. i.e, For a dropdown for type = 1, dataSource will be stakeholders.filter(s => s.type == 1).
Also the default values in the dropdowns will be based on the isSelected property. For every type, only one object will have isSelected = true.
I have achieved these things by using the following code:

01.<template>

02. <div

03. v-if="selectedStakeholders.length > 0"

04. v-for="(stakeholderLabel, index) in stakeholderLabels"

05. :key="stakeholderLabel.Key"

06. >

07. <label>{{ stakeholderLabel.Value }}:</label>

08. <kendo-dropdownlist

09. v-model="selectedStakeholders[index].Id"

10. :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"

11. data-text-field="name"

12. data-value-field="Id"

13. ></kendo-dropdownlist>

14.

15. <button @click="updateStakeholders">Update form</button>

16. </div>

17.</template>

18.

19.<script>

20.import STAKEHOLDER_SERVICE from "somePath";

21.export default {

22. name: "someName",

23. props: {

24. value1: String,

25. value2: String,

26. },

27. data() {

28. return {

29. payload: {

30. value1: this.value1,

31. value2: this.value2

32. },

33. stakeholders: [],

34. selectedStakeholders: [],

35. stakeholderLabels: [] // [{Key: 1, Value: "Stakeholder1"}, {Key: 2, Value: "Stakeholder2"}, ... ]

36. };

37. },

38. mounted: async function() {

39. await this.setStakeholderLabels();

40. await this.setStakeholderDataSource();

41. this.setSelectedStakeholdersArray();

42. },

43. methods: {

44. async setStakeholderLabels() {

45. let kvPairs = await STAKEHOLDER_SERVICE.getStakeholderLabels();

46. kvPairs = kvPairs.sort((kv1, kv2) => (kv1.Key > kv2.Key ? 1 : -1));

47. kvPairs.forEach(kvPair => this.stakeholderLabels.push(kvPair));

48. },

49. async setStakeholderDataSource() {

50. this.stakeholders = await STAKEHOLDER_SERVICE.getStakeholders(

51. this.payload

52. );

53. }

54. setSelectedStakeholdersArray() {

55. const selectedStakeholders = this.stakeholders

56. .filter(s => s.isSelected === true)

57. .sort((s1, s2) => (s1.type > s2.type ? 1 : -1));

58.

59. selectedStakeholders.forEach(selectedStakeholder =>

60. this.selectedStakeholders.push(selectedStakeholder)

61. );

62. },

63. async updateStakeholders() {

64. console.log(this.selectedStakeholders);

65. }

66. }

67.};

68.</script>

The problem is that I am not able to change the selection in the dropdownlist the selection always remains the same as the default selected values. Even when I choose a different option in any dropdownlist, the selection does not actually change.

I've also tried binding like this:

1.<kendo-dropdownlist

2. v-model="selectedStakeholders[index]"

3. value-primitive="false"

4. :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"

5. data-text-field="name"

6. data-value-field="Id"

7. ></kendo-dropdownlist>

If I bind like this, I am able to change selection but then the default selection does not happen, the first option is always the selection option i.e, default selection is not based on the isSelectedproperty. My requirement is that I have to show the dropdown with some default selections, allow the user to choose different options in all the different dropdowns and then retrieve all the selection then the update button is clicked. UPDATE: When I use the first method for binding, The Id property of objects in the selectedStakeholders array is actually changing, but it does not reflect on the UI, i.e, on the UI, the selected option is always the default option even when user changes selection. Also when I subscribe to the change and select events, I see that only select event is being triggered, change event never triggers.

answered on 02 Apr 2019

5 answers

370 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

268 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

69 views

Column Menu with Cell template not in vue kendo grid

Suppose i add columns =

[{
                field: "Status",
                title: "Status",
                cell: "badgeTemplate",columnMenu: "filterTextBoxTemplate", filter: "text", headerClassName: "customMenu",
            }],
 
So column menu not work in the grid

Grid

answered on 18 Aug 2023

0 answers

29 views

Multiselect Wrapper Change Event

Using Vue Wrapper for the Dropdowns

I have a multiselect in a v-for, it's rendering 3 widgets.

                                <kendo-multiselect :data-source="t.Items"
                                                   class="w-100"
                                                   :data-text-field="'Value'"
                                                   :height="300"
                                                   :value-primitive="false"
                                                   v-model="t.Selected"
                                                   :filter="'contains'"
                                                   :change="onKendoChange('multiselect')"
                                                   :placeholder="'- Select -'">
                                </kendo-multiselect>

When the page loads, all 3 of these fire their change event twice, so if I console log, I get 6 events. Ideally I don't want anything to happen on mount\load... just once the selection changes.

But then in the onKendoChange function, if I change ONE of the multi-selects, it's firing 3 more events, not just the event once for that one widget.

Basically I need to re-call my "getdata" function anytime something is selected...

Running 2023.3.1010

Steve

MultiSelect wrapper

updated question on 29 Feb 2024

1 answer

74 views

Locked Expand Field

Hello.

I implemented the kendo ui grid vuejs.

I have a question, how it's possible "sticky" the Expand column?

I have other columns "sticky" and works fine, but the "expand" column (master details) don't keep sticky. and i need to hide the "menu filters" in this columns too

Thanks in advance

Grid

answered on 20 Sep 2022

5 answers

328 views

How to pass correct DataSourceRequest when use transport-read function?

We want to move all our calls sever side so we got half way there but there are issues.

We have the following code that partially works

<kendo-datasource ref="datasourceSpike"

:page-size=100 :serverFiltering=true :serverSorting=true :serverPaging=true :serverGrouping=true

:schema-data="'data.data'" :schema-total="'data.total'" :schema-groups="'data.groups'"

:transport-read="readData"

></kendo-datasource>

readData(e) {

this.$OurApi

.getList(e.data)

.then((response) => {

e.success(response);

});

},

And server side: (actually only got this bit to work half way if I change the type of the DataSourceRequest parameter to string and then jsonconvert it.)

public HttpResponseMessage GetListTest([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest dataSourceRequest)

{

// DataSourceRequest request = JsonConvert.DeserializeObject<DataSourceRequest>(dataSourceRequest);

IRequestService requestService = new ServiceFactory().GetRequestService();

List<RequestsList> requestsLists = requestService.GetList();

var dataSourceResult = requestsLists.ToDataSourceResult(dataSourceRequest);

etc...

}

The problem the properties in e.data do not match the properties in DataSourceRequest.

"take":100,"skip":100,"page":2,"pageSize":100 These ones work but the filter, sort, group properties dont have the same names. Im trying to figure out if I need to use an existing parametermap but still have no luck.

answered on 20 Mar 2019

1 answer

81 views

Drag items from dropdown lists

I have implemented a drop down list as follows. i want to drag items from this list. :draggable="true" :dropzone="true"

doesn't seems to trigger this. Items cannot be dragged. How to achieve this? Thank you in advance

<kendo-dropdownlist

v-model="dropdownlistValue"

:data-source="dataSourceArray"

:data-text-field="'text'"

:data-value-field="'value'"

:filter="'contains'"

:draggable="true"

:dropzone="true">

</kendo-dropdownlist>

dataSourceArray:any []=[{ text: 'Small', value: '1' }, { text: 'Medium', value: '2' }, { text: 'Large', value: '3' }, { text: 'X-Large', value: '4' }, { text: '2X-Large', value: '5' } ];

dropdownlistValue= "";