Column Header Data Grid

[William Morgenweck]

I'm using 

 queryCellInfoEvent: function(args) {

      let arr = args;

      if (args.column.field === "CancerRelated") {

        let tooltip = new Tooltip(

        {           

            content: "Cancer Related"

          },

          args.cell

        );

      }

    },

with 

 <ejs-grid          

                  id="reportGrid"

                  ref="reportGrid"

                  :editSettings="editSettings"

                  :allowSelection="true"              

                  :dataSource="articles"              

                  :queryCellInfo="queryCellInfoEvent"

                >

and this give the tooltip for every cell.  How can I make it so it is shown only for the Column Header

Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi William,  

Before proceeding with this, please confirm us the following things.  

1. Would you like to show tooltip for the header or content cells?
2. Would you like to show tooltip for particular column alone ?

Regards,  

Seeni Sakthi Kumar S 

[William Morgenweck]

Thank you- 

I would like to show the tooltip for the column header.  Currently the column is a checkbox and the text is an abbreviation. of CR I would like that when the tooltip is shown it would say "Cancer Relevant" and only that column

[Seeni Sakthi Kumar Seeni Raj]

Hi William, 

Greetings from Syncfusion support. 

We could see that you want set the tooltip only in particular headers checkbox column. We have created the sample with your requirement. In that we have add the custom class for the particular column using customAttributes and binding this class with tagname ‘TH’ as target for the tooltip and set content as “Cancer Relevant”. Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <ejs-tooltip 

      id="tooltip" 

      position="BottomCenter" 

      target="th.tooltipcolumn" 

      content="Cancer Relevant"  // here you can change the content as you want 

    > 

      <ejs-grid ref="grid" :dataSource="data" height="315"> 

        <e-columns> 

          <e-column 

            type="checkbox" 

            :allowFiltering="false" 

            :allowSorting="false" 

            :customAttributes="{class: 'tooltipcolumn'}" 

            width="60" 

          ></e-column> 

          <e-column field="OrderID" headerText="Order ID " textAlign="Right" width="140"></e-column> 

          <e-column 

            field="CustomerID" 

            headerText="Customer ID" 

            :disableHtmlEncode="false" 

            width="120" 

          ></e-column> 

          <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="80"></e-column> 

          <e-column 

            field="OrderDate" 

            headerText="Order Date" 

            textAlign="Right" 

            format="yMd" 

            type="date" 

            width="120" 

          ></e-column> 

        </e-columns> 

      </ejs-grid> 

    </ejs-tooltip> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

import { TooltipPlugin } from "@syncfusion/ej2-vue-popups"; 

Vue.use(TooltipPlugin); 

Vue.use(GridPlugin); 

export default { 

  data() { 

    return { 

      data: data 

    }; 

  } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

     

 

Sample : https://codesandbox.io/s/vue-b6ppk 

Please get back to us if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S