error using clearFiltering()

[CLAUDIO RICCARDI]

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

*  [e-mail]. 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]

UPDATE

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

Claudio

[indrani Gajjarapu]

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]

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

[Mani Sankar Durai]

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, 

Link: http://jsplayground.syncfusion.com/wfmer121 

Also please refer the documentation link 

Link: https://help.syncfusion.com/js/api/ejgrid#methods:clearfiltering 

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]

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]

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. 

Link: http://jsplayground.syncfusion.com/hdvojexi 

Also please refer the documentation link about recordClick event 

Link: https://help.syncfusion.com/js/api/ejgrid#events:recordclick 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[indrani Gajjarapu]

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]

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 

Link: http://www.syncfusion.com/downloads/support/forum/126260/ze/EJGrid-19479949 

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: 

Link: https://help.syncfusion.com/aspnetmvc/grid/data-binding#datatable 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[indrani Gajjarapu]

Hi,

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

Thank you

[Mani Sankar Durai]

Hi Indrani 

Thanks for your feedback. 

Please get back to us if you need further assistance. 

Regards, 

Manisankar Durai.