Predefined custom filters

[Rodrigo]

Hi, i'd like to create predefined custom filters for grids.

For example, i'd like to have tree or four buttons when clicked, set a predefined filter to QueryBuilder and then refresh the Grid.

Is it possible?

Thank you.

[Aravinthan Seetharaman]

Hi Rodrigo, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your requirement. And we can achieve your requirement by using Button click. On button click we are setting rule for QueryBuilder to generate query. And using this query we are filtering the records of the Grid. Please refer the below code snippet and sample. 

 

 

<div class="col-lg-12 control-section" style="min-height: auto;"> 

    @Html.EJS().QueryBuilder("querybuilder").Width("100%").Columns(col => 

{ 

   col.Field("TaskID").Label("Task ID").Type("number").Add(); 

   col.Field("Name").Label("Name").Type("string").Add(); 

   col.Field("Category").Label("Category").Type("string").Add(); 

   col.Field("SerialNo").Label("Serial No").Type("string").Add(); 

   col.Field("InvoiceNo").Label("Invoice No").Type("string").Add(); 

   col.Field("Status").Label("Status").Type("string").Add(); 

}).DataSource(ViewBag.dataSource).MaxGroupCount(5).RuleChange("updateRule").Render() 

</div> 

<div class="col-lg-12 control-section"> 

    <div class="content-wrapper"> 

        @Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("100%").Columns(col => 

   { 

       col.Field("TaskID").HeaderText("Task ID").Width(120).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

       col.Field("Name").HeaderText("Name").Width(140).Add(); 

       col.Field("Category").HeaderText("Category").Width(140).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

       col.Field("InvoiceNo").HeaderText("Invoice No").Width(130).Add(); 

       col.Field("Status").HeaderText("Status").Width(120).Add(); 

       col.Field("SerialNo").HeaderText("Serial No").Width(130).Add(); 

   }).AllowPaging(true).PageSettings(new GridPageSettings { PageSize = 8, PageCount = 5 }).Render() 

    </div> 

</div> 

@Html.EJS().Button("btn").Content("Set Rule").Render() 

 

 

<script></script> 

 

<script> 

    function updateRule(args) { 

        var dataManagerQuery 

        var qryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), 'query-builder'); 

        var predicate = qryBldrObj.getPredicate(args.rule); 

        if (ej.base.isNullOrUndefined(predicate)) { 

            dataManagerQuery = new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']); 

        } else { 

            dataManagerQuery = new ej.data.Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']).where(predicate); 

        } 

        var grid = ej.base.getComponent(document.getElementById("grid"), 'grid'); 

        grid.query = dataManagerQuery; 

        grid.refresh(); 

    } 

    document.getElementById('btn').addEventListener('click', function () { 

        var qryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), 'query-builder'); 

        qryBldrObj.setRules({ 'condition': 'or', 'rules': [{ 'label': 'Category', 'field': 'Category', 'type': 'string', 'operator': 'equal', 'value': 'Laptop' }] }); 

        updateRule({ rule: qryBldrObj.getValidRules(qryBldrObj.rule) }); 

    }) 

</script> 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165234/ze/MVC_QB_SetRule_Btn_Click221903236  

 

Could you please check whether the given details are fulfilling your requirement and get back to us if you need assistance on this. 

 

Regards, 

Aravinthan S