ejGrid Cell tooltip

[Bruno Rodrigues]

Hi,

I have an ejGrid that has an autocomplete cell. I would to add a tool tip on that cell is that possible?

Each record of that table should show a tooltip on mouse hover(in that specific cell)

[Madhu Sudhanan P]

Hi Bruno,

Thanks for using Syncfusion products.

Essential Grid don’t have in-built support to show tooltip on grid cell content but we can achieve your requirement by rendering the tooltip in the dataBound and the queryCellInfo events. To do so please follow the below steps. For now we have used the Bootstrap Tooltip for demonstration. You can use the below steps to use your desired tooltip with the grid.

1. Specify the title attribute of the cell in the queryCellInfo event.

$("#Grid").ejGrid({

. . . . . . .  .

queryCellInfo: function (args) {

                  

                    $(args.cell).attr({

                        "data-toggle": "tooltip",

                        "data-container": "body",

                        "title": args.data[args.column.field]

                    });

                                     
                },

. . . . . .  ..
});

2. Render the tooltip in the dataBound event as follows.

$("#Grid").ejGrid({

. . . . . . .  .

dataBound: function (args) {

          $("[data-toggle=tooltip]").tooltip();

}
. . . . . .  ..
});

For your convenience we have also created a simple sample with the above code snippet. Please find the sample from the below link.

http://jsplayground.syncfusion.com/c5hykvfh

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P

[Bruno Rodrigues]

Madhu Sudhanan P,

Thank you very much for your prompt answer. It work as expected.

I have one more question. 

Depending on field value this --> "title": args.data[args.column.field] must have specific values.

I will give an example.

dataSource [{id:1, name: Portugal, tip: "Main Language - Portuguese, Inhabitants: 10.46kkk},....]

I would like, if possible, that the text displayed was filled by the values of the field tip of each country of my datasource.

Thank you in advance.

Bruno Rodrigues

[Madhu Sudhanan P]

Hi Bruno,

Thanks for your update.

Query: “I would like, if possible, that the text displayed was filled by the values of the field tip of each country of my datasource”

From the query, we understood that you want to display the corresponding tip field value in the tooltip. If so we can simply assign the tip value from the args.data to the title attribute as follows.

$("#Grid").ejGrid({

             . . . . . . .  .

            queryCellInfo: function (args) {                  

                $(args.cell).attr({

                    "data-toggle": "tooltip",

                    "data-container": "body",

                    "title": args.data["tip"]

                });                                     

            },

            . . . . . .  ..
});

Now while hovering on each cell, the corresponding tip field value will be display in the tooltip text.

Please let us know if we misunderstood your requirement or you have any queries.

Regards,
Madhu Sudhanan P

[Mukesh]

Hi,

when the grid is in modal window tooltip is not displaying. Is there any specific properties I have to use? please let me know. 

function _initdishesDtlModal(options) {

if (_.isNull(options.dtlDishesWindow)) { return; }

options.dtlDishesWindow.ejDialog(

{

enableModal: true,

enableResize: false,

width: 800,

containment: ".clshomeContainer",

showOnInit: false,

title: "Dishes"

});

options.dtlDishesDialog = options.dtlDishesWindow.data("ejDialog");

if (!_.isNull(options.dtlDishesDialog)) {

_loadRestaurantDishesDtlGrid(options);

}

}

options.gridRestaurantDtlDishes.ejGrid({

dataSource: _dishesStubData(options),

allowPaging: true,

isResponsive: true,

allowSorting: true,

allowMultiSorting: true,

allowFiltering: true,

gridLines: ej.Grid.GridLines.Horizontal,

filterSettings: { showFilterBarStatus: false, statusBarWidth: 500 },

allowResizing: true,

allowScrolling: true,

scrollSettings: { width: '100%', height: '100%' },

pageSettings: { pageSize: 10 },

enableHeaderHover: true,

filterSettings: { filterType: "menu" },

allowTextWrap: false,

columns: [

{

field: "ID", isPrimaryKey: true, headerText: "ID", textAlign: ej.TextAlign.Right, width: 20, visible: false

},

{ field: "Name", headerText: 'Name', width: 100 },

{ field: "Cusines", headerText: 'Cusines', width: 100 },

{ field: "MealType", headerText: 'Meals & Snacks', width: 100 }

],

queryCellInfo: function (args) {

//Add attributes to cells in queryCellInfo

$(args.cell).attr({

"data-toggle": "tooltip",

"data-container": "body",

"title": args.data[args.column.field]

});

},

dataBound: function (args) {

//Render tooltip in dataBound event.

$("[data-toggle=tooltip]").tooltip();

}

});

Thanks in advance. 

[Sathyanarayanamoorthy Eswararao]

Hi Mukesh, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are unable to reproduce the mentioned issue on our end. We have prepared a sample with the same requirement which can be found below. 

Sample: http://jsplayground.syncfusion.com/xnibh1xb 

We already have an inbuilt support for the tooltip.Please refer the below documentation. 

 

https://help.syncfusion.com/js/grid/cell#tooltip 

If you still face the issue please provide the following details. 

1. Screenshot or video of the replication procedure of the issue.
2. Essential studio versions.
3. If possible try to reproduce the mentioned issue in the attached example.

Regards, 

Sathyanarayanamoorthy