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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

error using clearFiltering()

Thread ID:

Created:

Updated:

Platform:

Replies:

126260 Oct 4,2016 03:26 PM UTC Oct 13,2016 11:49 AM UTC ASP.NET MVC 10
loading
Tags: Grid
CLAUDIO RICCARDI
Asked On October 4, 2016 03:26 PM UTC

Hi,

I'm trying to remove filters from ejGrid component using JavaScript.

The code I use is this:

    function btnRemoveFilters() {
        var obj = $("#CustomersGrid").ejGrid("instance");
obj.clearFiltering();
   }

When I call the JavaScript function the following error is shown:

ej.web.all.min.js:10         Uncaught TypeError: Cannot read property 'filterType' of null

I use version 14.2.0.26 of Essential Studio and this is the header of ej.web.all.min.js:

/*!
*  filename: ej.web.all.min.js
*  version : 14.2.0.28
*  Copyright Syncfusion Inc. 2001 - 2016. All rights reserved.
*  Use of this code is subject to the terms of our license.
*  A copy of the current license can be obtained at any time by e-mailing
*  licensing@syncfusion.com. Any infringement will be prosecuted under
*  applicable laws. 
*/
Maybe the problem is related to the version of js file...

Thanks a lot.

Claudio

CLAUDIO RICCARDI
Replied On October 4, 2016 03:31 PM UTC

UPDATE

Even if I use versione 14.2.0.26 of ej.web.all.min.js file, the problem persists.

Claudio

indrani Gajjarapu
Replied On October 5, 2016 10:19 AM UTC

Hi,

Even i have the same issue.

I am trying implement filters on one grid when a cell of another grid is clicked.

The filter works for the first time and for the second time, it filters through the filtered Columns even if i apply clearFiltering().

Please help me with the best way possible

    function Cellclick(args)
    {
        var gridObj = $("#ResultsGrid").ejGrid("instance");
        $("#ResultsGrid").ejGrid("clearFiltering","PupilID");
        var GridData = gridObj.model.dataSource;
        var colName = args.columnName;
 
        var IDs = args.data[colName].PupilIDs;
        console.log(IDs);
 
        
        
        var filterData = [];
        var x = 0;
        for (var y = 0; y < IDs.length;y++)
        {
          filterData.push(ej.DataManager(GridData).executeLocal(ej.Query().where("PupilID", ej.FilterOperators.equals, IDs[y], false))[0]);
        }
       
       console.log(filterData);
       gridObj.dataSource(filterData);
      
}


indrani Gajjarapu
Replied On October 5, 2016 10:22 AM UTC

I am using version 14.2.0.32 of ej.web.all.min.js

Mani Sankar Durai [Syncfusion]
Replied On October 5, 2016 12:53 PM UTC

Hi Claudio, 

Thanks for contacting Syncfusion support, 

We have analyzed your query and we are not able to reproduce the reported issue. We have also prepared a sample that can be available from the below link, 

Also please refer the documentation link 

In the sample we have filtered the EmployeeID column during initial render of grid. By clicking the button click we have cleared the filtered column. 
Please refer the below code example 
$(function () { 
            $("#button31").ejButton({ 
                showRoundedCorner: true, 
                size: "small", 
                click:"click" 
            }); 
            $("#Grid").ejGrid({ 
                 dataSource: ej.DataManager(window.gridData), 
                allowFiltering: true, 
                filterSettings: { filterType: "menu", filteredColumns: [{ field: "EmployeeID", operator: "startswith", value: "3", predicate: "and" }] }, 
 
            }); 
        }); 
    </script> 
 
    <script type="text/javascript"> 
        function click(args) { 
            var grid = $("#Grid").ejGrid("instance"); 
            grid.clearFiltering(); 
        } 
    </script> 
</body> 
</html> 
 
 

If you still face the issue please get back to us with the following details, 
1.       Share the expanded screenshot of the issue you faced in the console window. 
2.       In which scenario you are facing this issue? 
3.       In which case you are calling the clearFiltering method? 
4.       If possible please replicate the issue in the above sample. 
5.       Share the full grid code. 
 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 
Manisankar Durai. 


indrani Gajjarapu
Replied On October 5, 2016 04:46 PM UTC

Hi,

I have two grids in the same page as shown in the attached sample.

Grid2 should be filtered when a cell in Grid1 is clicked.

I have used CliendSideEvents, "RecordClick"  to trigger the click event of the cell in Grid1.

As shown in the code snippet, then creating an object for Grid2 and applying the filters with a list of Pupil IDs.

First cell click works well. However, when we click any other cell next time, It is filtering the already filtered dataSource.

I have applied clearFiltering() which did not work here. It might because after filtering I am applying the filtered data to the grid as shown below.
gridObj.dataSource(filterData);
Correct me if i am wrong.




Attachment: sample_2a7909a8.zip

Mani Sankar Durai [Syncfusion]
Replied On October 6, 2016 11:18 AM UTC

