Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
vnt_prabhu
420
Hover on Column Header in igGrid without MVC
posted

I have a column with heading "Unit #" and I would like to display "Unit ID-Not Editable" when mouse hiovers on it. igGrid is in a webform and not in MVC.

  • 80
    Offline posted

    Following approach worked for me:

    1. <script type="text/javascript">
    2. var adventureWorks = [{"ProductID":1},{"ProductID":2},{"ProductID":3},{"ProductID":4},{"ProductID":5},{"ProductID":6}];
    3.     $(window).load(function () {
    4.     $("#grid1").igGrid({
    5.         columns: [
    6.             { headerText: "Product ID", key:"ProductID", dataType:"number", width: "100px"}
    7.         ],
    8.         autoGenerateColumns: false,
    9.         dataSource: adventureWorks,
    10.         rendered: function() {$("#grid1_ProductID").attr("title", "my custom title");}
    11.     });
    12. });
    13. </script>
  • 23953
    Verified Answer
    Offline posted

    Hello vnt_prabhu,

    In order to add tooltip to the column header you should add "title" attribute to the "th" element of the column. Each "th" element has "id" attribute which has the following structure "<gridId>_<columnKey>" where <gridId> is the id of the grid and <columnKey> is the key of the column.

    Here is the example code:

     

    Code Snippet
    1. <script type="text/javascript">
    2. var adventureWorks = [{"ProductID":1},{"ProductID":2},{"ProductID":3},{"ProductID":4},{"ProductID":5},{"ProductID":6}];
    3.     $(window).load(function () {
    4.     $("#grid1").igGrid({
    5.         columns: [
    6.             { headerText: "Product ID", key:"ProductID", dataType:"number", width: "100px"}
    7.         ],
    8.         autoGenerateColumns: false,
    9.         dataSource: adventureWorks
    10.     });
    11.     $("#grid1_ProductID").attr("title", "my custom title");
    12. });
    13. </script>

     

    Hope this helps,

    Martin Pavlov,

    Infragistics, Inc.