Anyone know how to do Field ToolTip NOT using Aware

Jaymer

per https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/grid-with-kendo-ui-tooltip

here's the way the built-in implementation looks:
Screen Shot 2018-05-25 at 6.11.20 PM.png

I don't like that. I need to select the field to put into the tip - Aware only lets me pick ALL or Hidden. In this example, I also tried Hidden and made a calculated column of the "body" attribute, but I can't get anything to work using "Show Hidden Fields"

Has anyone implemented any .JS to produce nice "on hover" tool tips/field expansion.

thx
jaymer...

hpl123

I have integrated bootstrap tooltips (tooltips and popovers, see screenshot for an popover example):

I can´t lift out just that part from my app but with this example you can probably figure it out with minimal "coding":
https://codepen.io/monkeyraptor/pen/fAmti

Jaymer

Thanks Henrik
I remember seeing that in your gallery.
But what I need is a rollover expansion for a long field.
Like if I made a several hundred character note on a customer, but I’m seeing only the first 80 characters in a grid. I’d like to hover over that part of the note that I can see and have a window come up that shows all of the note. To save me having to do a click and open the window. A lot faster for the user.

johntalbott

Jaymer wrote
per https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/grid-with-kendo-ui-tooltip

The Kendo example does what you want, yes? If so, you've got it all right there.

johntalbott

Render Script

	$("#" + parser.m_gridId).kendoTooltip({
		filter: "td:nth-child(2)", //this filter selects the second column's cells
		position: "top",
		width: 360,
		height: 100,
		content: function(e){
		  var dataItem = $("#" + parser.m_gridId).data("kendoGrid").dataItem(e.target.closest("tr"));
		  var content = dataItem.Note;
		  return content;
		}
	  }).data("kendoTooltip");

hpl123

Jaymer wrote
Thanks Henrik
I remember seeing that in your gallery.
But what I need is a rollover expansion for a long field.
Like if I made a several hundred character note on a customer, but I’m seeing only the first 80 characters in a grid. I’d like to hover over that part of the note that I can see and have a window come up that shows all of the note. To save me having to do a click and open the window. A lot faster for the user.

Yeah, the bootstrap popover for example can be used for that. In my example, the questionmark icon is a font awesome icon and the help popover is shown when hoovering the mouse over the icon i.e you can populate a HTML BO attribute with the HTML for the popover and then in the render script initialize the actual popover. I chose to integrate these popovers etc. as I use these types of help popovers all over the place so in forms, query headers, content panels etc. etc. and works great.

John's example looks nice as well though and looks like it might be a quicker / more "native" fix.

Jaymer

hpl123 wrote
i.e you can populate a HTML BO attribute with the HTML for the popover and then in the render script initialize the actual popover.

Henrik, I like your example also. Thats a nice standard to have those all throughout an app for user info.

Q: So lets say you have 30-50 of these HELP icons throughout your system, so you need 50 fields/tuples accessible with this HTML.

Exactly how do you may any given one (or more) of these be in context when needed?

If I was on a Customer Grid, then clicked [New Customer] (create object built-in operation), How am I going to have 3, for example, help tips to show up on the Customer Entry Form? What BO would be in context to allow the render script to populate your tip variable, besides LIRU & SS?
If I added 50 fields to SystemSettings, that would make this easy - but seems too simple, straightforward, non-flexible for multi-tenant, etc.
So you must have some cool innovative way to accomplish this. Can you share?
... or maybe you can't use a built-in create anytime you need this, and you have to use a process to ENTER NEW all the time?

jaymer...

Jaymer

thanks JT
True, the kendo code was there, but it took that other 5% of the JT Voodoo to get it Aware-ready.

Couple of points...
1) Here's your modified code:

$("#" + parser.m_gridId).kendoTooltip({
      filter: "td:nth-child(2)", //this filter selects the second column's cells
      position: "right",
      width: 660,
      height: 100,
      content: function(e){
        var dataItem = $("#" + parser.m_gridId).data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = 'data from parent context: <<Lead.FullName>>';
        content = content + '<span style="color:red"><h5><b>PRIVATE NOTE</b><h6></span>' +
        content = content + '<span style="color:black"><h6><b>Expanded Notes --> ' + dataItem.body + '</b></h6></span>' ;
        return content;
      }
     }).data("kendoTooltip");

2) So its cool that I can add in HTML - so I made it bold, bigger, etc. I even use a <<BO.field>> that would be in context. Thats works too.
3) But human nature is always wanting more, right? In my case, the "PRIVATE NOTE" indicator is shown by the red icon preceeding a row. Sure, that should be enough for a user, but it would be nice if I could show that line in red ONLY when applicable. Problem is, that involves data from column 1. Wouldn't I need another filter? And another dataitem? Seems like I'd need a function within this function to see if its Private.
4) I wrote the CONTENT assignments in a simple way, so its easy to see that I'd eliminate the middle assignment if its NOT private... if I could only determine that. Any ideas JT?

I could see lots of uses for this... once we can crack the code and make this easy for many to implement.
Since parent variables are available via context, a nice popup could be implemented in cases where parent info is overwritten. Bruce may have lots of need for this. I had forgotten about this for 2 years - because when I first needed it, the options were too limiting.

