Change the color of a header in AT

[LefterisKoumis]

I am looking to change the color of the header by directly click on the header and

also if  column is selected through a click on a list of fields..

For the first task I tried css:

.jimu-widget-attributetable .dgrid-header .dgrid-selected {
  background-color: rgb(34, 228, 34)
}‍‍‍‍‍‍‍‍‍‍

but it doesn't seem to be working.

[RobertScheitlin__GISP · Accepted solution]

Lefteris,

   Here is what you are after.

Update _FeatureTable.js

    _onHeaderClick: function(evt) {
      var cell = this.grid.cell(evt);
      var column = cell.column;
      console.log(column);
      filter_name = column.field;
      var cell = this.grid.cell(evt);
      var column = cell.column;
      var coords = {
        x: evt.pageX,
        y: evt.pageY
      };
      this._showColumnMenu(column, cell, evt.target, coords);
      query('.dgrid-header th').forEach(function(th){
        if(html.hasClass(th, 'field-' + column.field)){
          html.addClass(th, 'th-selected');
        }else{
          html.removeClass(th, 'th-selected');
        }
      });
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Add to style.css

.jimu-widget-attributetable .th-selected {
  background-color: rgb(34, 228, 34);
}‍‍‍

[LefterisKoumis]

Thank you Robert. My second part is to change the color of a selected column without clicking on the header. I have a dropdown box with the column names and selecting one of them, it should change the color. I'd like to avoid clicking on the header because everytime you click on a column header, it refreshes the map.

[RobertScheitlin__GISP]

That would not be to hard. The th element has the column name in the class (i.e. field-SILOCAL). so using query to loop through all the th element like I already have above and then if to use the selected field name would not be a big deal.

[LefterisKoumis]

got it. thanks.

[RobertScheitlin__GISP]

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[LefterisKoumis]

Hello Robert. It seems if you perform a query on the table, it overrides the custom stylesheets and change the AT header color back to default.

THis video shows that not only the custom css is removed but when you click on another header, it refreshes the map which is not the intention.

event.preventDefault() didn't do the trip.

[RobertScheitlin__GISP]

I thought the last thing you were talking about doing was adding a dropdown with field names so that you did not have to click the header to set the filter field. Doing it this way would allow you to not need the css rule to show the selected field since its name appears in the dropdown.

[LefterisKoumis]

That's correct.That's why I moved away from clicking the header because the map refreshes after you click the header. It has to do the js api, that triggers refresh.

Then I moved to the dropdown as you show on the screenshot.

My goal here is multiple columns filtering. So after a field is filtered, and the map shows the results, then user select another column to filter the current features on the map. I know how to do this however, if the map is refreshed every time I apply the filtering, the results are gone.  I applied the th css rule, so when a user select a value from the dropdown, then the header for the field changes color. However, as the user select more fields, I want the original filed to maintain the custom th color, so user has a visual of which columns he/she filtered so far. Hope it makes sense.

So, the two issues are to  stop the map refershes everytime you click on the drop down and the custom th color tpo remain on the previous field you selected after you select another one. The clip shows another select dropdown, you can ignore that. I will use it after I resolve these issues. Thank you.

[RobertScheitlin__GISP]

Lefteris,

  The way the logic is right now for the filtering you can not filter one field and then filter another without overriding the first filter... So I am not sure if your workflow is even possible.