need to add a toggle button inside the pivot table

[Het]

2)expected result 1)getting result

1) Getting Result img,

2)Expected Result

-----------------

here I am trying to get expected result but i am not finding any solution to get toggle button for each and every field like I showed in image no.1

view code - 

@using Syncfusion.EJ2

@model UserManagement.Data.Dto.RoleDto

<form action="AddRole" method="post">

    <div class="e-float-input e-input-group">

        @Html.EJS().TextBox("Name").Placeholder("Enter RoleName").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

    </div>

    <div>

        <ejs-pivotview id="PivotView1" height="300">

            <e-datasourcesettings dataSource="@ViewBag.RoleClaims" [toolbar]="toolbarOptions">

                <e-rows>

                    <e-field name="Page"></e-field>

                </e-rows>

                <e-columns>

                    <e-field name="Action" caption="Year"></e-field>

                </e-columns>

                <e-values>

                    <e-field name="ActionId" caption="Units Sold"></e-field>

                    <e-field name="ToggleField" showNoDataItems="true"></e-field>

                </e-values>

            </e-datasourcesettings>

        </ejs-pivotview>

    </div>

    <div>

        @Html.EJS().Button("submit").Content("Submit").CssClass("e-flat").Render()

    </div>

    <script>

        // Handle click event of the toggle button

        document.getElementById('toggleButton').onclick = function () {

            var pivotObj = document.getElementById('PivotView1').ej2_instances[0];

            var field = pivotObj.engineModule.fieldList['ActionId'];

            field.caption = field.name === "ActionId" ? "Toggle" : "ActionId";

            pivotObj.engineModule.updateDataSource();

        };

        // Create the Pivot Table component

        var pivotTable = new ej.pivotview.PivotView({

            dataSourceSettings: {

                dataSource: @Html.Raw(Json.Serialize(ViewBag.RoleClaims))

                    }

        });

        pivotTable.appendTo('#PivotView1');

    </script>

</form>

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Het,

We are validating your query at our end and we will provide further details within two business days (June 2, 2023).

Regards,

Angelin Faith Sheeba

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Het,

You can customize the pivot table cells to fulfil your needs by utilizing the cellTemplate property. Using the cellTemplate option and the dataBound event, we have inserted toggle buttons with checked state for cells with values greater than 100, toggle buttons with unchecked state for cells with values less than 100, and no toggle buttons for empty cells.

Code example:

<ejs-pivotview id="pivotview" CellTemplate="#celltemplate" dataBound="dataBound">

</ejs-pivotview>

<style>

    // Hide the existing values using the CSS here.

    .e-valuescontent .e-cellvalue{

        display: none !important;

    }

</style>

 

<script id="celltemplate" type="text/x-template">

    ${getCellContent(data)}

</script>

 

<script type="text/javascript">

    let checkedEleCount = 0;

    let uncheckedEleCount = 0;

    window.getCellContent = function (e) {

        var template;

        // Create the element to the value cells in which values greater than 100.

        if (e && e.targetCell.className.indexOf('e-valuescontent') > -1 && e.cellInfo.actualValue > 100) {

            checkedEleCount++;

            template = `<div id=checked${checkedEleCount} class="pv-icons checked-btn"></div>`;

        } // Create the element to the value cells in which values lesser than 100.

        else if (e && e.targetCell.className.indexOf('e-valuescontent') > -1 && e.cellInfo.actualValue < 100) {

            uncheckedEleCount++;

            template = `<div id=unchecked${uncheckedEleCount} class="pv-icons unchecked-btn"></div>`;

        }

        else {

            template = '';

        }

        return template;

 

    };

   

    function dataBound() {

        // Bind the toogle button component to the element which is created using cellTemplate.

        for (var i = 0; i <= checkedEleCount; i++) {

            var switchObj = new ejs.buttons.Switch({ checked: true });

            switchObj.appendTo('#checked' + i);

 

        }

        for (var j = 0; j <= uncheckedEleCount; j++) {

            var switchObj = new ejs.buttons.Switch({});

            switchObj.appendTo('#unchecked' + j);

        }

    }

</script>

Output screenshot:

Please refer the below documentation to know more about cell template.

Document : https://ej2.syncfusion.com/aspnetcore/documentation/pivot-table/row-and-column#cell-template

Meanwhile, we have prepared a sample for your reference. Please find it from the below attachment.

Regards,

Angelin Faith Sheeba.

Attachment: WebApplication2_504f97bb.zip