Grouped rows are indented inconsistentantly

[Jumpei Yamauchi]

We have reports that have grouping at row level. 

Noticed that some items in the grouping seem to have inconsistent indentation applied. What could be causing this behavior? (Please refer to the indent of the second level grouping below)

Configuration of the control (we try to determine the control height dynamically)

dataSourceSettings={constants.sfPivotDefaultJSON.dataSourceSettings as IDataOptions}

                width={'100%'}

                height={`${UtilityHelper.calcCanvasHeight()}`}                

                showFieldList={canEditReport()}

                exportAllPages={false}

                maxNodeLimitInMemberEditor={50}

                showGroupingBar={canEditReport()}

                allowGrouping={true}

                enableVirtualization={true}

                allowDataCompression={true}

                enableValueSorting={true}

                allowDeferLayoutUpdate={true}

                allowDrillThrough={true}

                gridSettings={{

                    columnWidth: 120,

                    allowSelection: true,

                    rowHeight: 36,

                    selectionSettings: {

                    mode: 'Cell',

                    type: 'Multiple',

                    cellSelectionMode: 'Box',

                    },

                }}

                allowExcelExport={true}

                allowNumberFormatting={true}

                allowConditionalFormatting={true}

                allowPdfExport={true}

                showToolbar={true}

                allowCalculatedField={true}

                displayOption={{ view: 'Both' }}

                toolbar={toolbarOptions}

                newReport={newReport.bind(this)}

                renameReport={renameReport.bind(this)}

                removeReport={removeReport.bind(this)}

                loadReport={loadReport.bind(this)}

                fetchReport={fetchReport.bind(this)}

                saveReport={saveReport.bind(this)}

                toolbarRender={beforeToolbarRender.bind(this)}

                fieldListRefreshed={onFieldListRefresshed.bind(this)}

                actionComplete={onActionComplete.bind(this)}

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jumpei,

We have checked the reported issue and we are unable to reproduce the reported issue at our end. However, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/react-gbtuz8-qqkeen?file=index.js

Output screenshot:

However, If the problem persists, please reproduce it in the provided sample and revert to us (or) send your runnable sample with the data source that reproduces the problem. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible.

Regards,

Angelin Faith Sheeba.

[Jumpei Yamauchi]

Thank you for your reply, Angelin.

Please refer to the following sample where a date field is added to the data source. 

Wikqda (forked) - StackBlitz

There are no indentations for the field from the level above (Order Source)

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jumpei,

We have checked the reported issue in the provided sample and we found that the reported issue is caused by formatting the date field using “skeleton” property, which contains special characters such as Dot(.). We'd like to let you know that we used Dot(.) as the default separator to identify the header levels  in our pivot table, which caused the reported problem. To solve this issue, use the "HeaderDelimiter" property in the "ValueSortSettings" option to change the default separator value to any delimiters string. Please see the code example below.

Code example:

let dataSourceSettings = {

  valueSortSettings: { headerDelimiter: ' ## ' },

};

Output screenshot:

Meanwhile, we have modified your sample for your reference.

Sample: https://stackblitz.com/edit/react-gbtuz8-w6atme?file=index.js,index.html

Regards,

Angelin Faith Sheeba.