Grid header Tooltips

16 posts, 0 answers
  1. Arman
    Arman avatar
    1 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2013 Link to this post

    Can you post an example of attaching the new tooltip to grid column headers? tx!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 29 Mar 2013 Link to this post

    Hi Arman,

    Please check this jsBin example which I prepared for you - it demonstrates a possible implementation of the desired functionality.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ephrem
    Ephrem avatar
    8 posts
    Member since:
    Mar 2013

    Posted 08 Apr 2013 Link to this post

    I want add custom toolTip text to kendo Grid coulmn header. right now I
    can only have a toolTip text which is the title of the column as explained
    above.

    Can you please help me achieve that?
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 09 Apr 2013 Link to this post

    Hi Ephrem,

    In order to achieve this you should specify the text via the tooltip widget's content configuration option. For example: 
    grid.thead.kendoTooltip({
       //....
       filter: "th",
       content: "Custom Text"
    });

    Kind regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ephrem
    Ephrem avatar
    8 posts
    Member since:
    Mar 2013

    Posted 09 Apr 2013 Link to this post

    Hi Iliana,

    Thanks you for your reply. the exact thing I want to achieve was to have a different and custom text for every column in a grid. So if I have  Id and Name columns in a grid I wanted to have custom tooltip text for both.

    Thanks,
    Ephrem
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Apr 2013 Link to this post

    Hello Ephrem,

    In order to achieve this you should implement your custom logic in the content function. For example:

    grid.thead.kendoTooltip({
        filter: "th",
        content: function (e) {
           var target = e.target;
           if($(target).index() == 1) {
               return ("SomeTooltipText")
           }
           else {return ("AnotherTooltipText")}
        }
    })
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 06 Oct 2015 Link to this post

    Hi Iliana,

     

    I am trying to use kendo tool tip on my grid headers. It is working fine, but I am getting white space on the background of the header when i mouse over on the header. I am sure i might be missing something. Can you please tell me if I am missing anything.

     

    All I am doing is this . I have attached a screen shot of my grid when mouse over on the header.

        $(document).ready(function () {
            var grid = $("#contractGrid").data("kendoGrid");
            grid.thead.kendoTooltip({
                filter: "th",
                content: function (e) {
                    var target = e.target; // the element for which the tooltip is shown
                    return target.text(); // set the element text as content of the tooltip
                }
            });
    });

     

     

  9. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 08 Oct 2015 Link to this post

    Hi DHHS,

    Based on the provided screenshot, I assume that the Bootstrap theme is applied to the Grid. If so, please use the following CSS rule to override the white background: 

    .k-grid-header .k-state-active {
      background: #f5f5f5;
    }

     

    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 08 Oct 2015 in reply to Plamen Lazarov Link to this post

    Perfect. Thank you. 

      I have custom commands in my last column, so the text is null but still the tooltip is showing. Is there a way that i can hide the tooltip if the text is null . I have tried something like this  but didn't work :(

    var grid = $("#contractGrid").data("kendoGrid");
      var tooltip = grid.thead.kendoTooltip({
           filter: "th",
           content: function (e) {
               var target = e.target; // element for which the tooltip is shown    
               alert($(target).text());
               if ($(target).text() == null) {                   
                   tooltip.hide();
               }
               return $(target).text();
                
           },
           width :120
       });

     

     

    and one more thing. I have custom command buttons with very big names, so ​I want to give something small text on the button text and when I mouse over i want to see the full text on it. Below are my custom command buttons. 

    columns.Command(command =>
                 {
                     command.Custom("Budget").SendDataKeys(true).Click("budgetClick").Text("B").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" });
                     command.Custom("RevenueSource").SendDataKeys(true).Click("revenueSourceClick").Text("RS").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-edit k-primary" });
                     command.Custom("ServiceDetails").Text("BC").SendDataKeys(true).Click("ServiceChilClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-delete k-primary" });
                     command.Custom("Procedure").Text("PC").SendDataKeys(true).Click("ProcedureClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-view k-primary" });
                 })

  11. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 12 Oct 2015 Link to this post

    Hello DHHS,

    In order to show the Tooltip based on a condition I suggest you checking the following how-to article: 

    http://docs.telerik.com/kendo-ui/web/tooltip/how-to/show-on-length-condition#show-only-if-text-exceeds-certain-length.

    Concerning your second question, changing the text of a custom command button on the fly is not supported out-of-the-box and requires custom implementation. A possible approach would be setting a title of the button which will be displayed on mouse over.

    I hope this helps. 

    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 13 Oct 2015 Link to this post

    Sure the title of the button works too. But custom command doesnt have title option :(

     

    How to filter in kendo tool tip for custom command? Like for grid header we are filtering for th, what should i filter for custom command

     

     

    Thanks,

    Veena

  13. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 13 Oct 2015 Link to this post

    Sure the title of the button works too. But custom command doesnt have title option 

     

    How to filter in kendo tool tip for custom command? Like for grid header we are filtering for th, what should i filter for custom command

     

     

    Thanks,

    Veena

  14. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 15 Oct 2015 Link to this post

    Hello DHHS,

    You can add the title attribute in the same way as you have added the CSS classes. For instance: 

    command.Custom("Budget").Text("B").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary", title="Long text here" });

     

    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 15 Oct 2015 Link to this post

    Thank you.

     

    what is the filter i have to add for custom command button for kendo tool tip

    var grid = $("#contractGrid").data("kendoGrid");
      var tooltip = grid.thead.kendoTooltip({
           filter: "th", // here what should i give for custom command button
           content: function (e) {
               var target = e.target;
               alert($(target).text());
               if ($(target).text() == null) {                  
                   tooltip.hide();
               }
               return $(target).text();
     
           },
           width :120
       });​

  16. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 19 Oct 2015 Link to this post

    Hello DHHS,

    In order to show tooltips over custom command buttons, you should initialize the Tooltip widget from an HTML element, which is an ancestor of the data table. thead is an ancestor of the Grid header area, while tbody is an ancestor of the data area.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-tbody

    Also, change the Tooltip filter to ".k-button". However, this will affect all buttons inside the Grid's data rows. If this is not desired, please add a custom class via HtmlAttributes, and use it as a Tooltip filter. 


    $(function () {
      var grid = $("#grid").data("kendoGrid");
      var tooltip = grid.tbody.kendoTooltip({
        filter: ".k-button",
        content: function (e) {
           var target = e.target; // element for which the tooltip is shown
           if ($(target).text() == null) {
             tooltip.hide();
           }
           return $(target).text();
     
        },
        width: 120
      });
    });

     

    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 19 Oct 2015 Link to this post

    Thank You :)
Back to Top
Kendo UI is VS 2017 Ready