Full text-only ListGrid date field filter

[erikfisch]

v12.0p_2020-01-12/EVAL Development Only

Version 81.0.4044.92 (Official Build) (64-bit)

I am actually currently trying this with your "try it" option in the docs. (https://www.smartclient.com/smartcli...listGridFields)

We are trying to make a text-only filter for a ListGridField of type "date". I feel like this is supported and I have seen it somewhere in the past but I am having a hard time coming up with how to get it fully working.

Our date field is currently formatted to "MMMM YYYY" to give us textual dates like "December 2001" and would like to be able to type let's say "Decem" and it would filter to all instances of "December YYYY".

I have tried quite a few things and the closest I have gotten is with the example below. This example gives us the text field, and it allows for filtering based on the text, but only up to the first three letters of the name of the month - but the numerical values you can do the full "2001" for example and it will filter properly. Is there something that I am missing here?

var countryDS = isc.DataSource.create({
            clientOnly: true,
            fields: [
                { name: "countryCode", title: "Code" },
                { name: "countryName", title: "Country" },
                { name: "independence", title: "Nationhood" },
                { name: "population", title: "Population", type: "integer" },
                { name: "gdp", title: "GDP", type: "float" }
            ],
            cacheData: countryData
        });

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true, 
    showFilterEditor: true,
    filterOnKeypress: true,
    autoFetchData: true,
    fields:[
        {name:"countryCode", title:"Code"},
        {name:"countryName", title:"Country"},
        {name:"independence", title:"Nationhood", type:"date", width:100, dateFormatter: "MMMM YYYY", filterEditorProperties: { editorType: "TextItem", textAlign: "left" } },
        {name:"population", title:"Population", type:"integer"},
        {name:"gdp", title:"GDP", type:"float"}
    ],
    dataSource: countryDS
})

[Blama]

Hi erikfisch,

that's some strange way of filtering and I'm not sure why this is even working.
The mechanism behind it is it somehow translates the date in the list to a string and compares these.
Try filtering "Jul 04 1776" to see this.
But this mechanism will for sure fail when you try to combine this with a DataBound ListGrid, which needs to send criteria to the server.
The only way I could think of to make this working (not for thousands of entries) is a customSelectExpression to convert the dates -> string already on the server and to then filter on this field with normal text operations like you do now. In order to have sorting still working based on date and not on string then also set sortField on the new field.

Best regards
Blama

[erikfisch]

Hey thanks again - but I should specify that this is always going to be a clientOnly: true DataSource as well so I don't need to worry about the server part of things... I just want to be able to filter it as text locally. I really don't want to convert this to a text-field because as you can imagine, we still want it to sort on the underlying date as it currently does.

[Isomorphic]

This sort-of works because you have declared the field without a type, which means to use type text, and there is a fallback behavior for the client-side filtering where if the type is "text", but the data value has been incorrectly provided as something that is not a string, we first toString() it, then apply the criteria. The default Date.toString() in JavaScript has a 3 letter month.

If you wanted this approach to actually work, the underlying data must be formatted in the matter you describe *before* it is given to the clientOnly DataSource.

[erikfisch]

First - I want to clarify something:

This sort-of works because you have declared the field without a type, which means to use type text, and there is a fallback behavior for the client-side filtering where if the type is "text", but the data value has been incorrectly provided as something that is not a string, we first toString() it, then apply the criteria.

Even if i declare the datasource field as type "date" - the exact same behavior happens, so I don't think that is pertinent to my situation, or am missing something else? I am sure I could just not be fulling understanding.

And I also have a follow-up question:

If you wanted this approach to actually work, the underlying data must be formatted in the matter you describe *before* it is given to the clientOnly DataSource.

Are you suggesting that I convert the date to a string before placing it in the datasource, and thus also setting the field explicitly to type "text"? If so the the issue with that is we will lose the ability to sort by date if I am not mistaken? What would you suggest to keep the date-value sorting along with being able to filter with the full month name/year?

[Isomorphic]

If the field is type "date" and filter value is a string, then again, the fallback behavior is to toString() the data in order to have some way of comparing them. Keep in mind, these "fallback" behaviors can't really be relied upon, as there's no realistic way to do the same thing on the server (or at least, it would take a lot of code and perhaps have performance implications). So when criteria is the wrong type, client filtering may sort-of work due to these fallbacks, but it won't match server filtering, resulting in lots of odd behaviors.

As far as converting to string before providing the value and then using type:"text", yes, this means that sort, grouping etc would also be based on the string value. We didn't realize you wanted both sort by date and filter by string in the same grid. A definite way to do that would be to add a custom search operator and set that as the operator for the field via listGridField.operator. In this case leave the type as "date", and use either listGridField.format or formatCellValue() to get the appearance you want.