1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. external filtering use FilterByColumn method

external filtering use FilterByColumn method

Hi,
Need help to perform the external filtering use filterByColumn method.

when we select only one value from MultiSelect Company controls its working fine & filter record in grid but when we select multiple values from MultiSelect Company controls how we send prediction or another property.
could you please share example for use external filtering on syncfusion js2 grid.


The following code example describes the above condition.
<div class="form-group">
<h4> Company</h4>
@Html.EJS().MultiSelect("Company").Mode(VisualMode.Box).Placeholder("Select").DataSource(Model.Companies).Fields(new MultiSelectFieldSettings { Text = "CommonName", Value = "Id" }).Width("500px").Render()
<button type="button" class="btn btn-primary bg-grid-btn btn-flat" id="btn_filter" style="margin-right: -65px;">Filter</button>
</div>

<section class="col-lg-12 margin-top-5 clear-both remove-padding">
    @Html.EJS().Grid("DataGrid").DataSource(ds =>
{
   ds.Url("/Asset/UrlDatasource")
   .Adaptor("UrlAdaptor");
}).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox)).Columns(col =>
{
   col.Field("Id").HeaderText("Asset ID").IsPrimaryKey(true).Visible(false).Filter(new { type = "Menu" }).Add();
   col.Field("AssetStatus").HeaderText(labelDictionary["AssetStatus"]).AllowSorting(true).MinWidth("90").Width("150").MaxWidth("200").Add();
}).AllowPaging().Render()
</section>

<script>
  $('#btn_filter').click(function (args) {
 gridObj.filterByColumn('AssetStatus', 'equal', $(Company).val());
}
</script>

Thanks for an advance :)



3 Replies
MF Mohammed Farook J Syncfusion Team October 26, 2018 10:30 AM UTC

Hi Shweta, 
 
Thanks for contacting Syncfusion support. 
 
From your query, we found that you want to filter the multiple values of the single column without using default Grid filters. By default you can filter only one column in filterByColumn method.  So We have achieved your requirement by using query property of the Grid. We have manually created the predicates for selected values and provided that predicates to query property. Finally we have called the refresh method to show the changes in the Grid. Please refer the following code snippet, 
 
<script type="text/javascript"> 
    function Click(args) { 
        var multiselect = document.getElementById("Multiselect").ej2_instances[0]; 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var pre = [], predicate, query; 
        if (multiselect.value != null && multiselect.value.length != 0) { 
            if (multiselect.value.length > 1) { 
                for (var i = 0; i < multiselect.value.length; i++) { 
                    pre.push(new ej.data.Predicate('CustomerID', 'equal', multiselect.value[i])); 
                } 
                predicate = new ej.data.Predicate.or(pre); 
            } 
            else { 
              predicate = new ej.data.Predicate('CustomerID', 'equal', multiselect.value[0]); 
            } 
            query = new ej.data.Query().where(predicate); 
        } 
        else { 
            query = new ej.data.Query(); 
        } 
        grid.query = query; 
       grid.refresh(); 
    } 
</script> 

We have attached our sample in the below link. Please refer that sample for further assistance, 
 
 
Refer the following link to know about query property and refresh method of the Grid: 
 
 
 
Refer the following link to know about predicate: 
 
 
Note : you can’t get filter records through filterSettings.columns because we have achieved by requirement by using grid query. 
 
 
This is not meet your requirement could you please explain more detail about your requirement. 
 
 
 
Regards, 
J Mohammed Farook 
 


DS Dhruv Shah replied to Mohammed Farook J December 30, 2019 07:39 AM UTC

Hi Shweta, 
 
Thanks for contacting Syncfusion support. 
 
From your query, we found that you want to filter the multiple values of the single column without using default Grid filters. By default you can filter only one column in filterByColumn method.  So We have achieved your requirement by using query property of the Grid. We have manually created the predicates for selected values and provided that predicates to query property. Finally we have called the refresh method to show the changes in the Grid. Please refer the following code snippet, 
 
<script type="text/javascript"> 
    function Click(args) { 
        var multiselect = document.getElementById("Multiselect").ej2_instances[0]; 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var pre = [], predicate, query; 
        if (multiselect.value != null && multiselect.value.length != 0) { 
            if (multiselect.value.length > 1) { 
                for (var i = 0; i < multiselect.value.length; i++) { 
                    pre.push(new ej.data.Predicate('CustomerID', 'equal', multiselect.value[i])); 
                } 
                predicate = new ej.data.Predicate.or(pre); 
            } 
            else { 
              predicate = new ej.data.Predicate('CustomerID', 'equal', multiselect.value[0]); 
            } 
            query = new ej.data.Query().where(predicate); 
        } 
        else { 
            query = new ej.data.Query(); 
        } 
        grid.query = query; 
       grid.refresh(); 
    } 
</script> 

We have attached our sample in the below link. Please refer that sample for further assistance, 
 
 
Refer the following link to know about query property and refresh method of the Grid: 
 
 
 
Refer the following link to know about predicate: 
 
 
Note : you can’t get filter records through filterSettings.columns because we have achieved by requirement by using grid query. 
 
 
This is not meet your requirement could you please explain more detail about your requirement. 
 
 
 
Regards, 
J Mohammed Farook 
 


well, I found this very helpful. But I need to do one step ahead.

after filtering by multiple values in one column if I need to do same in another column ?
how to do that?

it should be work like in one column results should be by OR operator
and between two columns it should be by AND operator.

please reply. 
thank you!

RR Rajapandi Ravi Syncfusion Team December 31, 2019 01:22 PM UTC

Hi Shweta, 

Thanks for the update. 

Query#: after filtering by multiple values in one column if I need to do same in another column ? how to do that? 

Based on your query we have prepared a sample and we suggest you to follow the below way to achieve your requirement. Here we are render the multiselect for another column “ShipCity”. Please refer the below code example and sample for more information. 

<input id="button" type="button" onclick="Click()" value="Filter" /> 
 
@Html.EJS().MultiSelect("Multiselect").Mode(VisualMode.Default).DataSource((string[])ViewBag.Multiselect).Width("300px").Render() 
 
<input id="button2" type="button" onclick="button2()" value="Filter" /> 
 
@Html.EJS().MultiSelect("Multiselect2").Mode(VisualMode.Default).DataSource((string[])ViewBag.Multiselect2).Width("300px").Render() 
 
@Html.EJS().Grid("Grid").DataSource( ds => ds.Url("/Home/UrlDataSource").Adaptor("UrlAdaptor")).Columns(col=> { 
 
    col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("120").Add(); 
    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 
    col.Field("EmployeeID").IsPrimaryKey(true).HeaderText("Employee ID").Width("170").Add(); 
    col.Field("ShipCity").HeaderText("Ship City").Width("170").Add(); 
 
}).AllowPaging().AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox)).Render() 
 
<script type="text/javascript"> 
    function Click(args) { 
        var multiselect = document.getElementById("Multiselect").ej2_instances[0]; 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var pre = [], query; 
        if (multiselect.value.length > 0) { 
            var predicate = grid.filterSettings.columns || []; 
            for (var i = 0; i < multiselect.value.length; i++) { 
                var obj = { field: 'CustomerID', operator: 'equal', uid: grid.getColumnByField('CustomerID').uid, value: multiselect.value[i], predicate: 'or' }; 
                predicate.push(obj); 
            } 
            grid.filterSettings.columns = predicate; 
        } 
        else { 
            grid.removeFilteredColsByField('CustomerID'); 
        } 
    } 
 
    function button2(args) { 
        var multiselect = document.getElementById("Multiselect2").ej2_instances[0]; 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var pre = [], query; 
        if (multiselect.value.length > 0) { 
            var predicate = grid.filterSettings.columns || []; 
            for (var i = 0; i < multiselect.value.length; i++) { 
 
                var obj = { field: 'ShipCity', operator: 'equal', uid: grid.getColumnByField('ShipCity').uid, value: multiselect.value[i], predicate: 'or' }; 
                predicate.push(obj); 
            } 
            grid.filterSettings.columns = predicate; 
        } 
        else { 
            grid.removeFilteredColsByField('ShipCity'); 
        } 
         
    } 
</script> 
 
 


Regards,
Rajapandi R 


Loader.
Up arrow icon