RadGrid Columns context menu ToolTip

[Jeff]

I am attempting to show a 'tooltip'-like window/div on the RadGrid Columns context menu panel that slides out when you hover over 'Columns'. 

The div is shown on the 'mouseenter' event, and then removed on the 'mouseout' event.  The issue I'm experiencing is that the 'Columns' context menu will hide itself shortly after the 'tooltip' div is shown, thus causing the window to immediately be removed from the DOM. 

Is there a more effective way to produce this kind of behavior?  Additionally, I'm targeting the 'li.rmitem.rmtemplate' class, and I'm also wondering if that is the most appropriate one?

In this code snippet from the ClientEvents OnGridCreated event, I'm populating the 'tooltip' div with the column heading, but it will eventually be replaced with dynamic data based upon which column heading is hovered over.

let columnSlideOutItems = document.querySelectorAll('li.rmitem.rmtemplate');

columnSlideOutItems.forEach(function (c) {
	let thisNode = c.childNodes[0];
	let tooltip = document.createElement('div');
	tooltip.style.position = 'absolute';
	tooltip.style.backgroundColor = '#fff';
	tooltip.style.border = '1px solid #000';
	tooltip.style.padding = '10px';

	tooltip.innerHTML = thisNode.innerText;
	document.body.appendChild(tooltip2);

	thisNode.addEventListener('mouseenter', function (e) { 
		console.log(this.innerText);
		tooltip.style.left = e.pageX + 'px';
		tooltip.style.top = (e.pageY - 22) + 'px';
		tooltip.style.zIndex = 99999;
	});

	thisNode.addEventListener('mouseout', function (e) {
	    if (tooltip) tooltip.remove();
	});
});

 

 

 

 

[Vasko]

Hi Jeff,

The following approach could be utilized to create tooltips for the columns sub-menu:

Attach the ItemCreated event handler to the RadGrid1.HeaderContextMenu.ItemCreated event:

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid1.HeaderContextMenu.ItemCreated += new RadMenuEventHandler(HeaderContextMenu_ItemCreated);
}

On the HeaderContextMenu_ItemCreated method, you can find the items and apply a tooltip to their child control (the CheckBox):

private void HeaderContextMenu_ItemCreated(object sender, RadMenuEventArgs e)
{
    e.Item.ToolTip = e.Item.Text; // Add tooltips to the main menu item (group, ungroup, columns, etc)

    if (e.Item.Value.Contains("OrderID") && e.Item.Controls.Count > 0) // Add tooltip to the sub-menu item that is for the OrderID column
    {
        (e.Item.Controls[0] as CheckBox).ToolTip = e.Item.Text;
    }
}

I hope this helps.

Kind regards,
Vasko
Progress Telerik

[Jeff]

Vasko,

Excellent solution.  Thank you so much.  This worked like a charm!

Thank you,

Jeff.