Customising Filter select on Grid

[DD]

Hi,

I'm trying to customise the filter selector for the Grid and have run into a few issues.

I'm currently using this which works somewhat well:

                    <e-grid-filtersettings type="FilterBar"

                                           mode="Immediate"></e-grid-filtersettings>

The first problem I'm having with this is that when a column has the following set

                                       allowFiltering="false"

                                       allowSorting="false"

The filter box is disabled, but the disabled css is overwritten so it looks like it's selectable.

How can this be updated so it shows up with the disabled css to inform users it can't be set.

Second is, all filters are showing up as text filters which causes issues for date values.

Not sure why all filters are defaulting to text when there can be other filters.

How can this be updated so the filter option can change depending on what type you set, for example, allow datetime selector, checkbox selector, int selector, text field etc.

Third is the delay that happens due to debouncing.

On the immediate mode, there seems to be a delay before the operation starts which is fine, but is there a way to control the time so it can be shorter?

Last is when setting the filter type to anything other than FilterBar - such as menu or excel - i'm getting an error when i search for items as it says Request Failed.

Looking at the network, I can see that the data is being returned (same as the data used by the grid) but the drop down keeps saying Request Failed.

This is my ajax data source:

                    <e-data-manager url="/Api/Grid"

                                    adaptor="UrlAdaptor"></e-data-manager>

How can I fix this and also is there a way to stop any searching happening on the filter menu so it only searches on the grid?

I'm currently using V 27.1.48.

While waiting for a response, I've stumbled across this page which updates the filter bar to be a date selector:

https://www.syncfusion.com/forums/171499/adding-daterangepicker-filter-to-datagrid-filterbaroperator

But the way to achieve this is so complicated!

Surely there must be an easier way to get the columns to show their respective selectors instead of the generic textbox selectors that the system currently has? 

Such as yes/no for booleans, date selector for dates etc.

This feels like a major hack just to get the filters to display anything other than textboxes?

Even if you use the above guide, the textbox still shows up so users can type in the date which can cause issues and it's always defaulting to US format instead of the system default format or universal format (yyyy/MM/dd).

Any advice on getting this functionality implemented?

[Aishwarya Rameshbabu]

Hi DD,

Greetings from Syncfusion support.

Query 1: The first problem I'm having with this is that when a column has the following set allowFiltering="false" allowSorting="false". The filter box is disabled, but the disabled css is overwritten so it looks like it's selectable.

When the allowFiltering property is disabled for a column in the Grid, filtering cannot be applied to that column. This issue with the input field's selectable state is observed exclusively in the Chrome browser, which exhibits a similar behavior with native HTML elements. However, this issue does not occur in other browsers.

Query 2: Second is, all filters are showing up as text filters which causes issues for date values. Not sure why all filters are defaulting to text when there can be other filters.

When utilizing the 'FilterBar' type of filtering within a Grid, you can enable the filtering functionality on the columns by activating the showFilterBarOperator property in the filterSettings. This feature will display an operator list tailored to the column type, allowing for type-specific filtering. For further details, please refer to the documentation links provided below.

Documentation Links:

Filter Operators

Filter Operators Demo

Query 3: Third is the delay that happens due to debouncing. On the immediate mode, there seems to be a delay before the operation starts which is fine, but is there a way to control the time so it can be shorter?

You can adjust the delay time in immediate mode by configuring the immediateModeDelay property in filterSettings.

Query 4: Last is when setting the filter type to anything other than FilterBar - such as menu or excel - i'm getting an error when i search for items as it says Request Failed.

This is my ajax data source: <e-data-manager url="/Api/Grid" adaptor="UrlAdaptor"></e-data-manager>

The issue stems from not handling of the filter query on the server side. Please refer to the provided code example and sample, which demonstrate a ‘Menu’ type filtering mechanism that effectively handles filtering on the server side without any issues.

OrdersController.cs

        public object Get()

        {

              ………………….

              ………………….

         if (filter != null)

            {

                var filters = filter.Split(new string[] { " and " }, StringSplitOptions.RemoveEmptyEntries);

                foreach (var filterItem in filters)

                {

                    if (filterItem.Contains("substringof"))

                    {

                        // Performing Search operation

                        var searchParts = filterItem.Split('(', ')', '\'');

                        var searchValue = searchParts[3];

 

                        // Apply the search value to all searchable fields

                        data = data.Where(cust =>

                                cust != null &&

                                ((cust.OrderID?.ToString()?.Contains(searchValue) ?? false) ||

                                (cust.CustomerID?.ToLower()?.Contains(searchValue) ?? false) ||

                                (cust.ShipCity?.ToLower()?.Contains(searchValue) ?? false))).ToList();

                    }

                    else

                    {

                        // Performing filter operation

                        var filterfield = "";

                        var filtervalue = "";

                        var filterParts = filterItem.Split('(', ')', '\'');

                        if (filterParts.Length == 9)

                        {

                            filterfield = filterParts[3];

                            filtervalue = filterParts[5];

                        }

                        else if (filterParts.Length == 7)

                        {

                            filterfield = filterParts[2];

                            filtervalue = filterParts[4];

                        } else

                        {

                            var filterValueParts = filterParts[1].Split();

                            filterfield = filterValueParts[0];

                            filtervalue = filterValueParts[2];

                        }

                        switch (filterfield)

                        {

                            case "OrderID":

                                data = data.Where(cust => cust != null && cust.OrderID?.ToString() == filtervalue.ToString()).ToList();

                                break;

                            case "CustomerID":

                                data = data.Where(cust => cust != null && cust.CustomerID?.ToLower().StartsWith(filtervalue.ToString()) == true).ToList();

                                break;

                            case "ShipCity":

                                data = data.Where(cust => cust != null && cust.ShipCity?.ToLower().StartsWith(filtervalue.ToString()) == true).ToList();

                                break;

                                // Add more cases for other searchable fields if needed

                        }

                    }

                }

            }

 

Sample: Please find in the attachment.

It has been noted from the shared code example that you are utilizing the webApi service with UrlAdaptor. WebApi services should be managed using the webApiAdaptor of the DataManager. Kindly provide details on how you are managing the data within the service, and in which format it is returned, along with a screenshot of the network tab. This information will enable us to offer a more optimal solution for the reported issue.

Query 5: I've stumbled across this page which updates the filter bar to be a date selector.

If you are utilizing the ‘FilterBar’ type for filtering, the date selector can be rendered exclusively through the filterBarTemplate property. Conversely, if you employ the ‘Menu’ type of filtering, the date selector for date-type columns will be rendered by default. Please confirm the type of filter you are using in your application along with your specific requirements in detail. Based on this information, we will provide an appropriate solution to address your queries regarding the date format.

Providing the requested details will significantly aid us in delivering a solution that better meets your needs.

Regards

Aishwarya R

Attachment: 194840Sample_abb72e80.zip