Grid Filtering with A Custom Filter Button

[ibrahim]

Hi,

I have got a form that contains 1 multiselect, 2 dropdown list, 1 button for filtering  and 1 grid  controls.  Every control is required for filter parameters.

For example;

When user click Filter button I will get Multiselect control's selected values, dropdown list control's values and send them to my Action Result method that filling my grid control and in this method my linq query will build and refresh the Grid's datasource.

But i dont know how to get selected values to and then send it to Action Method for re-build my linq query and refresh grid.  

Here is my Grid at Razor Page.

@(Html.Kendo().Grid<TelerikAspNetCoreDroppedCalls.Models.CallcentQueuecalls>()
                                                      .Name("grid")
                                                      .Columns(columns =>
                                                      {
                                                          columns.Bound(p => p.FromUserpart);
                                                          columns.Bound(p => p.TimeStart).Format("{0:dd/MM/yyyy hh:ss}");
                                                          columns.Bound(p => p.TimeEnd).Format("{0:dd/MM/yyyy hh:ss}");


                                                      })
                                                      .Pageable()
                                                      .Sortable()
                                                      .Scrollable()

                                                      .HtmlAttributes(new { style = "height:550px;" })
                                                      .DataSource(dataSource => dataSource
                                                          .Ajax()
                                                          .ServerOperation(false)
                                                          .PageSize(20)
                                                          .Read(read => read.Action("CallQueues_Read", "Grid")
          )
                                                      )
      )

Here is my Action Method for filling Grid.

public async Task<ActionResult> CallQueues_Read([DataSourceRequest]DataSourceRequest request)

        {

            var query = from r in _db.CallcentQueuecalls
                where !(r.ReasonNoanswercode == 0 && r.ReasonFailcode == 0 &&
                        r.ToDn != null && r.TsServicing != null)
                        && (r.TimeStart >= DateTime.Today.AddDays(-3)) && r.QNum=="0010"

                        select r;


            var dsResult = await query.ToDataSourceResultAsync(request);
            return Json(dsResult);
        }

[Tsvetina]

Hi Ibrahim,

You can pass the custom filter values together with the Grid Read request as additional parameters.

1. Configure the Grid to add custom parameters to each request:

.DataSource(dataSource => dataSource
     .Ajax()
     .ServerOperation(false)
     .PageSize(20)
     .Read(read => read.Action("CallQueues_Read", "Grid").Data("getParams")
     )
 )

2. Declare the ​getParams ​function, which should return the filter values:

function getParams() {
    var data = {
         filterParam1 = $("#widgetId").data("kendoDropDownList").value(),
         filterParam2 = kendo.serialize($("#widgetId2").data("kendoMultiSelect").value()),
         ...other params
    };
    return data;
}

3. Change the server method to accept the additional parameters:

public async Task<ActionResult> CallQueues_Read([DataSourceRequest]DataSourceRequest request, string filterParam1, string[] filterParam2)
{

}

This should help you send the needed parameters for filtering the Grid data.

Regards,
Tsvetina
Progress Telerik

[ibrahim]

Thank you so much.

[YN]

How to trigger the Grid to refresh after select a new item in the Dropdown list?

[Tsvetina]

Hi Sarah,

You can handle the DropDownList Change event and refresh the Grid DataSource manually:

.Events(e=>e.Change("onChange"))

<script>
    function onChange(e){
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.read();
    }
</script>

Regards,
Tsvetina
Progress Telerik