Kendo Pivot Grid not mapping Default Row and Column Axis dynamically.

1 Answer 48 Views

GridLayout PivotGrid

Jaskaran asked on 15 Jul 2024, 02:10 PM

Greetings,

I am using Kendo UI pivot grid version: @progress/kendo-react-pivotgrid": "^6.1.1

I am using the usePivotLocalDataService() function for local data binding. I am rendering the default row and default column axes dynamically.
I am toggling the views calling this usePivotLocalDataService() for each different view. Its updating the data field dynamically but not updating columnAxes and rowAxes. I even passed it dynamically through props, but it was displaying the same column and row axes, i.e., maped initially.

Here is the code:

<PivotGridContainer>
<PivotGrid
className={`pivot-table-container3`}
{...pivotProps}
row={CustomRow}
rowAxes={rowAxis.current}
columnAxes={colAxis.current}
cell={(props: any) => (
<CustomCell2
{...props}
myFunc={myFunc}
tableLabel={tableLabel}
page={tableType}
views={views}
/>
)}
ref={pivotgrid}
style={{
// height: state.loading ? 350 : undefined,
maxHeight: 500,
}}
/>
{show && <PivotGridConfigurator {...configuratorProps} />}
<PivotGridConfiguratorButton onClick={handleButtonClick} />
{state.loading && <Loader />}
</PivotGridContainer>

1 Answer, 1 is accepted

answered on 17 Jul 2024, 09:42 AM

Hi Jaskaran,

The only option that I can think of is to make a wrapper component that will be initialized with the service arguments and when those arguments change (you switch the view), you can re-mount that wrapping component with the Grid and the usePivotLocalDataService with the new arguments. You can use a "key" property for that wrapping component and update it when it needs to re-mount with the new configuration.

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Jaskaran

commented on 22 Jul 2024, 10:29 AM

Greetings,

I already wrapped the component in wrapper component, but still it was displaying the same row and column axes. See the below code:

Please give me any other solution for this

import {
PivotGrid,
PivotGridContainer,
PivotGridConfigurator,
Dimension,
Measure,
usePivotLocalDataService,
PivotGridAxis,
PivotGridConfiguratorButton,
PivotGridHandle,
} from "@progress/kendo-react-pivotgrid";
const [SetData, setStateNew] = useState<any>(PivotTableCall(props.data));
const { pivotProps, configuratorProps, state } =
usePivotLocalDataService(SetData);

<div className="position-relative">
{location?.pathname !== "/validatedata" &&
location?.pathname !== "/validatedata2" &&
location?.pathname !== "/validatedata3" && (
<Button
className={`float-end mt-2 mx-4 ${
location.pathname === "/viewallpdf"
? "exportBtn2"
: "exportBtn2"
}`}
onClick={onSaveAsExcel}
>
Export to Excel
</Button>
)}
<PivotGridContainer>
<PivotGrid
className={`pivot-table-container3`}
{...pivotProps}
row={CustomRow}
// rowAxes={rowAxis.current}
// columnAxes={colAxis.current}
cell={(props: any) => (
<CustomCell2
{...props}
myFunc={myFunc}
tableLabel={tableLabel}
page={tableType}
views={views}
/>
)}
ref={pivotgrid}
style={{
// height: state.loading ? 350 : undefined,
maxHeight: 500,
}}
/>
{show && <PivotGridConfigurator {...configuratorProps} />}
<PivotGridConfiguratorButton onClick={handleButtonClick} />
{state.loading && <Loader />}
</PivotGridContainer>
</div> 

Konstantin Dikov

commented on 22 Jul 2024, 11:00 AM

Hi Jaskaran,

Did you try changing the "key" property of your wrapper component containing the PivotGrid when you want to set the new configuration? This will ensure that your wrapping component re-mounts with the new configuration.

Jaskaran

commented on 22 Jul 2024, 12:16 PM

Yes, I tried but nothing happens. Still getting the same output again and again

Konstantin Dikov

commented on 24 Jul 2024, 07:53 AM

Hi Jaskaran,

Please share a stackblitz example with the wrapping component and the changing of its key property that fails, so we can test and debug it locally. You can use any of our online demos as a starting point:

https://www.telerik.com/kendo-react-ui/components/pivotgrid/data-binding/local-binding/

Looking forward to your reply.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Kendo Pivot Grid not mapping Default Row and Column Axis dynamically.

1 Answer, 1 is accepted