Grid filter not working on dynamically added columns

[Jeffrey Stone]

I am using a grid which has approximately 20 columns.

Depending upon what the user is viewing there are some dynamic columns - which I either add or remove using the following:

The problem I am having is that the Excel Filter does not work for the newly added fields.

Here is the basic flow of the request:

// this function is called when the new data needs to be displayed in the grid
function loadBacktestGroupBacktestResults(id, backtestResultId) {
        // go get the dynamic columns
        $.ajax({
            type: "GET",
            dataType: "json",
            url: settings.getAdditionalFieldsUrl,
            data: {
                type: "backtestResult",
                id: id
            },

            success: function(result) {
                var gridElement = settings.$backtestResultGrid;
                var gridInstance = gridElement.ejGrid("instance");
                var parameters = { type: "backtestResult", id: backtestResultId, numberOfTopResults: 0 }
                var query = new ej.Query().addParams();

                $.each(parameters,
                    function(key, value) {
                        query.addParams(key, value);
                    });

                gridElement.ejGrid({ query: query });

                // I have simplified the next few lines of code for this example to show at a high level what the logic does
                var fieldsToAdd = [ { field: "fieldName1", allowEditing: false, headerText: "Dynamic Field 1" }, { field: "fieldName2", allowEditing: false, headerText: "Dynamic Field 2" } ];
                var fieldsToRemove = // gets an array of column names to remove
                if (fieldsToAdd.length > 0 || fieldsToRemove.length > 0)  {
                    gridInstance.columns(fieldsToAdd, "add");
                    gridInstance.columns(fieldsToRemove, "remove");
                    // updating the fields will cause an update in the datasource so we don't need to refresh the content
                }
                else {
                    // refresh the grid content will will use the new parameters
                    gridInstance.refreshContent();
                }
            }
        });

Here is the definition of the grid

@(Html.EJ().Grid<BacktestResultRow>("BacktestResultGrid")
      .Datasource(ds => ds.URL(Url.BacktestResultsBatchDataSource()).BatchURL(Url.BacktestResultsBatchUpdate()).Adaptor(AdaptorType.UrlAdaptor))
      .Query("new ej.Query().addParams('type','').addParams('id','0').addParams('numberOfTopResults','0')")
      .EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch); })
      .AllowFiltering()
      .AllowPaging()
      .AllowResizeToFit()
      .AllowSelection()
      .AllowScrolling()
      .AllowSorting()
      .AllowTextWrap()
      .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
      .IsResponsive()
      .MinWidth(250)
      .PageSettings(pg => pg.PageSize(10))
      .SelectionType(SelectionType.Multiple)
      .ScrollSettings(col => { col.Width("auto").Height("auto"); })
      .ShowColumnChooser()


Thanks, Jeff

[Prasanna Kumar Viswanathan]

Hi Jeffrey, 

Thanks for contacting Syncfusion support. 

We checked in our sample by adding new columns in a button click using columns method.  In our sample the Excel filter is working fine for the newly added fields.  

To find out the root cause we need the following details, 

1. Have you face any script error when you click on the excel filter icon for the newly added fields? If yes, Share the screenshot and stackrace of an issue. 

2. Is the filter dialog open for the newly added fields?  

3. Essential Studio Version details. 

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

Find the code example and sample:  

<button id="button" onclick="column()">Columns</button> 

 

@(Html.EJ().Grid<object>("FlatGrid") 

   .Datasource(d => d.URL("/Home/GetData").BatchURL("/Home/BatchUpdate").Adaptor(AdaptorType.UrlAdaptor)) 

   .EditSettings(edit => edit.AllowEditing().EditMode(EditMode.Batch)) 

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

 .Columns(col => 

  { 

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

  }) 

    

 ) 

 

 

<script type="text/javascript"> 

    function column() { 

        var grid = $("#FlatGrid").ejGrid("instance"); 

        var fieldsToAdd = [{ field: "CustomerID", allowEditing: false, headerText: "Customer ID" }, { field: "EmployeeID", allowEditing: false, headerText: "Employee ID" }]; 

        if (fieldsToAdd.length > 0) { 

            grid.columns(fieldsToAdd, "add"); 

             

        } 

    } 

</script> 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128646/ze/Sample1060447140 

Note : There are two scenarios that the Excel Filter does not work for the newly added fields. 

1. If you add a new type column to grid dynamically. i.e., if the initially defined columns doesn’t have a string type and if you dynamically add a string type column, script error thrown on clicking the filter icon. 

 

2. If the newly added column has a null value as first record, then we unable to open the filter dialog for the newly added fields.  

 

If you facing the issue with above scenarios, please get back to us.  

Regards, 

Prasanna Kumar N.S.V 

[Chris]

I am facing a very similar scenario except that I am using ASP.Net Core. 

I went into the database and edited it so that the newly added field for the first record is not null and then it worked.  How can I get this to work if the first record has a null value?

Thanks,
Chris

[Vignesh Natarajan]

Hi Chris, 

Thanks for using Syncfusion products. 

Query: “ How can I get this to work if the first record has a null value” 

We have analyzed your query and we suspect that you want to filter the newly added/generated column when the first record value is null. We suggest you to give type property to the newly added column. This will help in filter the records when value is null. 

Refer the Knowledge base document for your reference. This knowledge base document explain how the column type is set base on its first record. So when first record value is null, column type is not set so filtering cannot be performed. 

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

Refer the help documentation for your reference 

https://help.syncfusion.com/aspnet-core/grid/columns#type  

Regards, 

Vignesh Natarajan 

[Chris]

Perfect, that worked. 

Thank you.

Chris

[Vignesh Natarajan]

Hi Chris, 

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution. 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan