How to perform external filtering on Grid?

[Mohammad]

Hi,

Could you please provide me with a sample on how to perform data search and filtering using external filtering form with submit button like the attached image.

::My View::

______

    @(Html.EJ().Grid("Grid")

      .Datasource(ds => ds.URL("/Degrees/DataSource").UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.UrlAdaptor))

      .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

      .AllowScrolling()

      .AllowFiltering()

      .FilterSettings(filter => { filter.FilterType(FilterType.Excel);filter.MaxFilterChoices(1000); })

      //.FilterSettings(filter => { filter.ShowFilterBarStatus().StatusBarWidth(500).FilterBarMode(FilterBarMode.Immediate); })   /*Filtering Enabled*/

      .AllowSorting()    /*Sorting Enabled*/

      .SortSettings(sort => sort.SortedColumns(col => col.Field("Id").Direction(SortOrder.Ascending).Add()))

      .AllowPaging()    /*Paging Enabled*/

      .PageSettings(page => { page.PageSize(1); })

      .AllowSearching()

      .AllowGrouping() /*Paging Enabled*/

              .SelectionType(SelectionType.Single)

              .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineForm).ShowDeleteConfirmDialog(); })

              .ToolbarSettings(toolbar =>

              {

                  toolbar.ShowToolbar().ToolbarItems(items =>

                  {

                      items.AddTool(ToolBarItems.Add);

                      items.AddTool(ToolBarItems.Edit);

                      items.AddTool(ToolBarItems.Delete);

                      items.AddTool(ToolBarItems.Update);

                      items.AddTool(ToolBarItems.Cancel);

                      //items.AddTool(ToolBarItems.Search);

                  });

              })

        .Columns(col =>

        {

            col.Field("Id").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).TextAlign(TextAlign.Left).Width(100).Add();

            col.Field("Code").TextAlign(TextAlign.Left).Width(100).Add();

            col.Field("Visible").HeaderText("Visible").Width(100).EditType(EditingType.Boolean).Add();

            col.Field("Ordinal").HeaderText("Ordinal").TextAlign(TextAlign.Left).Width(100).Add();

        })

          .ClientSideEvents(eve => { eve.ActionFailure("Failure"); })

    )

::My Controller::

______

        public ActionResult Index()

        {

            return View();

        }

        public JsonResult DataSource(DataManager dm)

        {

            IEnumerable Data = db.Degrees;

            Syncfusion.JavaScript.DataSources.DataOperations operation = new DataOperations();

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                Data = operation.PerformSorting(Data, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator);

            }

            int count = Data.AsQueryable().Count();

            if (dm.Skip != 0)

            {

                Data = operation.PerformSkip(Data, dm.Skip);

            }

            if (dm.Take != 0)

            {

                Data = operation.PerformTake(Data, dm.Take);

            }

            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet);

        }

Attachment: Capture_457caa60.rar

[Thavasianand Sankaranarayanan]

Hi Mohammad, 

Thanks for contacting Syncfusion support. 

According your query we suspect that you want to filter the Grid records based on the values which entered in form above to the Grid. So, we suggest you to pass the entered values into the filterColumn() method of ejGrid control.  

For an example, we have two input box and one dropdown in the form. Then we call for the filterColumn method in the external button click and filter the record based on we entered the value in those boxes.  

Refer the below code example. 

[Gridfeatures.cshtml] 

    <input type="text" id="OrderID" placeholder="Enter OrderID" /> 

    <br /><br /> 

    <input type="text" id="EmployeeID" placeholder="Enter EmployeeID" /> 

    <br /><br /> 

    @Html.EJ().DropDownList("customersList").Datasource((IEnumerable<object>)ViewBag.datasource).DropDownListFields(df => df.Text("ShipCity").Value("ShipCity")) 

    <br /><br /> 

    <input type="button" id="Search" value="Search" onclick="Seacrhing()"> </input> 

    <br /> 

 

    <br/> 

    @(Html.EJ().Grid<OrdersView>("FlatGrid") 

    

    --- 

 

  .AllowFiltering() 

   .FilterSettings(filter => filter.FilterType(FilterType.Excel)) 

   .AllowSearching() 

   .Columns(col => 

            { 

                --- 

           }) 

    ) 

</div> 

 

<script type="text/javascript"> 

 

    function Seacrhing(args) { 

 

        var orderID = $("#OrderID").val(); 

        var employeeID = $("#EmployeeID").val(); 

 

        var dropObj = $("#customersList").ejDropDownList('instance'); 

        var shipCity = dropObj.getSelectedValue(); 

 

        var gridObj = $("#FlatGrid").ejGrid('instance'); 

 

        gridObj.filterColumn([ 

            { field: "OrderID", operator: "equal", matchcase: false, predicate: "or", value: orderID }, 

            { field: "EmployeeID", operator: "equal", matchcase: false, predicate: "or", value: employeeID }, 

            { field: "ShipCity", operator: "equal", matchcase: false, predicate: "or", value: shipCity } 

        ]) 

    } 

 

</script> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/133507/ze/SyncfusionMvcApplication123-old-1126633303.zip 

Refer the help documentation. 

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

Link: https://help.syncfusion.com/aspnetmvc/dropdownlist/getting-started#populating-data 

Link: https://help.syncfusion.com/api/js/ejdropdownlist#methods:getselectedvalue 

Link: https://help.syncfusion.com/aspnetmvc/grid/filtering#excel-like-filter 

Regards, 

Thavasianand S. 

[Mohammad]

Thank you so much for your reply.

It's working like a charm!

[Seeni Sakthi Kumar Seeni Raj]

Hi Mohammad,  

 

Thanks for the update. We are happy to hear that your requirement has been achieved. Please get back to us, if you require further assistance on this. 

 

Regards,  

Seeni Sakthi Kumar S. 

[Mohammad]

One more question please,

I noticed the parameters being passed to the DataManager predicates object get cached for unknown reason. e.g. When filtering the data in grid by OrderID, the data result will be displayed based on OrderID value BUT if you clear OrderID input and filter data using EmployeeID, the data result will be retrieved based on on BOTH OrderID value (which already has been cleared) and EmployeeID which results invalid data retrieval.

Is there any way to reset DataManager after each search

    public JsonResult DataSource(DataManager dm)

        {

            IEnumerable Data = db.Degrees;

            Syncfusion.JavaScript.DataSources.DataOperations operation = new DataOperations();

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                Data = operation.PerformSorting(Data, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator);

            }

            int count = Data.AsQueryable().Count();

            if (dm.Skip != 0)

            {

                Data = operation.PerformSkip(Data, dm.Skip);

            }

            if (dm.Take != 0)

            {

                Data = operation.PerformTake(Data, dm.Take);

            }

            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet);

        }

[Thavasianand Sankaranarayanan]

Hi Mohammad, 

Sorry for the inconvenience caused. 

We have analyzed your query and we are able to reproduce the reported issue from our end. We suggested you to add the below marked lines to avoid the reported issue. 

Refer the below code example. 

<script type="text/javascript"> 

    function Seacrhing(args) { 

         

        --- 

 

       var gridObj = $("#FlatGrid").ejGrid('instance'); 

 

        gridObj.model.filterSettings.filteredColumns = [];//add these lines 

        gridObj._excelFilter._predicates = [];//add these lines 

 

        gridObj.filterColumn([ 

            { field: "OrderID", operator: "equal", matchcase: false, predicate: "and", value: orderID }, 

            { field: "EmployeeID", operator: "equal", matchcase: false, predicate: "and", value: employeeID }, 

            { field: "ShipCity", operator: "equal", matchcase: false, predicate: "and", value: shipCity } 

        ]) 

    } 

</script> 

We have modified the sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/133507/ze/SyncfusionMvcApplication123956768035.zip 

Regards, 

Thavasianand S.