Filter not working for all the columns in the grid

[Daniel Rail]

Hi,

I'm using v14.2.0.26 with ASP.Net MVC 5.

I have a grid that is defined that displays 7 text fields and one column for commands.  The filter works for the first two fields, but doesn't work for the other fields, although the icon is displayed.

Here's the Razor code for the grid:

      @(Html.EJ().Grid<CTTJCatalogueDocumentaire.Models.Bibliographie>("FlatGrid")
           .Datasource(Model)
           .IsResponsive()
           .EnableResponsiveRow()
           .ToolbarSettings(toolbar =>
           {
               toolbar.ShowToolbar().ToolbarItems(items =>
               {
                   items.AddTool(ToolBarItems.PdfExport);
               });
           })
           .Mappers(map => map.ExportToPdfAction("/Bibliographies/ExportToPdf"))
           .AllowGrouping()
           .AllowPaging()
           .AllowFiltering()
           .AllowResizeToFit()
           .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
           .AllowResizing(true)
           .AllowSorting()
           .AllowTextWrap(true)
           .Columns(col =>
           {
               col.HeaderText("Action").Commands(command =>
               {
                   command.Type("details").ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                   {
                       Text = "Visualiser",
                       Click = "onViewClick",
                       Width = "80px"
                   }).Add();
               }).TextAlign(TextAlign.Center).AllowFiltering(false).AllowSorting(false).Width(115).Priority(1).Add();
               col.Field(p => p.TITRE).TextAlign(TextAlign.Left).Add();
               col.Field(p => p.AUTEUR).TextAlign(TextAlign.Left).Add();
               col.Field(p => p.COTE_1).TextAlign(TextAlign.Left).Add();
               col.Field(p => p.COTE_2).TextAlign(TextAlign.Left).Add();
               col.Field(p => p.COTE_3).TextAlign(TextAlign.Left).Add();
               col.Field(p => p.DATE_PUBLICATION).TextAlign(TextAlign.Left).Add();
               col.Field(p => p.FORMAT).TextAlign(TextAlign.Left).Add();
           }))

The filter works for the fields TITRE and AUTEUR, but will not work(icon is displayed, but nothing happens when clicked) with the other fields.  If I change the FilterType to FilterType.Excel, I get the same result.  If I change to FilterType.FilterBar, it will allow filtering, but only for an exact match and case sensitive.  All the fields are defined the same way in the model and in the database.

Any ideas on what to try or to look for would be appreciated.

Daniel Rail

[Prasanna Kumar Viswanathan]

Hi Daniel, 

Thanks for contacting Syncfusion support. 

We checked with our sample and the filtering is working fine for all the columns. We have also checked with the filter type as excel and we are able to filter all the columns.   

Find the code example and sample: 

@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("FlatGrid") 

.Datasource(Model) 

----------------------------- 

   

  .FilterSettings(filter => { filter.FilterType(FilterType.Menu); }) 

 

------------------- 

.Columns(col => 

{ 

    col.HeaderText("Action").Commands(command => 

    { 

        command.Type("details").ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 

        { 

            Text = "Visualiser", 

            Click = "onViewClick", 

            Width = "80px" 

        }).Add(); 

    }).TextAlign(TextAlign.Center).AllowFiltering(false).AllowSorting(false).Width(115).Priority(1).Add(); 

    col.Field(p=> p.OrderID).HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add(); 

    col.Field(p => p.CustomerID).HeaderText("Customer ID").TextAlign(TextAlign.Left).Add(); 

    col.Field(p=> p.Employee_ID).HeaderText("Employee ID").TextAlign(TextAlign.Left).Add(); 

    col.Field(p=> p.Ship_City).HeaderText("Ship City").TextAlign(TextAlign.Left).Add(); 

    col.Field(p=> p.Freight).HeaderText("Freight").TextAlign(TextAlign.Left).Format("{0:C}").Add(); 

}) 

) 

Sample: http://www.syncfusion.com/downloads/support/forum/124917/ze/Sample1185771708746205 

To reproduce the issue we need the following details, 

1. Did you face any console error while clicking on the filter icon for the other fields? If yes, share the screenshot 

                                                                                                                                 

2. Are you performing any operation before filtering the columns?   

3. If the DataSource is null for the column then the filter menu will not open for the particular column. So, please ensure that you have not bound the empty DataSource for other fields 

                                                                                                                                                                                                                                             

4. If possible, reproduce the issue in the attached sample. 

Regards, 

Prasanna Kumar N.S.V 

 

[Daniel Rail]

Hi,

We were able to figure out what is happening.  For the columns that the filter menu is not popping up, the column data for the first row happens to be NULL, although there is data in other subsequent rows.  If we modify that same row, so that all the columns have data(for the first row), then the filter menu works for all the columns.

We also tried the following, with no success:

.FilterSettings(filter => { filter.FilterType(FilterType.Menu).EnableComplexBlankFilter(true); })

How can we fix the problem?

[Prasanna Kumar Viswanathan]

Hi Daniel, 

We are able to reproduce the mentioned issue when the first row of data is NULL in the particular columns. By default, the Grid will get the column data type from the first record of DataSource. When the first row of data is NULL, Grid cannot find the actual data type of a column. In this case, we have to set the data type of the column explicitly.   

 

Find the code example and sample: 

 

.Columns(col => 

{ 

    ---------------------------------- 

   col.Field(p => p.CustomerID).HeaderText("Customer ID").TextAlign(TextAlign.Left).Add(); 

    col.Field(p=> p.Employee_ID).HeaderText("Employee ID").TextAlign(TextAlign.Left).Type("number").Add(); 

    col.Field(p=> p.Ship_City).HeaderText("Ship City").TextAlign(TextAlign.Left).Type("string").Add(); 

    col.Field(p=> p.Freight).HeaderText("Freight").TextAlign(TextAlign.Left).Format("{0:C}").Add(); 

}) 

Sample: http://www.syncfusion.com/downloads/support/forum/124917/ze/New_Html_Encode_Feature223832733 

For more information, refer the knowledge Base documentation 

https://www.syncfusion.com/kb/3539/error-in-filter-menu-number-date-and-boolean-columns-have-incorrect-operators 

Regards, 

Prasanna Kumar N.S.V 

 

[Daniel Rail]

Thanks,

Adding the Type("string") declaration for each columns worked.  I notice that if the Field declaration is a lambda expression, as I have, the field's "Display(Name="DisplayLabel")" attribute is used for the HeaderText of the column, and can be overridden with an explicit .HeaderText() declaration.  I would suggest that the Type property would also be automatically defined at the same time(at least for the types that are obvious, excluding complex types), and can be overridden with an explicit .Type() declaration.

Also, it would be helpful having an example of using .Type() somewhere in the online documentation with regards to filtering.

Again thanks for the help.

Best Regards,

Daniel Rail

[Prasanna Kumar Viswanathan]

Hi Daniel, 

Currently, we do not have data annotation support for type of model properties. So, we will consider this an improvement and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  

 

Link: https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards, 

Prasanna Kumar N.S.V