Kendo Grid, Show bootstrap popover

Introduction

This tip shows how to show the bootstrap popover properly for kendo grid cells.

Background

The popover / tooltip for kendo grid cells get cut off normally.

Prerequisites

You should at least have the knowledge of mentioned to get an understanding from this tip:

• Kendo grid
• Bootstrap popover

Using the Code

At times, we come across a situation where we don't have enough space in kendo grid cell while the text is lengthy. In this situation, we can show the ellipses (read the tip) to restrict the text to grid cell but we also want to show the complete text to the user (i.e., if he clicks on the cell).

If we add the bootstrap popover to the kendo grid cell, it doesn't show properly.

This can be overcome if we add the following CSS:

/*to show the content of the tooltip / popover inside the kendo grid*/
    .k-grid-content {
        overflow: visible !important;
    }

After applying the above mentioned CSS, the popover starts showing alright but another issue is generated, i.e., the right header column padding seems disturbed.

To overcome this, we need to add the following CSS:

/*to hide the padding at the right which looks strange after the overflow visible*/
    .k-grid-header {
        padding-right: 0px !important;
    }

The final output after applying the CSS is shown below: