jQuery UI Widgets Forums Grid question on tooltip rendered method argument

This topic contains 5 replies, has 2 voices, and was last updated by  jonfrain 9 years, 12 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • jonfrain
    Participant

    I’ve bused the sample code for setting the tooltips, but my lack of experience with javascript leaves me with a question.

    The following code works fine with my an accompanying array where I specifically define some of the tooltips.

    // currently does something dumb - want a lookup based on the 
    var tooltiprenderer = function (element) {
         console.log( $(element) ) ;
         var val = $(element).text();
         if ( val in a) {
              val = a[val];                                                                   
         } 
         $(element).jqxTooltip( {position: 'mouse', content: val } );
    }

    Is there any way to change what gets passed as an argument to the tooltipprerendermethod? I have a custom argument that I want to pass to it or at least have access to through the element object.
    I have an array called entry that holds the values I want and I want to pass a new field say entry.tooltip to tooltiprenderer

    var dataColsRow = {      text: entry.display_name, 
                        datafield: entry.attribute_var_name, 
                            width: entry.grid_field_width_percent, 
                         minwidth: 200, 
                      cellsformat: cellsFormat,
                       cellsalign: cellsAlign,
                         renderer: columnsrenderer,
                         rendered: tooltiprenderer
                     }; //width: entry1.grid_field_width };                                                
    myColumns.push(dataColsRow);

    jonfrain
    Participant

    I should say that the method obviously needs the element, but I’m wondering if I can tie a new cosutm value to the element that is retrievable or add a second parameter with the tooltip I want assigned.


    Dimitar
    Participant

    Hello jonfrain,

    The rendered callback function indeed has only one argument (columnHeaderElement) but in it, you may call the grid methods you like and retrieve whatever data suits your requirement.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    jonfrain
    Participant

    Is there a way to add custom information that I can get access to? Right now I don’t see where to tell the grid to use a specific piece of text for the tooltip.

    How could I tell the grid what tooltip text I want and then access it in the tooltiprenderer method?


    jonfrain
    Participant

    I just found the following post which shows a wrapper method.

    http://www.jqwidgets.com/community/topic/tool-tip-for-column/

    Hopefully that method of doing it still works.


    jonfrain
    Participant

    I’m posting the answer in case someone goes searching.

    I’m not sure why this works but it does. I’ve taken the code from the post linked above and modified it. I’ve commented out the actual return and just set the tooltip value directly. I assume I can get rid of the return somehow.

    My question is how does columnHeaderElement get passed in to the internal function.

    // centers each heading
    var headerTooltipRenderer = function(text) {                     
         return function (columnHeaderElement) {
              $(columnHeaderElement).jqxTooltip( {position: 'mouse', content: text } );
              //return "<div style='margin-left: 10px;margin-top: 5px' title='" + text + "'>" + columnHeaderElement + "</div>";
              return;
         };
    };

    Here is how the function is called with the custom argument

    // eventually use variable for field widths //width: entry1.grid_field_width
    var dataColsRow = { text: entry.display_name, 
                        datafield: entry.attribute_var_name, 
                        width: entry.grid_field_width_percent, 
                        minwidth: 200, 
                        cellsformat: cellsFormat,
                        cellsalign: cellsAlign,
                        renderer: columnsrenderer,
                        rendered: headerTooltipRenderer(entry.tooltip) 
                   };                                                
    myColumns.push(dataColsRow);
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.