Column menu symbol on column header text (bootstrap4)

[Laurin S]

Hi,

using the bootstrap4 style, the column menu symbol (3 dots) is showed over the column header text, when the column width is very small.

1) Sometimes there is really much space left (like 2nd image, 3th column), and sometimes all icons (arrow, sorting number, ...) are displayed on the text...

2) In addition: I would be nice, if the column menu symbol would change (other icon or at least other color), when a column filter is active in this particular column.

[Manivel Sellamuthu]

Hi Laurin, 

Greetings from Syncfusion support. 

Query: the column menu symbol (3 dots) is showed over the column header text, when the column width is very small. Sometimes there is really much space left (like 2nd image, 3th column), and sometimes all icons (arrow, sorting number, ...) are displayed on the text... 

 

By default the grid headerText width will be based on the width defined in the grid columns. This is the default behavior of the html. So when the column width is small the headertext will be shrinked based on the defined width, so while performing sorting and multi-sorting the icons will be displayed on the headerText due to the insufficient space.  

So we suggest you to provide the proper width for the Grid column or use autoFitColumns method of the Grid which resizes the column to fit the widest cell’s content without wrapping.  

Documentation for autoFitColumns: https://ej2.syncfusion.com/react/documentation/grid/columns/#autofit-specific-columns 

Query: In addition: I would be nice, if the column menu symbol would change (other icon or at least other color), when a column filter is active in this particular column. 

We already do have support for this requirement. While filtering the a particular column the column menu color will be changed to another color.  We have prepared sample based on this for your convenience.Please refer the below sample and screenshot for more information. 

Sample: https://stackblitz.com/edit/react-164520-sample?file=index.js 

In the below code example we have filtered the customer name column through column menu. I 

n below screenshot you can see that customer name  column’s column menu is changed to other color. 

 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[Laurin S]

Thanks for your quick reply. Your response is completely clear.

However, I'm not fully convinced about your answer to question 2:

2) Query: In addition: I would be nice, if the column menu symbol would change (other icon or at least other color), when a column filter is active in this particular column. 

There is a small change in the color of the three dots. However, I think its's absolutely not clear visible, that a filter is active (also probably another symbol, like a filter, would be clearer to the user). Can you spot the active filter in the following screenshot?

(... even if this image is not super-sized)

[Manivel Sellamuthu]

Hi Laurin, 

 

Thanks for your update. 

 

Query: There is a small change in the color of the three dots. However, I think its's absolutely not clear visible, that a filter is active (also probably another symbol, like a filter, would be clearer to the user). 

 

By default while filtering the column with column menu we will change the color of the column menu icon. However based on your requirement you can indicate the filtered status of the column by using the ‘e-filtered’ class. Please refer the below code example and sample for more information. 

 

import { render } from 'react-dom'; 

import './index.css'; 

import * as React from 'react'; 

import { GridComponent, ColumnsDirective,parentsUntil, ColumnDirective, Resize, Group, Sort, ColumnMenu, Filter, Page, Inject } from '@syncfusion/ej2-react-grids'; 

 

export class ColumnMenuSample extends SampleBase { 

. . . 

 

    dataBound (args) { 

let headerCells = this.gridInstance.getHeaderContent().querySelectorAll('.e-headercell'); 

if (headerCells.length) { 

for (let i=0;i<headerCells.length; i++) { 

  let filtered = headerCells[i].querySelector('.e-filtered'); 

  if (filtered) { 

// here you can get the headerCell element which is filtered 

  let filteredHeaderCell = parentsUntil(headerCells[i], 'e-headercell'); 

  filteredHeaderCell.querySelector('.e-headertext').classList.add('e-colfiltered'); 

  } 

  else { 

    let headerCell = parentsUntil(headerCells[i], 'e-headercell'); 

  headerCell.querySelector('.e-headertext').classList.remove('e-colfiltered'); 

  } 

} 

} 

    } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent id='gridcomp' dataBound={this.dataBound.bind(this)} dataSource={orderDetails} allowPaging={true}  

ref={grid=>this.gridInstance=grid} allowSorting={true}  allowFiltering={true} allowMultiSorting={true} showColumnMenu={true} 

 groupSettings={this.groupOptions} filterSettings={this.filterSettings}> 

                        <ColumnsDirective> 

. . . 

                        </ColumnsDirective> 

                        <Inject services={[Resize, Group, Sort, ColumnMenu, Filter, Page]}/> 

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

.e-colfiltered { 

  color: #317ab9; 

} 

 

In the above sample we changed the headertext of the filtered column for demonstration. You can indicate the filtered status of the column as per your requirement. 

 

Sample: https://stackblitz.com/edit/react-164520-sample?file=index.js 

 

Please let us know if you need further assistance. 

 

Regards, 

Manivel