We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid filter not working on dynamically added columns

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
            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();

                    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

Here is the definition of the grid

      .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); })
      .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
      .PageSettings(pg => pg.PageSize(10))
      .ScrollSettings(col => { col.Width("auto").Height("auto"); })

Thanks, Jeff

5 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team February 3, 2017 01:04 PM UTC

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> 
   .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"); 


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.  

Prasanna Kumar N.S.V 

CH Chris March 21, 2018 10:21 PM UTC

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?


VN Vignesh Natarajan Syncfusion Team March 22, 2018 02:31 PM UTC

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. 

Refer the help documentation for your reference 

Vignesh Natarajan 

CH Chris March 22, 2018 02:54 PM UTC

Perfect, that worked. 

Thank you.


VN Vignesh Natarajan Syncfusion Team March 23, 2018 06:59 AM UTC

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. 

Vignesh Natarajan 

Live Chat Icon For mobile
Up arrow icon