How to set clipMode only for a column header, but not for the data cell?

[gabor]

I am usingclipMode="EllipsisWithTooltip" for my columns, which have effect for both the column header and the column data cell itself.

Is there any way to have clipMode="EllipsisWithTooltip" for a particular column in its header, but not for the column data cell itself.?

[Thiyagu Subramani]

Hi Gabor, 

Thanks for contacting Syncfusion forum. 

By default in EJ2 Grid the clipMode is column level property so, it effect for both the column header and the column data cell. Based on your requirement we suspect you want show tooltip for only headercell not for column’s data cells. In this requirement we suggest to use custom tooltip to achieve this requirement. Please refer to the below code and screenshot. 

In this below code we have added custom class for required column using customAttribute and using mouseover event we have defined tooltip for required headercell with the help of tooltip’s target (e.-headercell.e-custom’) property. 

<ejs-tooltip id="Tooltip" target=".e-headercell.e-custom"> 

    <e-content-template> 

        <ejs-grid id="Grid" width="600" allowPaging="true" dataSource="@ViewBag.DataSource"> 

            <e-grid-columns> 

. ..  .  

                <e-grid-column field="CustomerID" headerText="Customer ID (Tooltip)" customAttributes=@(new { @class="e-custom" } ) width="50"></e-grid-column> 

                . . . . . 

            </e-grid-columns> 

        </ejs-grid> 

    </e-content-template> 

    </ejs-tooltip> 

        <script> 

            document.getElementById('Grid').addEventListener('mouseover', function (args) { 

                if (args.target.classList.contains('e-custom'))  { 

                    var tooltip = (document.getElementById('Tooltip')).ej2_instances[0]; 

                    tooltip.content = args.target.innerText; 

                } 

            }); 

        </script> 

Screenshot:  

 

Sample link: https://www.syncfusion.com/downloads/support/forum/158997/ze/WebApplication81810111249 

Please get back to u, if you need any further assistance. 

Regards, 

Thiyagu S.