Show tooltips on Kendo Grid

Hi,

Today I got an requirement to show the tooltips on each column of the grid. I was able to achieve it very easily by adding the below code but the tooltip was showing with black background. I had to invest sometime to understand the how styling for tooltip works. We can use CSS like below.

        $("#grid").kendoTooltip({
            filter: "td:nth-child(2)", //this filter selects the second column's cells
            position: "right",
            content: function (e) {
                var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
                var content = dataItem.Text;
                return content;
            }
        }).data("kendoTooltip");

CSS

.k-tooltip {
            background: #ffffff !important;
            text-shadow: 0 0 black;
            color: black !important;
            box-shadow: 0 0 0 1px #ccc !important;
        }

Hope this helps.

—
Happy Coding,
Gopinath.

Set fixed height to Kendo Grids

Hi,

We all know how great Kendo Controls works and the most famous one among all the controls is Grid.

Today l got an opportunity to work on Kendo Grid and my requirement was to set the Fixed height to the grid irrespective of the rows. Somehow I didn’t get the below piece of the code to make the grid fixed easily and adding it here so that it would help others.

Just add the below to your CSS and it works.

.k-grid .k-grid-content {
            min-height: 75%; /*Adjust Percentage as per your requirement*/
            max-height: 75%; /*Adjust Percentage as per your requirement*/
        }

Hope this helps.

—
Happy Coding
Gopinath