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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Column Header Data Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

149570 Dec 1,2019 12:21 AM UTC Dec 3,2019 01:14 PM UTC Vue 3
loading
Tags: Data Grid
William Morgenweck
Asked On December 1, 2019 12:21 AM UTC

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 [Syncfusion]
Replied On December 2, 2019 07:26 AM UTC

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
Replied On December 2, 2019 01:05 PM UTC

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 [Syncfusion]
Replied On December 3, 2019 01:14 PM UTC

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> 
</style> 


     
 


Please get back to us if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon