We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How could I disable default behavior for all cells and for special cells in React Grid

Hello, I have a question cause didn't find answer inside documantation.
By default grid cell has a tooltip on hover, how could I disable default behavior for all cells and for special cells? To avoid misunderstanding, I gonna attach the screenshot with tooltip what am i talking about


Attachment: a9c8f98da740c1e5_18f6991c.rar

1 Reply 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team April 16, 2021 04:17 AM

Hi Denys, 
 
Thanks for contacting Syncfusion support. 
 
Query:  how could I disable default behavior for all cells and for special cells? 
 
By analyzing your screenshot, you don’t want to show tooltip on particular (Icons) column in Grid. You can achieve your requirement by using “not” selector in Tooltip component’s target property. 
 
 
We have prepared a sample with this. In that sample, we added a custom class to that (Icon) column by using customAttribute property. Which is used to add custom CSS class on each cell in that column. 
 
 
You can avoid rendering tooltip on that particular column by using not selector on this custom class (“tempcolicons”) in the Tooltip’s target property. Please refer to the below code example and sample for your reference. 
 
[index.js] 
 
export class ColumnTemplate extends SampleBase { 
  constructor() { 
    super(...arguments); 
  } 
  tooltip; 
  gridColTemplate(props) { 
    return <span className="e-icons coldeleteicon" />; 
  } 
  beforeRender(args) { 
    if (args.target.closest("td")) { 
      this.tooltip.content = args.target.innerText; 
    } 
  } 
  render() { 
    return ( 
          <TooltipComponent 
            ref={t => (this.tooltip = t)} 
            target=".e-rowcell:not(.tempcolicons)" 
            beforeRender={this.beforeRender.bind(this)} 
          > 
            <GridComponent 
              dataSource={hierarchyOrderdata} 
              width="650" 
              height="359" 
            > 
              <ColumnsDirective> 
                --- 
                <ColumnDirective 
                  headerText="" 
                  width="70" 
                  customAttributes={{ class: "tempcolicons" }} 
                  template={this.gridColTemplate.bind(this)} 
                /> 
              </ColumnsDirective> 
            </GridComponent> 
          </TooltipComponent> 
    ); 
  } 
} 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon