topic How do I use Calcite pagination with latest Calcite update? It no longer works for me. in Calcite Design System Questions

How do I use Calcite pagination with latest Calcite update? It no longer works for me.

ArianaBernal — Fri, 14 Apr 2023 14:53:07 GMT

I have an application I have been working on using the Calcite design system but since I updated Calcite to the latest version out of Beta the pagination function I have no longer works. There used to be a "detail" property which allowed me to change the content my modal when you click the pagination button but this method is now gone...

I see the examples of this pagination component working with the "next Page" "previousPage" methods, nor any explanation to where I am supposed to use those methods.

Can I see an example with this actually working with content or panels? I have attached examples how mine is working using the Beta calcite version.

Info button showing this work - https://cityview.roundrocktexas.gov/

Re: How do I use Calcite pagination with latest Calcite update? It no longer works for me.

KittyHurley — Fri, 14 Apr 2023 15:10:00 GMT

Hello @ArianaBernal, between the beta and production releases, as you mentioned, we had a considerable number of breaking changes.

One of which was our event payload, which was changed from detail to target across components:

const paginationEl = document.querySelector("calcite-pagination"); paginationEl.addEventListener("calcitePaginationChange", (evt) => console.log(evt.target.startItem));

There are some tips and tricks on the Core Concepts page, including some information on events, which could be a great resource to identify some of our patterns with the production release.

Would also recommend taking a look at the release notes for 1.0.3 and breaking changes between the beta and production releases, such as 1.0.3 and beta.99. Calcite follows semantic versioning, so production breaking changes will be evident when the major release changes in the future.

Re: How do I use Calcite pagination with latest Calcite update? It no longer works for me.

coryeicher — Fri, 14 Apr 2023 15:37:42 GMT

Hi Ariana,

For pagination, I have something working on this Calcite version. Let me
know if this could be helpful and I can dig a little deeper.

1.0.0-beta.77

I have yet to migrate forward from this version

-Cory

Re: How do I use Calcite pagination with latest Calcite update? It no longer works for me.

ArianaBernal — Fri, 14 Apr 2023 15:58:57 GMT

This worked for me thank you!