New Hint Control - DevExpress ASP.NET (v17.1)

21 April 2017

We're introducing a new ASP.NET control in the v17.1 release: the Hint control.

The Hint control provides, well, hints. A small notification popup, in other words. In the image below, we're using the new Hint control to show the full GridView cell text on the mouse-over event:

DevExpress ASP.NET Hint Control

This saves you from defining wide columns on the GridView but still be able to show the user the full text of the cell. Previously, we relied on our handy DevExpress ASP.NET Popup control for similar tasks. However, the popup control provides a lot more features and tends to be heavier for small tasks that require only a hint. So, we created the Hint control to offer you another way to display lightweight notifications.

Light Client-Side

The unique thing about our new Hint control is that it's mostly a client-side control which is wrapped in a server-side ASP.NET control. Why would we do that? Well, the Hint control is really lightweight and it would be overkill to generate it on the server.

Features

As you might expect, the DevExpress ASP.NET Hint Control generates its content on demand and displays it within a box along with an arrow targeting the specified UI element on a web page.

Features include:

  • A trigger action to display the hint (hover, click, focus, programmatic).
  • Customizable delay before the display of the hint.
  • Animation effects.
  • Callout element availability.
  • Position over the target element (bottom, top, left, right).
  • Title text/markup (static or retrieved from the target element's attribute).
  • Content text/markup (static or retrieved from the target element's attribute).
  • Customizable size (height/width).
  • Absolute positioning (x/y).

What do you think about the new DevExpress ASP.NET Hint control? Drop me a line below.

Thanks!


Your Next Great .NET App Starts Here

Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: DevExpress.com/trial (free support is included during your evaluation).

6 comment(s)
John Black 5

Hi, this looks really cool. I have to hand code this kind of thing at the moment using Tool Tips. I assume the column in the grid designer is a still a text column (for example). How do you specify the width of the field displayed in the grid itself? I.e. how do you define where the ellipses start?

21 April, 2017
Vlаd

I am just wondering, does the control support templates?

E.g. if I'd like to add ASPxHtmlEditor into the tooltip to perform quick edits.

24 April, 2017
George Fahnbulleh_1

Hint: I still want the dataView Control to be reponsive :)

24 April, 2017
Vladimir Frizen (DevExpress)

@John

ASPxGridView automatically cuts cell text and appends ellipsis if the text width exceeds the column width and the following setting is enabled:

<SettingsBehavior AllowEllipsisInText="True"/>

You can see how it works with different column sizes in this demo:

demos.devexpress.com/.../TextEllipsis.aspx

@Vlad

ASPxHint does not support templates. The control provides a client-side API that allows adding custom HTML markup inside a popup element. This will be shown in our 17.1 demos after the official release.

@George

I will share this information with our developers.

25 April, 2017
James Birnie

Hi DevX - looking good!

So when setting the Tooltip property for a cell, will it instead display within this (much more attractive) popup also?

26 April, 2017
Vladimir Frizen (DevExpress)

Hi James,

The ASPxHint control requires assigning a target HTML element, e.g., the root ASPxGridView element:

<dx:ASPxHint ID="ASPxHint1" runat="server" Selector=".dxgv"></dx:ASPxHint>

After that, the control automatically displays values of the 'tooltip' attribute as a popup message.

28 April, 2017

Please login or register to post comments.