Hiding the FilterEditor's values when canFilter=false

[TylerGalt]

Hello,

My problem
I would like to configure a ListGrid's FilterEditor to stop it from displaying values when canFilter is set to false, even when I filter the ListGrid with a criteria that filters on the field in question.

Example
To better understand my problem:

• go to this page
• replace the code in the JS tab with the following:
  

  isc.ListGrid.create({
      ID: "countryList",
      width:500, height:224, alternateRecordStyles:true, showAllRecords:true,
      dataSource: countryDS,
      autoFetchData: false,
      fields:[
                {name:"countryCode", canFilter:false},
                {name:"countryName", title:"Country"},
                {name:"capital", title:"Capital"}
      ],
      showFilterEditor: true
  });
  countryList.filterData({capital:"s", countryCode:"u"});

• click "Try It"

You should see a blue "u" in the FilterEditor cell for the countryCode column.

I would like to configure my ListGrid to make this "u" disappear.

Thanks in advance for any pointer,

-TylerGalt

[TylerGalt]

Some updates:

I found out why the text I was trying to hide was blue: the color comes from the ListGrid's "editPendingCSSText" attribute.

Putting the following code in the JS tab mentioned previously changes the color of the text I want to hide to red:

isc.ListGrid.addProperties({
    editPendingCSSText: "color:red;"
});

isc.ListGrid.create({

    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true, showAllRecords:true,
    dataSource: countryDS,
    autoFetchData: false,
    fields:[
              {name:"countryCode", canFilter:false},
              {name:"countryName", title:"Country"},
              {name:"capital", title:"Capital"}
    ],
    showFilterEditor: true
});
countryList.filterData({capital:"s", countryCode:"u"});

This CSS is used when the filterEditor cell has changes:

if (this.editPendingBaseStyle == null && this.editPendingCSSText &&
            this.cellHasChanges(rowNum, colNum, false))
        {
            cssText = this.editPendingCSSText;
        }

I don't know if this behavior is intended or not, but I'm going to investigate a little more.

I'm still interested in any advice / suggestions ;)

Thanks

[TylerGalt]

Hello,

I found a little workaround to achieve this effect.

Instead of setting canFilter to false, I set it to true, and set the filterEditorType to "SpacerItem".

The SmartGwt code I use in my app when translating my DataSourceFields to ListGridFields:

  private ListGridField createListGridFieldFromDataSourceField(DataSourceField dataSourceField) {
        ListGridField listGridField = new ListGridField(dataSourceField.getName(), dataSourceField.getTitle());

        listGridField.setRequired(dataSourceField.getRequired());

        if (dataSourceField.getType() == FieldType.FLOAT) {
            listGridField.setCellFormatter(getFloatCellFormatter());
        } else if (dataSourceField.getType() == FieldType.INTEGER) {
            listGridField.setCellFormatter(getIntegerCellFormatter());
        }

[b]
        Boolean canFilter = dataSourceField.getCanFilter();
        if (canFilter == null || canFilter == false) {
            // MAGIC - Do Not Touch
            listGridField.setFilterEditorType(new SpacerItem());
            listGridField.setCanFilter(true);
        }
[/b]
        return listGridField;
    }

This translates to the following javascript code on the aforementioned SmartClient showcase:

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true, showAllRecords:true,
    dataSource: countryDS,
    autoFetchData: false,
    fields:[
              {name:"countryCode", [b]canFilter:true, filterEditorType:"SpacerItem"[/b]},
              {name:"countryName", title:"Country"},
              {name:"capital", title:"Capital"}
    ],
    showFilterEditor: true
});
countryList.filterData({capital:"s", countryCode:"u"});

(you may paste this on the sample mentioned above in the JS tab, and see for yourself that the blue "u" in the CountryCode column disappeared)

I think there might be a better way to achieve this effect, but I'll use this for now.

The funny thing is, this workaround doesn't work when I set canFilter:false (the FilterEditorType is not taken into account in such a case).


I hope this will help people who encounter the same problem, and I still welcome any advice / suggestion to improve on this workaround.

Thanks for reading,

-TylerGalt

[TylerGalt]

Bump :)

I created an issue to keep track of this.

My workaround is not satisfying anymore, because I now need to query the fields after the ListGrid's construction to do something for each fields where canFilter = true. But since my workaround needs to set canFilter to true on *all* fields, I may not differentiate them anymore.

I would appreciate any advice / feedback.

Thanks,

-TylerGalt

[mhulsman]

isc.ListGrid.addProperties({
editPendingCSSText: "color:red;"
});

Try replacing that with this

isc.ListGrid.addProperties({
    editPendingCSSText: "display:none;"
});

Which will make the text not show up.

[TylerGalt]

Thanks for the suggestion.

I tried it, and in my browser it makes the whole filterEditor go white:
screenshot with editPendingCSSText: "display:none;"

By the way, here is a screenshot of the "bug" as well:
screenshot of the bug
(notice the blue "u" in the header of the first column)

Regards,

- TylerGalt

[Isomorphic]

This is not really considered a bug, as showing the filter value conveys useful information. But, if you want to hide it, many approaches would work but one is to use CSS to make the text color match the background color.

[Osirium1]

Is there still no *official* way to do this?

In my scenario, I have a ListGridField of type "date" representing a "Last activity" column. However, some of my records have no "last activity" and for human readability I've set emptyCellValue:"None".

It is not user-friendly to have "None" displayed in blue in the filtereditor when some of the entries in that columns are dates.

Nor is it acceptable to set editPendingCSSText to match the gray color of filterEditor bar because that overrides it elsewhere, where blue is desirable.

If there is no official way, does anyone have any more effective hacks than those already posted?

Many thanks

[Osirium1]

Bump again.

I have noticed as a hack, instead of SpacerItem, you can use the following. It allows you to put whatever text you like in place of the filter item for that field.

  filterEditorType:"StaticTextItem",
  filterEditorProperties:{
    defaultValue:"Your text here"
   },
   canFilter:true

So Smartclient, if a field is canFilter:false why not make the default behaviour to use a StaticTextItem and by default set the editorProperty.defaultValue to whatever the underlying field's defaultValue is.

This then at least gives the option to those who wish to override that defaultValue to be able to do so, whilst not forcing us to hack a field that should be canFilter:false to be canFilter:true.

Thoughts?

[Osirium1]

A 'proper' solution?

This patches the RecordEditor to return &nbsp if canFilter is false

(function() {
  var originalGetCellValue = isc.RecordEditor.getInstanceProperty("getCellValue");

  isc.RecordEditor.addProperties({
    getCellValue:function(record, recordNum, fieldNum, gridBody) {
      var field = this.fields[fieldNum];

      if (field && (field.canFilter === false))
        return " "

      return originalGetCellValue.apply(this,arguments);
    // end getCellValue
    }
  })
})();