Column Header 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

Reply | Reply with quote

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.

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

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149570	Dec 1,2019 12:21 AM UTC	Dec 3,2019 01:14 PM UTC	Vue	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US