Questions on Kendo UI for Vue Forum

1 answer

573 views

I am currently trying out Kendo as a proof-of-concept for a component library solution; however, I am having trouble getting any sort of styling to work.

Using an import statement in my App.vue file and/or including the theme stylesheet in my HTML file seems to cause some strange issues.

It seems that the default themes for the grid(not sure where they are coming from) are overriding the themes that come from Kendo. An example of this is below. The <th> element being created by the Vue Grid tag is shown below:

Is there any way I can ensure that styles are not put on the HTML elements by default? I am not adding these styles to the elements anywhere in my code, so I am not sure how to get rid of them or how to have the kendo theme override them.

The theme that I am trying to use was created using the vue-ui theme builder. I know that the theme is being used by the application because the grid has some of the theme styling, but some portions of it are being overridden.

The example that I followed to create my grid is below:

https://www.telerik.com/kendo-vue-ui/components/grid-native/custom-rendering/hierarchy/

Grid

answered on 05 Apr 2019

1 answer

686 views

ToolTip in Row Template of kendo-grid (wrapper)

Hi,

I'm looking for the best way to display a tooltip when hovering over the value of a cell (very useful for custom commands).

I have already defined a template for the line and it works:

<script id="rowTemplate" type="text/x-kendo-tmpl">

<tr class="k-master-row" data-uid="#: uid #" role="row">

<td role="gridcell"> #: OrderID # </td>

<td role="gridcell"> #: ShipName #</td>

<td role="gridcell"> #: Freight #</td>

<td role="gridcell"> #: OrderDate #</td><br>

</tr>

</script>

What is the best way to show a TootlTip for example hover "OrderID " value ?
Thanks in advance ;-)

answered on 04 Apr 2019

1 answer

452 views

Kendo vue dropdownlist binding updating but not showing on UI

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:

<kendo-dropdownlist

v-model="selectedStakeholders[index]"

value-primitive="false"

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

data-text-field="name"

data-value-field="Id"

></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

1 answer

943 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

1 answer

375 views

Grid setoptions / getoptions and functions

Good Morning,

We are currently testing the Kendo Grid but we have encountered a couple of problems.

The first problem is with the function setOptions to save and retrieve the grid configuration. Because JSON.stringify does not work well with the functions we have reviewed in other post that there are libraries like super-json to be able to store these functions as a string. The problem is that when I recover and make the setOptions I get an error of "Error in v-on handler:" ReferenceError: templateDefinition is not defined ", we have tried both with this library and creating our own function to store functions within the localstorage. Is there an alternative? I use templates to customize the columns, therefore it is necessary to store functions in the "template" key

Our other problem is when grouped by a column appears the identifier in the description of the grouping, Is it possible to establish for example the name of the object associated with that group identifier or another attribute?

Thank you very much and greetings

Grid

answered on 29 Mar 2019

3 answers

198 views

vue DropDownList cascadeFrom not working?

I tried many methods, still I failed to get the working.

<kendo-datasource ref="jobtitleData"
:schema-data="'data'"
:transport-read-url="jobTitleService">
</kendo-datasource>
<kendo-dropdownlist ref="jobtitleList"
:data-source-ref="jobtitleData"
:data-text-field="'name'"
:data-value-field="'id'">
</kendo-dropdownlist>

<kendo-datasource ref="jobLevelData"
:schema-data="'data'"
:serverFiltering='true'
:transport-read-url="jobLevelService">
</kendo-datasource>
<kendo-dropdownlist ref="jobLevelList"
:data-source-ref="'jobLevelData'"
:data-text-field="'name'"
:data-value-field="'id'"
:placeholder="'Select Job Level'"
:cascadeFrom="'jobtitleList'"
:autoBind='false'>
</kendo-dropdownlist>

answered on 25 Mar 2019

5 answers

431 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

3 answers

723 views

Showing Loading Spinner on Scehduler

Hi,

We are building a vue application and we are also using the scheduler component.
We are having hard time to find a the way to show the loading animation while we are fetching data from our server

We found multiple example online for the jquery lib using kendo.ui.progress(el, true/false) but not sure how to apply this to our vue app.

Thanks in advance for your help

answered on 19 Mar 2019

7 answers

569 views

KendoMaskedTextBox bind unmasked value

How can I make the KendoMaskedTextBox for Vue bind with v-model against the unmasked value? For example, if my mask is "00000-0000" for a US postal code, and I enter "30157" in the control, it will currently bind "30157-____". I need it to bind as "30157" (no hyphen, and no underscores). I could strip out what I don't want on the server, but it seems like that shouldn't be necessary.

answered on 19 Mar 2019

3 answers

148 views

Grid Localization seems not to work

Hi,

I'm trying to translate the filter menu of the Grid.

the instructions on page:

https://www.telerik.com/kendo-vue-ui/components/grid/api/FilterableProps/

seems clear.

But if I put by example:

<kendo-grid ref="grid" :data-source-ref="'datasource1'" :pageable='true' :sortable="true" :filterable="true" :selectable="true"
:filterable-messages-clear="'Reimposta'"

The text of the relative button is always "clear".
Any suggestions?
Thank's in advance!

Grid

answered on 15 Mar 2019