Screen Shot 2018-05-26 at 12.38.39 PM.png

johntalbott

Jaymer wrote
Q: So lets say you have 30-50 of these HELP icons throughout your system, so you need 50 fields/tuples accessible with this HTML.

How about ...?

Create a ToolTips BO that has a peer relationship with the domain BOs (Customer, etc) that need ToolTips.
Create Shortcuts to the ToolTips that apply to the BO

johntalbott

var dataItem

is a JS variable that can be called anything. It's referencing the entire grid row ... i.e. Note record. This means that your code can refer to any of the BO attributes returned in the query. You can use those attributes to do conditional logic, etc.

To add some clarity for your scenario, Iet's change the variable name from dataItem to selectedNote.

$("#" + parser.m_gridId).kendoTooltip({
      filter: "td:nth-child(2)", //this filter selects the second column's cells
      position: "right",
      width: 660,
      height: 100,
      content: function(e){
        var selectedNote = $("#" + parser.m_gridId).data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = 'data from parent context: <<Lead.FullName>>';
        if (selectedNote.private === "Yes") {
             content = content + '<span style="color:red"><h5><b>PRIVATE NOTE</b><h6></span>'
        }
        content = content + '<span style="color:black"><h6><b>Expanded Notes --> ' + selectedNote.body + '</b></h6></span>' ;
        return content;
      }
     }).data("kendoTooltip");

Jaymer

JT, yes, renaming that field makes a lot of difference.

now, this isn't your fault or a problem in your code, but...

1) since i'm using an icon in the 1st column, the value of the Private field is neither Yes or No. In fact, when output in the .js, its nothing. Its NULL. Its not UNDEFINED. It just doesn't exist.
If, in the grid widget definition, I change that column to "Icon & value", then it still doesn't work. Only if its "value only" (where it displays Yes or No) will the condition work.

2) Due to a bug (or limitation), making a Calculated Column (CC) in a Widget Grid does not work. Making a CC in a regular Query works, but in my case, I thought I'd leave the 1st column as is (the icon), and make another column Yes/No (which, really wouldn't have worked because I don't want this to appear - and if you uncheck it, then it removes the CC). SO, when making the CC, the new field is = to "Lead.om_Notes.Private" - THIS DOES NOT WORK. Syntax is fine, but at runtime, it does not resolve to the instance shown on that row. In my case, ALL ROW VALUES were the same from another unrelated record in the Notes BO.
Now, you can't tell this from the Yes/No column, so I set a CC = theNote, and what displayed was NONE of the 4 notes in the grid. A totally diff record.
I imagine somewhere it might read "A calculated column can only be derived from the main BO or a direct shortcut".

So, the task now, should you choose to waste your time on this (or just let Aware beat you on this one), is how to reference a field value when it is set to Icon Only in the grid. (I'm sure many future readers will be disappointed.)

I'd be happy even knowing the Icon name. Cause I'm using that column to display a blank, or 1 of 2 icons depending on criteria in the icon rule.

thx
jaymer...

Not working. Calc column not set correctly cause 1st column does not evaluate to Yes or No
Screen Shot 2018-05-26 at 2.41.26 PM.png

Working, since 1st column is normal field.
Screen Shot 2018-05-26 at 3.28.21 PM.png

hpl123

Jaymer wrote
hpl123 wrote
i.e you can populate a HTML BO attribute with the HTML for the popover and then in the render script initialize the actual popover.

Henrik, I like your example also. Thats a nice standard to have those all throughout an app for user info.

Q: So lets say you have 30-50 of these HELP icons throughout your system, so you need 50 fields/tuples accessible with this HTML.

Exactly how do you may any given one (or more) of these be in context when needed?

If I was on a Customer Grid, then clicked [New Customer] (create object built-in operation), How am I going to have 3, for example, help tips to show up on the Customer Entry Form? What BO would be in context to allow the render script to populate your tip variable, besides LIRU & SS?
If I added 50 fields to SystemSettings, that would make this easy - but seems too simple, straightforward, non-flexible for multi-tenant, etc.
So you must have some cool innovative way to accomplish this. Can you share?
... or maybe you can't use a built-in create anytime you need this, and you have to use a process to ENTER NEW all the time?

jaymer...

Well, I use this solution mostly for static information i.e help info that always is the same etc. so in your form example I would just have the information as HTML directly on the form (think HTML row with the actual HTML that produce the tooltip). The information is mostly static as mentioned so can be built into the form directly like above, in scenarios where the information would be dynamic like a query I would use tags (data-content='<<Object.Attribute>>'). I also use a SystemSettings object in some cases (I have a separate SystemSettings BO for every system module that keeps information related to the module).

johntalbott

There are more elegant approaches, as I absolutely do like the idea of adding database columns for UI details such as this.

But having said that ... the simplest method is to use two BO attributes such as PrivateValue & PrivateIcon.

In the BO

Add PrivateValue & PrivateIcon attributes
Add a BO rule to keep the values of each in sync

In the query:

Set PrivateValue to show Value Only and in the Column settings set it to Initially Hidden. By doing so, the attribute is available, but the grid column is hidden.
Set PrivateIcon to show Icon Only
Use the PrivateValue attribute in the If Condition in the Tooltip function.