How to select specific row(s) in a Vue Pivot Table using an external button?

Introduction:

When working with Vue Pivot Table, there may be instances where you require the flexibility to select specific rows in a pivot table through an external button, rather than directly interacting with the pivot table itself. This approach enhances user interaction by providing a more accessible way to dynamically select specific rows in a pivot table. This guide will demonstrate how to select rows in a Vue Pivot Table based on their header text upon clicking an external button. Moreover, it will show how to select both rows and their associated child members using the same external button interaction.

Add an external button:

First, you need to create a button that will be used to select rows in the pivot table. To maintain a consistent UI, you can use the Syncfusion Button component. Here is an example code snippet demonstrating how to accomplish this:

[App.vue]

<template>
    <ejs-button id="btn" v-on:click="selectRow" isPrimary='true'>Select rows</ejs-button>
    <ejs-pivotview id="pivotview" ref="pivotview" :dataSourceSettings="dataSourceSettings" :gridSettings="gridSettings">   
     </ejs-pivotview>
</template>

<script lang="ts">
import { PivotViewComponent } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  components: {
    'ejs-pivotview': PivotViewComponent,
    'ejs-button': ButtonComponent
  },
}
</script>

Selecting specific rows in a pivot table based on header text:

After configuring the button, you must implement the logic to select specific rows in the pivot table upon clicking the button. This involves adding a method within your script section that will be executed upon the button click. Here is a code snippet that demonstrates how to select specific rows in a pivot table based on the header text:

[App.vue]

<script lang="ts">
export default {
  data: () => {
    return {
      gridSettings: {
        allowSelection: true,
        selectionSettings: {
          mode: "Row",
          type: "Multiple",
        }
      },
    };
  },
  methods: {
    selectRows: function(args: any) {
      // Obtaining a reference to the Pivot Table instance.
        let pivotObj = ((this as any).$refs.pivotview).ej2Instances;
      // Here, we initialize a variable to determine the specific row index.
        let rowIndex = -1;
      // Array to strore selected row index
      let selectedRows = [];
      // Iterate through the pivotValues property of the Pivot Table instance
        for (var i = 0; i < pivotObj.pivotValues.length; i++) {
            for (var j = 0; pivotObj.pivotValues[i] != null && j < pivotObj.pivotValues[i].length; j++) {
                if (pivotObj.pivotValues[i][j] && pivotObj.pivotValues[i][j].axis === 'row') {
                    // Here we increment the row index variable if the axis of the current cell is 'row'.
                    rowIndex++
                    if (pivotObj.pivotValues[i][j].valueSort &&
                        pivotObj.pivotValues[i][j].valueSort.levelName.includes('Road Bikes')) {
                        // Here we push the `rowIndex` to `selectedRows` array
                        selectedRows.push(rowIndex);
                    };
                }
           }
        }
        // Select the specific row based on the rowIndex
        pivotObj.grid.selectionModule.selectRows(selectedRows);
     },
  }
}
</script>

Here’s a breakdown of how the code works:

1. First, we define a variable named pivotObj within the selectRow() method to access the instance of the pivot table. We use this variable to identify the specific row indices and then select the corresponding rows.

2. Following this, we initialize a variable named rowIndex to track the current row index as we iterate over the pivot table data. Additionally, we create an array called selectedRows to store the indices of the selected rows.

3. Afterward, we iterate over pivotObj.pivotValues to access the details of each cell within the pivot table. Throughout this iteration, we use the args.cellInfo.valueSort.levelName property to determine whether the row header text includes the specified criteria (in this case, “Road Bikes”). The index of each matching row is then added to the selectedRows array.

4. Once the row indices are determined, we invoke the pivotObj.grid.selectionModule.selectRows method to select the corresponding rows in the pivot table based on the indices in the selectedRows array. You can adapt the code to fit your specific requirements, such as selecting different rows in the pivot table.

The following GIF image portrays the results of the code snippet mentioned above:

GIF

For a practical demonstration, please refer to the sample of stackblitz.

Selecting specific row and its associated child members:

In certain scenarios, you might want to select specific rows and their associated child members in a pivot table using an external button click. The approach is similar to selecting rows by header text, but this time, we focus on the parent header text (i.e., ‘France’). Here is an example code snippet demonstrating how to accomplish this:

<script lang="ts">
export default {
  methods: {
    selectRows: function(args: any) {
      // Obtaining a reference to the Pivot Table instance.
      let pivotObj = ((this as any).$refs.pivotview).ej2Instances;
      // Here, we initialize a variable to determine the specific row index.
      let rowIndex = -1;
      // Array to store selected row indices
      let selectedRows = [];
      // Iterate through the pivotValues property of the Pivot Table instance
        for (var i = 0; i < pivotObj.pivotValues.length; i++) {
            for (var j = 0; pivotObj.pivotValues[i] != null && j < pivotObj.pivotValues[i].length; j++) {
                if (pivotObj.pivotValues[i][j] && pivotObj.pivotValues[i][j].axis === 'row') {
                    // Here we increment the row index variable if the axis of the current cell is 'row'.
                    rowIndex++
                    if (pivotObj.pivotValues[i][j].valueSort &&
                        pivotObj.pivotValues[i][j].valueSort.levelName.includes('France')) {
                        // Here we push the `rowIndex` to `selectedRows` array
                        selectedRows.push(rowIndex);
                    };
                }
           }
        }
        // Select the specific rows based on the rowIndex
        pivotObj.grid.selectionModule.selectRows(selectedRows);
     },
  }
}
</script>

The following GIF image portrays the results of the code snippet mentioned above:

GIF

For a practical demonstration, please refer to the sample of stackblitz.

Conclusion

By following the steps outlined above, you can easily add the functionality to select specific rows in a Vue Pivot Table via an external button.

You can also refer to our Vue Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!