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 · Accepted solution]

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)
});

[KenBuja]

Expanding on the dGrid sample, I added a click event for the row. See what happens when you click on any cell in the row versus the ID cell

JS Bin - Collaborative JavaScript Debugging

[TracySchloss]

That should work with modification.  I see no reason to have to click the header, but I can see with just a .dgrid-cell:click that I can check the field to see if it is = staff

           on( app.alertGrid, ".dgrid-cell:click", function(evt){

              var cell = app.alertGrid.cell(evt);

              var col =  cell.column;

              if (col.field == 'staff'){

              console.log("you clicked the staff cell");}

            });

[KenBuja]

Shouldn't you just be able to wire the event for the field?

grid.on(".field-staff:click", function(){ console.log("you clicked the staff cell"); });

[TracySchloss]

Yes, that did give me a result, but then I wasn't able to get row or cell information from it, it was like a generic mouse event.  Maybe I didn't dig deep enough, but I wasn't seeing it.

You'd think you'd get something similar to dgrid-cell:click.

[KenBuja]

You could also use the information from the row click event. This will give you the information of the cell you clicked on if you examine the contents of evt.target.