We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

ejGrid Cell tooltip

Thread ID:

Created:

Updated:

Platform:

Replies:

119884 Aug 10,2015 11:38 AM Feb 13,2018 08:32 AM JavaScript 5
loading
Tags: ejGrid
Bruno Rodrigues
Asked On August 10, 2015 11:38 AM

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 [Syncfusion]
Replied On August 11, 2015 04:35 AM

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
Replied On August 11, 2015 06:22 AM

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 [Syncfusion]
Replied On August 12, 2015 07:06 AM

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
Replied On February 11, 2018 11:44 PM

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 [Syncfusion]
Replied On February 13, 2018 08:32 AM

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. 


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 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;