topic Re: Understanding click events in ondemandgrid in ArcGIS JavaScript Maps SDK Questions

Understanding click events in ondemandgrid

TracySchloss — Fri, 10 Dec 2021 23:17:41 GMT

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?

Re: Understanding click events in ondemandgrid

thejuskambi — Fri, 10 Dec 2021 23:17:44 GMT

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

Re: Understanding click events in ondemandgrid

KenBuja — Tue, 01 Sep 2015 19:51:48 GMT

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

Re: Understanding click events in ondemandgrid

TracySchloss — Tue, 01 Sep 2015 20:00:16 GMT

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

});

Re: Understanding click events in ondemandgrid

KenBuja — Tue, 01 Sep 2015 20:08:04 GMT

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

Re: Understanding click events in ondemandgrid

TracySchloss — Tue, 01 Sep 2015 20:24:06 GMT

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.

Re: Understanding click events in ondemandgrid

KenBuja — Tue, 01 Sep 2015 20:32:27 GMT

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.