Get KoolPHP UI with 30% OFF!

Cell tooltips/notes?

Larry Parrish
In Excel or OpenOffice Calc, notes can be assigned to a cell. A red triangle is displayed in the upper right corner of the cell. When you click on it or hover your mouse, a small box pops up with the notes. Can such a function be done in KoolGrid?
- Bill in KC
Posted Aug 25, 2016 Kool -
Anthony Amolochitis
Jquery can do the tooltip really nicely. You probably will need to use a custom column to get it right.
Posted Aug 27, 2016 Kool
Larry Parrish
SOLUTION: As it turns out, Jquery is part of how I did it.
The data comes like this (not how I would have done it, but you work with what you've got):
12.5%<notes_nohighlight>Apps Approved:1/\nApps Sent: 8</notes_nohighlight>

Server-side code, using an array as a datasource (also note there is autosizing code, since I couldn't figure out how to autosize with a native property on the grid):
$fontWidth = imagefontwidth(3);
foreach($rs[0] as $k=>$v){
	$column = new GridBoundColumn();
	$column->DataField = $k; 
	$column->HeaderText = $k;
	$column->ReadOnly = true;
	$column->AllowHtmlRender = true;
	$column->AllowResizing = true;
	$curSize = $fontWidth * strlen($v); // get the approx width of the first value in the results
	if($curSize < 32){$curSize = 32;} // set a minimum width
	$column->Width = $curSize; // set the column width
	$grid->MasterTable->AddColumn($column);
}

Client-side code:
jQuery:
	$("notes_nohighlight").each(function(){
		var vParent = $(this).parent();
		vParent.attr("title", $(this).html());
		vParent.addClass("hasNotes");
		$(this).hide();
		
	}); 

Style:
.hasNotes {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AgdFiQgmr5rDQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAOklEQVQY033KoREAIBADwSsIg/gKmMFQAIL+68ibWCLWLYIh0A8AghmDU8XgtGJw2jE4nRicbgxOrwFPu0HZTKV00gAAAABJRU5ErkJggg=='); /* << 6px red triangle */
	background-repeat: no-repeat;
	background-position: top right; 
}

Posted Aug 30, 2016 , edited Aug 30, 2016 Kool -
Igor
Hi Larry,
im trying to implement your idea, but i cant figure it out this part:
...
foreach($rs[0] as $k=>$v){
...

Can you explain in a little bit more detail how you did it?
Thank you,
Igor
Posted Jan 31, 2017 Kool
Anthony Amolochitis
Just simply add this script within the script tags in the top of your page and all tooltips are formatted better with jquery. They will popup without it though.
Also, your html tags need the tooltip property on them.
example: <input type="text" tooltip="Mandatory field requires input" value="somevalue">
$(function() {
          $( document ).tooltip(); 
        });   

As for the image, just place an image in the cell using a custom column. If there is a field property to determine when there is a tooltip, then use the grid eventhandler to add the image to the cell on the row prerender event.
Posted Jan 31, 2017 , edited Jan 31, 2017 Kool
Igor
Hi,
i solved this with tooltipster jQuery plugin.
php
	
        $column = new GridCustomColumn();
	$column->DataField  = '' ;
	$column->Valign     = 'middle';
	$column->HeaderText = 'Tooltip';
	$column->ItemTemplate = "<span class='tooltip' title='struja: {kategorijaStruja}, plin: {kategorijaPlin}'>{id_tvrtke}</span>";
	$column->Width      = '65px;';
	$grid->MasterTable->AddColumn($column);

<script>
  $(document).ready(function() {
            $('.tooltip').tooltipster();
			
			// $('.tooltip-left').tooltipster({
				theme: 'tooltipster-punk'
				// position: 'left',
				// trigger: 'click',
				// animation: 'swing'
				// animation: 'fade',
			        // delay: 200
				// maxWidth: 50,
				// contentAsHTML: true,
				// content: $('<span><img src="pictures/slika1.jpg" /></span>')
			// });			  
        });
<script>

Igor
Posted Feb 6, 2017 , edited Feb 6, 2017 Kool