Questions on Kendo UI for Vue Forum

1 answer

122 views

Kendo UI Grid View implementation using vue | pagination issue

We trying to implement a Kendo grid for my project and I was trying to add 'All' option in the pagination and used dataStateChange event to set the take value but getting event value as undefined.

Whenever we select "All" option from the dropdown, In dataStateChange method , I am getting selected value as "totalItemCount" instead of "All", but I can see both "totalItemCount" and "All" options in dropdown.

Example:

we have 1000 records as "totalItemCount" in a table, provided image below. So I am able to see all the records in the table but in dropdown we can see both 1000 and "All" option. We only need to see "All" not 1000.

We should not see "totalItemCount" in the dropdown(as well as selected option) and see only "All" as a selected option(as well as dropdown) when we select "All" option from dropdown.

Can someone help to solve this issue, please?

pageable() {
      return {
        buttonCount: 5,
        info: true,
        type: 'numeric',
        pageSizes: [10, 15, 20, 'All'],
        previousNext: true,
        pageSizeValue: this.pageSizeValue,
    };
},

dataStateChange: function (event) {
       this.loader = false;
       this.skip = event.data.skip;
       this.take = event.event.value === 'All' ? 1000 : event.page.take;
       this.pageSizeValue = 'All';
},

Grid

Pager

answered on 09 Dec 2022

1 answer

193 views

Kendo UI Grid View implementation using vue | pagination issue

I'm trying to implement a Kendo grid for my project and I was trying to add 'all' options in the pagination and used pageChange event to set the take value but getting event value as undefined.

pageable() {
      return {
        buttonCount: 5,
        info: true,
        type: 'numeric',
        pageSizes: [10, 15, 20, 'all'],
        previousNext: true,
      };
    }
pageChangeHandler: function (event) {
  this.skip = event.page.skip;
  this.take = event.event.value === 'all' ? 1000 : event.page.take;
},

Grid

Pager

answered on 06 Sep 2022

1 answer

70 views

Kendo UI Grid View implementation using vue | pagination issue

I have implemented client side grid that is successfully fetching my data. When the grid loads, the data is present but pagination is not displaying any data (page number , total items count, page size) for the first load. If I do any action like sorting, filtering or resizing on my table then grid is getting refresh and pagination is working as expected.

How to resolve this ?

Grid

Pager

answered on 29 Aug 2022

1 answer

64 views

Screen reader support

A number of Kendo components could do with better support for screen readers, including:

Pagination (eg in a grid): page links should read something like "Go to page 1", not just "1".
Dialog's labelled by and close button less confusing - it currently reads the whole header row, several times in a row.
Upload / external drop target: Upload hints are running through without a gap.
Grid: the header is confusing noise, it reads out "table with zero rows and zero columns" (depending on grid scrolling settings)
Date / date range inputs: reads "day/month/year" but not the field label, it's very hard to navigate the date picker.

No doubt there are more than the above.

Effective screen reader accessibility is as much about what you skip as what you add. Where possible, audio prompts should be short and clear, and not produce excess noise.