column.events : function Default: undefined

Configuration object with event names as keys and functions as values that are going to be bind to each cell from the column. Each function is going to receive event information as a parameter with info in the "data" field for id, field name and record data.

Examples

  
Edit this example
  <table id="grid"></table>
 <script>
     $("#grid").grid({
         dataSource: "../Grid/GetPlayers",
         columns: [
             { field: "ID" },
             {
               field: "Name",
               events: {
                 "mouseenter": function (e) {
                     e.stopPropagation();
                     $(e.currentTarget).css("background-color", "red");
                 },
                 "mouseleave": function (e) {
                     e.stopPropagation();
                     $(e.currentTarget).css("background-color", "");
                 }
               }
             },
             { field: "PlaceOfBirth" },
             {
               title: "", field: "Info", width: 20, type: "icon", icon: "ui-icon-info",
               events: {
                 "click": function (e) {
                     alert("record with id=" + e.data.id + " is clicked."); }
                 }
             }
         ]
     });
 </script>

  
Edit this example
  <table id="grid" data-source="../Grid/GetPlayers">
     <thead>
         <tr>
             <th data-field="ID" width="24">ID</th>
             <th data-events="mouseenter: onMouseEnter, mouseleave: onMouseLeave">Name</th>
             <th data-field="PlaceOfBirth">Place Of Birth</th>
             <th data-events="click: onClick" data-type="icon" data-icon="ui-icon-info" width="24"></th>
         </tr>
     </thead>
 </table>
 <script>
     function onMouseEnter (e) {
         e.stopPropagation();
         $(e.currentTarget).css("background-color", "red");
     }
     function onMouseLeave (e) {
         e.stopPropagation();
         $(e.currentTarget).css("background-color", "");
     }
     function onClick(e) {
         alert("record with id=" + e.data.id + " is clicked.");
     }
     $("#grid").grid();
 </script>