No records to display is not displayed when using Group BY in Grid.

[Viji Palanisamy]

No records to display is not displayed when using Group BY in Grid.When removing group by it works as expected. SO let us know how to get this display message when it has Group By and empty data.

[Rajapandi Ravi]

Hi Viji,

Greetings from Syncfusion support

After reviewing your query, we could see that No Records to display message was displayed at your end. Based on your query we have prepared a sample by applied grouping with empty data and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below sample and screenshot for more information.

Sample: https://stackblitz.com/edit/react-bedr33-9yx25o?file=index.js

Screenshot:

If you still face the issue, please share the below details that would be helpful for us to provide better solution.

1)                Share your complete Grid rendering code, we would like to check your implementation.

2)                Share your Syncfusion package version.

3)                If possible, please share any issue reproducible sample or try to reproduce the issue with our shared sample.

Regards,

Rajapandi R

[Viji Palanisamy]

1. I am using version20.4.8.
2. I am still not able to get that message. When I comment out the below line. I am able to get that No records to display. So help me to get how it can be fixed. 
groupSettings={{
                    showDropArea: false,
                    columns: ['studentCode'],
                    showGroupedColumn: true,
                    captionTemplate: '<span>${studentDetail(data)}</span>',
                }}

I have attached my Grid rendering code below.

render() {

        return (

            <TooltipComponent ref={t => (tooltip = t)} target=".e-headertext" beforeRender={this.beforeRender}>

                <GridComponent

                    id={'grid' + this.props.id}

                    gridLines={this.props.gridLines}

                    ref={g => {

                        this.setUpGridRef(g)

                    }}

                    dataSource={[]}

                    allowFiltering={this.props.allowFiltering}

                    filterSettings={{type: 'Menu'}}

                    allowSorting={this.props.allowSorting}

                    allowPdfExport={this.props.allowPdfExport}

                    allowExcelExport={this.props.allowExcelExport}

                    allowPaging={this.props.allowPaging}

                    showColumnChooser={true}

                    toolbar={this.props.toolbarOptions ? this.props.toolbarOptions : toolbarOptions}

                    showColumnMenu={this.props.showColumnMenu}

                    toolbarClick={this.toolbarClick}

                    height={this.props.height}

                    allowTextWrap={true}

                    allowResizeToFit={true}

                    allowGrouping={this.props.allowGrouping}

                    groupSettings={this.props.groupSettings}

                    editSettings={this.props.editSettings}

                    sortSettings={this.props.sortSettings}

                    allowMultiSorting={true}

                    enableVirtualization={this.props.enableVirtualization}

                    actionBegin={this.actionBegin}

                    ///pageSettings={{pageSize: 50}}

                    locale="en-AU"

                    childGrid={this.getChildGridOptions()}

                    rowSelected={this.rowSelected}

                    selectionSettings={{type: 'Multiple', persistSelection:true }}

                    beforeBatchSave={this.beforeBatchSave}

                    created={this.gridCreated}

                    pdfExportComplete={this.pdfExportComplete}

                    excelExportComplete={this.excelExportComplete}

                    pdfHeaderQueryCellInfo={this.pdfHeaderQueryCellInfo}

                    dataBound={this.dataBound}

                    queryCellInfo={this.props.queryCellInfo}

                    allowSelection={this.props.allowSelection}

                    enableHover={this.props.enableHover}

                    pageSettings={this.props.itemsPerPage}

                    allowRowDragAndDrop={this.props.allowRowDragAndDrop}

                    allowReordering={this.props.allowReordering}

                    allowResizing={true}

                    autoFit={true}

                >

                    <ColumnsDirective>

                        {this.props.columns &&

                            this.props.columns.map(col => {

                                return (

                                    <ColumnDirective

                                        key={col.id}

                                        field={col.id}

                                        headerText={col.label}

                                        visible={col.visible}

                                        type={col.type}

                                        format={col.format}

                                        textAlign={col.textAlign}

                                        width={col.width}

                                        showInColumnChooser={col.showInColumnChooser}

                                        editType={col.editType}

                                        allowEditing={col.allowEditing}

                                        isPrimaryKey={col.isPrimaryKey}

                                        allowGrouping={col.allowGrouping}

                                        allowFiltering={col.allowFiltering === false ? false : true}

                                    />

                                )

                            })}

                    </ColumnsDirective>

                    {this.props.columnsAggregate && (

                        <AggregatesDirective>

                            <AggregateDirective>

                                <AggregateColumnsDirective>

                                    {this.props.columnsAggregate.map(aggregate => {

                                        if (aggregate.type === 'Custom') {

                                            return (

                                                <AggregateColumnDirective

                                                    key={aggregate.field}

                                                    field={aggregate.field}

                                                    type={aggregate.type}

                                                    format={aggregate.format}

                                                    customAggregate={aggregate.customCalculation}

                                                    // groupCaptionTemplate={this.headerCustomTemplate} This makes export take too long, check with higher version (>19.4)

                                                />

                                            )

                                        } else {

                                            return (

                                                <AggregateColumnDirective

                                                    key={aggregate.field}

                                                    field={aggregate.field}

                                                    type={aggregate.type}

                                                    format={aggregate.format}

                                                    // groupCaptionTemplate={this.headerSum} This makes export take too long, check with higher version (>19.4)

                                                />

                                            )

                                        }

                                    })}

                                </AggregateColumnsDirective>

                            </AggregateDirective>

                        </AggregatesDirective>

                    )}

                    <Inject

                        services={[

                            DetailRow,

                            PdfExport,

                            ExcelExport,

                            Sort,

                            Grid,

                            Edit,

                            Filter,

                            Search,

                            Toolbar,

                            ColumnMenu,

                            ColumnChooser,

                            VirtualScroll,

                            Group,

                            Aggregate,

                            Page,

                            Resize,

                            Reorder,

                        ]}

                    />

                </GridComponent>

            </TooltipComponent>

        )

    }

[Rajapandi Ravi]

Viji,

As per your shared information, we have prepared a sample with 20.4 version as per your application structure and tried to reproduce your reported problem, but it was unsuccessful. Please refer the below modified code example and sample for more information.

 

const groupOptions = { showDropArea: true, showGroupedColumn: true, columns: ['FIELD1'], captionTemplate: '<span>${studentDetail(data)}</span>', };

 

window.studentDetail = function(args) {

        return 'Field: ' + args.key + '  ' + 'Count: ' + args.count;

    }

 

<GridComponent dataSource={[]} enableVirtualization={true} groupSettings={groupOptions} allowRowDragAndDrop={true} enableColumnVirtualization={true} height={400} ref={g => grid = g} dataBound={hide.bind(this)} toolbar={toolbarOptions} allowGrouping={true} editSettings={editSettings}>

                    <ColumnsDirective>

                        <ColumnDirective field='SNo' headerText='S.No' width='140' validationRules={validationSno} isPrimaryKey={true}></ColumnDirective>

                       .  .  .  .  .   .  .  .  .

                       .  .  .  .  .   .  .  .  .

                       .  .  .  .  .   .  .  .  .

                    </ColumnsDirective>

                    <Inject services={[VirtualScroll, RowDD, Group, Toolbar, Edit]}/>

                </GridComponent>

 

Sample: https://stackblitz.com/edit/react-yze9kl-aqvshq?file=index.js,package.json

Screenshot:

If you still face the issue, please share any issue reproducible sample or try to reproduce the issue with our shared stackblitz sample.

[Viji Palanisamy]

I fixed the issue and it work as expected. Thanks

[Rajapandi Ravi]

Viji,

We are happy to hear that you have found the solution at your end.

Please get back to us if you need any other assistance.