I have a grid populated with data and i want to show only 3 or 2 columns and hide rest of columns cause the grid goes very wide. when the mouse is hovered over a row i want to show all the columns of that row as as popup /tooltip form.

Please help me with this. I searched a lot and only found out Editable popup and with button click not with hover.

function PopulateGrid() {
    $("#recentNews").kendoGrid({

        columns: [
            { field:      'Date', title: 'Date', width: 80,
                template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
            },
            { field:      'TradeTime', title: 'Time', width: 60,
                template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
            },

            { field: 'Title', title: 'Description', width: 200 },
            { field: 'Country', title: 'Country', width: 40 },
            { field: 'Economy', title: 'Economoy', width: 40 }

        ],

        dataSource: {
            transport: {
                read: {
                    url:      'Home/GetNews',
                    dataType: "json",
                    type:     "POST"
                }
            },
            schema:    {
                data:  function (data) {
                    return data.data;
                },
                total: function (data) {
                    return data.total;
                }
            },
            pageSize:  100

        },
        //            change: onChange,
        //          dataBound: onDataBound,
        dataBound:  HoverOnGrid,
        pageable:   true,
        sortable:   true,
        scrollable: true,
        height:     565,
        width:      2000
    });
}

I have a grid populated with data and i want to show only 3 or 2 columns and hide rest of columns cause the grid goes very wide. when the mouse is hovered over a row i want to show all the columns of that row as as popup /tooltip form.

Please help me with this. I searched a lot and only found out Editable popup and with button click not with hover.

function PopulateGrid() {
    $("#recentNews").kendoGrid({

        columns: [
            { field:      'Date', title: 'Date', width: 80,
                template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
            },
            { field:      'TradeTime', title: 'Time', width: 60,
                template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
            },

            { field: 'Title', title: 'Description', width: 200 },
            { field: 'Country', title: 'Country', width: 40 },
            { field: 'Economy', title: 'Economoy', width: 40 }

        ],

        dataSource: {
            transport: {
                read: {
                    url:      'Home/GetNews',
                    dataType: "json",
                    type:     "POST"
                }
            },
            schema:    {
                data:  function (data) {
                    return data.data;
                },
                total: function (data) {
                    return data.total;
                }
            },
            pageSize:  100

        },
        //            change: onChange,
        //          dataBound: onDataBound,
        dataBound:  HoverOnGrid,
        pageable:   true,
        sortable:   true,
        scrollable: true,
        height:     565,
        width:      2000
    });
}

• javascript
• jquery
• kendo-ui

• Did you consider using KendoUI grid detailTemplate instead of hoover? – OnaBai Commented Dec 28, 2012 at 23:42

1 Answer 1

There are two separate questions about what you are trying to implement:

1. Bind hover to the Grid rows (easy).
2. Generate a popup / tooltip that shows the rest of the columns (easy but requires some amount of coding).

Since it seems that you have already defined a function called HoverOnGrid lets write it as:

function HoverOnGrid() {
    $("tr", "#recentNews").on("mouseover", function (ev) {
        // Invoke display tooltip / edit row
        var rowData = grid.dataItem(this);
        if (rowData) {
            showTooltip(rowData);
        }
    });
}

where grid is:

var grid = $("#recentNews").kendoGrid({
    ...
}).data("kendoGrid";

Now, the tricky question, how to show a tooltip / popup... There is no predefined way of doing it, you should do it by yourself. The closes that you can get is defining HoverOnGrid as:

function HoverOnGrid() {
    $("tr", "#recentNews").on("click", function (ev) {
        grid.editRow(this);
    })
}

and the Grid initialization say:

 editable:   "popup",

But this opens a popup but with fields on edit mode (something that you can hack defining in the dataSource.schema.model that all fields are not editable:

model: {
    fields: {
        Date:      { editable: false },
        TradeTime: { editable: false },
        Title:     { editable: false },
        Country:   { editable: false },
        Economy:   { editable: false }
    }
}

But it still shows update and cancel buttons in the popup.

So, my remendation is writing a piece of code that creates that tooltip.

EDIT: For hiding the tooltip you should first intercept the mouseout event:

$("tr", "#recentNews").on("mouseout", function (ev) {
    // Hide Tooltip
    hideTooltip();
});

where hideTooltip might be something as simple as:

var tooltipWin = $("#tooltip_window_id").data("kendoWindow");
tooltipWin.close()

assuming that you are always using the same id for the tooltip (in this example, tooltip_window_id).