Understanding click events in ondemandgrid

TracySchloss

I have a grid that has a row click that opens the infoTemplate:

      createAlertGrid: function(){

  var alertColumns =  [
       {
        field: "FlagStatusDescription",
        label : "Status",
        formatter : function (value) {
          return value;
        },
          get : function (obj) {
              if(obj.FlagStatusDescription === "Unavailable"){
              return "<img src='images/unavailable.png' alt='unavailable image' style='width:18px;height:18px'/>";  
              }else if(obj.FlagStatusDescription === "Issue"){
                return "<img src='images/issue.png' alt='issue image' style='width:18px;height:18px'/>";  
              } else {
                return "<img src='images/maintenance.png' alt='maintenance image' style='width:18px;height:18px'/>";  
              }          
              return obj.FlagStatusDescription;
          }
      }, {
        field: 'alert',
        label: 'Description',
        renderCell: function(obj){
          var template = '<div class="gridTitle gridInfo">Server Id: ${0}</div><div class="details gridInfo">${1}</div> <div class="details gridInfo">City: ${2}</div> <div class="details gridInfo">Status:  ${3}</div>';
          return domConstruct.create("div", {
            innerHTML: dojoString.substitute(template, [obj.Server_ServerName, obj.ServerTypeDescription, obj.EntityLocationCity, obj.FlagStatusDescription])
          });
        }       
      }, {
        field: 'staff',
        label: 'Nearby Staff',
        formatter: function (value){
          return value;
        },
          get : function (obj){
            return "<img src='images/pin_blue.png' alt='staff image' style='width:18px;height:18px'/>";  
          }
        }
    ];
       app.alertGrid = new (declare([OnDemandGrid, Selection, Keyboard]))({
         columns: alertColumns
          }, "alertGridDiv");
        app.alertGrid.startup();
        
        return app.alertGrid;
      }

Besides clicking on the row, I'd also like to have allow the user to click in the 'Nearby staff" column to execute a search when they click specifically in that cell'.  I thought I could add an additional click event on dgrid-cell, but I must not have the right event.

            app.alertGrid.on('.dgrid-cell.field-staff:click', function (evt){
              console.log("you clicked the staff icon");
            });

I've also tried

.dgrid-content .field-staff:click

.dgrid .field-staff:click

.dgrid-cell .field-staff:click

.dgrid-row .field-staff:click

.dgrid-row.field-staff:click

Can I not overlap events like this (both on the row and an individual cell) or do I just have the wrong element?

thejuskambi

You should probably use CellSelection for this. or use the .dgrid-cell:click and with in the event identify which column the user has clicked and take approriate action.

grid.on(".dgrid-header .dgrid-cell:click", function(evt){
  var cell = grid.cell(evt);
  // cell.element == the element with the dgrid-cell class
  // cell.column == the column definition object for the column the cell is within
  // cell.row == the same object obtained from grid.row(evt)
});