Questions on Kendo UI for Vue Forum

1 answer

65 views

Kendo Dropdown Wrapper + Kendo data source not working as expected when filtering

I'm trying to use the Kendo Dropdownlist wrapper (I need the grouping functionality) and the Kendo datasource.

However when I change the data prop of the KendoDatasource, the changes aren't immediately reflected in the Kendo Dropdownlist.

Repro:
D1kq29 (forked) - StackBlitz
Steps:
1: Open dropdown, see 2 dropdown items
2: click on 'turn filter on'
3: See that the datasource now only has 1 item
4: open the dropdown, see 2 dropdown items <- not expected
5: click on 'turn filter on' again
6: open dropdown, see 1 dropdown item, despite datasource now actually having 2 items

DataSource wrappers (package)

DropDownList wrapper

answered on 10 Mar 2023

1 answer

134 views

Filter in SharedTemplate chart tooltip

I'm using vuejs.

I've got a chart with a tooltip:

import { bytes } from '...fileBytesIsIn'
get tooltip () {
  const sharedTemplate = `<table class="tooltip-table" width="150">
  // removed header to save space
  # for (var i = 0; i < points.length; i++) { #
    <tr>
      <td><div class="swatch #: points[i].series.class#">&nbsp;</span></td>
      <td class="name" nowrap>#: points[i].series.name#</td>
      <td class="val">#: bytes(points[i].value) #</td>
    </tr>
  # } #
  </table>`
  return {
    visible: true,
    shared: true,
    template: '#= value #',
    sharedTemplate: sharedTemplate
  }
}

My issue: bytes is undefined. I've tried it like a filter

#: points[i].value | bytes #

and several other ways, but nothing seems to work. Is there any way I can apply my formatting function to this value in the tooltip sharedTemplate so I can display these values as readable file sizes?

Chart wrappers (package)

answered on 30 Jul 2021

2 answers

322 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'"

:schema-total="'total'"

:server-filtering="true"

:server-sorting="true">

</kendo-datasource>

<kendo-grid ref="grid"

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

:pageable='true'

:sortable="true"

:filterable="true"

:sortable-mode="'multiple'"

:sortable-allow-unsort="true"

:sortable-show-indexes="true">

<kendo-grid-column title="Name" field="name"

:filter-search="true"></kendo-grid-column>

<kendo-grid-column title="Description"></kendo-grid-column>

<kendo-grid-column title="Users" field="relatedUser"></kendo-grid-column>

<kendo-grid-column title="Active" field="isActive"

:template="activeTemplate"></kendo-grid-column>

<kendo-grid-column :template="editbutton" :width="80"></kendo-grid-column>

</kendo-grid>

Please help me,

Best Regards

Grid

answered on 18 Mar 2020

0 answers

68 views

Kendo Vue Grid column menu change color of the icon when the column is filtered

Hello,

Is there a solution for a filtered column in a grid based on column filter or an external filter to change its color to show to the user that it has been filtered with something?

I try to implement it myself and I fall short to understand all the possible subcases that occur. Is there a ready solution or could someone suggest me how to do it?

Thanks

Grid

asked on 03 Feb 2023

2 answers

537 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

6 answers

310 views

Native DropDownList issues

I have started using the new Vue Native DropDownList and found a few issues when it is used inside a popup (bootstrap-vue modal).

The dropdown list will not display. I can make it display by adding:

.k-animation-container {
z-index: 100000;
}

Now it displays but clicking out side the dropped down list will not close it.

Wayne

General Discussions

answered on 13 Feb 2020

4 answers

202 views

Grid option properties

Shouldn't I be able to pass option attributes to a Grid (Any widget) without binding?

<kendo-grid>

server-filtering,

server-paging,

etc

</kendo-grid>

Also the Column filterable attribute is generating a warning when I pass it an object (Says Boolean only). Can you please add Object to the filterable prop.

answered on 31 May 2018

11 answers

2.5K+ views

Binding kendo multiselect to array of objects

How can I bind a kendo multiselect to a list of objects? The v-model binding only returns an array with the values of data-value-field.

<kendo-multiselect

id="employees"

v-model="selectedEmployees"

:data-source="employeesDataSource"

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

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

:delay="1000"

:auto-bind="true"

:min-length="2">

</kendo-multiselect>

In the example above selectedEmployees will be set to an array of employee numbers instead of employee objects. How can I get it so work with objects instead?

answered on 28 Oct 2019

5 answers

77 views

format date before sending to server

I am using the grid wrap with a date type column, however when using the filter in that column, I send the value of the date in format: Wed Jan 08 2020 00:00:00 GMT-0400 (hora de Bolivia) how can i change the format?

Grid

answered on 13 Jan 2020

3 answers

68 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