Hi Indrani, 

We have analayzed your query and we are able to reproduce the reported issue. The problem is not with clearFiltering method.  
In the initial loading you have passed all the grid dataSource in the recordClick event in the variable “GridData” to retrieve the data for the Grid 2 based on the cell value from the Grid 1 and after that you have pushed the filterData to the grid dataSource so that it works for the first time.  
After pushing the filterData to the dataSource for the Grid2 it will contain only that filterData as a grid dataSource. So upon further clicking the record on Grid 1 we cannot retrieve the data based on cell value for grid2.  
Since it contains only filterData and so it remains same data upon clicking the record. To avoid this issue we suggest you to pass the whole grid dataSource in the global variable and pass that variable to filter based on clicking the record on grid1. 
Please refer the below code example, 
<script type="text/javascript"> 
        var data = ej.DataManager(window.gridData).executeLocal(ej.Query()); 
        $(function () { 
            $("#MasterGrid").ejGrid({ 
 
                ], 
                recordClick: function (args) { 
                    var gridObj = $("#DetailGrid").ejGrid("instance"); 
                    $("#DetailGrid").ejGrid("clearFiltering", "EmployeeID"); 
                    var GridData = gridObj.model.dataSource; 
                    var colName = args.columnName; 
                    var IDs = args.cellValue; 
                    var filterData = [];                     
                      filterData.push(ej.DataManager(data).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equals, IDs, false))[0]))); 
                    }                     
                    gridObj.dataSource(filterData); 
                 } 
 
            }); 
            $("#DetailGrid").ejGrid({ 
              dataSource: window.gridData, 
                … 
                allowFiltering: true, 
                filterSettings: { filterType: "menu", filteredColumns: [{ field: "EmployeeID", operator: "startswith", value: "3", predicate: "and" }] }, 
                columns: [ 
 
                          
                ] 
            }); 
    </script> 

From the above code example, in the initial rendering we have filter the data for the Grid2. Then when clicking the record we have passed the data to the Grid2 based on cellValue. 

In the recordClick event, you have initialized as “args.data[colName].PupilIDs” to take the particular cell value. So instead of that you can use args.cellValue in the recordClick event to take the particular cell value and there is no need to use for loop. 
 

We have also prepared a sample that can be available from the below link. 
Also please refer the documentation link about recordClick event 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


indrani Gajjarapu
Replied On October 7, 2016 10:44 AM UTC

Hi,

I can see the result if the both grids are implemented in javascript.

However, i implemented my grids in MVC and the dataSource for the grids are DataTables present in the model. How can i achieve the same functionality in this scenario

.Datasource((DataTable)Model.ResultsGrid)

Mani Sankar Durai [Syncfusion]
Replied On October 10, 2016 11:34 AM UTC

Hi Indrani, 


We have analyzed your query and based on your requirement we have prepared a sample that can be downloadable from the below link 



In the above sample we have converted DataTable to JSON by using JavaScriptSerializer and passed it to client-side using ViewBag. In Client-side, we have json encoded the viewbag data and then bound to grid.  

Please refer the below code example 

[Index.cshtml] 
<script type="text/javascript"> 
    var data = @Html.Raw(Json.Encode(@ViewBag.datasource2)); 
        function recordClick(args) { 
            var gridObj = $("#DetailGrid").ejGrid("instance"); 
            $("#DetailGrid").ejGrid("clearFiltering", "Value"); 
            var GridData = gridObj.model.dataSource; 
            var colName = args.columnName; 
            var IDs = args.cellValue; 
            var filterData = []; 
            filterData.push(ej.DataManager(data).executeLocal(ej.Query().where("Value", ej.FilterOperators.equals, IDs, false))[0]); 
            gridObj.dataSource(filterData); 
        } 
</script> 
[HomeController.cs] 
public ActionResult Index() 
        { 
            ViewBag.datasource1 = GetData(); 
            var DataSource = GetDataTale(); 
            var datalist = DataTableToJSON(DataSource); 
            ViewBag.datasource2 = datalist; 
            return View(); 
        } 
public static object DataTableToJSON(DataTable Table) 
        { 
            var list = new List<Dictionary<string, object>>(); 
 
             
            JavaScriptSerializer serializer = new JavaScriptSerializer(); 
            string serialize = serializer.Serialize(list); 
            var data = serializer.Deserialize<IEnumerable<object>>(serialize); 
            return data; 
        } 

Also please refer the documentation link about dataTable binding: 



Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


indrani Gajjarapu
Replied On October 12, 2016 12:26 PM UTC

Hi,

That worked!!..I have put the data in a variable and used it in the jquery.

Thank you

Mani Sankar Durai [Syncfusion]
Replied On October 13, 2016 11:49 AM UTC

Hi Indrani 

Thanks for your feedback. 

Please get back to us if you need further assistance. 

Regards, 
Manisankar Durai. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;