Apply search field criteria to Grid

2 Answers 21 Views
Grid
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Richard asked on 18 Oct 2021, 02:06 PM

Hello,

I've created an Index screen with a Grid, but I want to be able to fill and submit some search criteria before the Read action occurs, then use those values in the Action method on the controller. I've set auto-bind="false" for the Grid.

My Grid has a data source:

    <kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="20">
        <transport>
            <read url="@Url.Action("TblPart_Read", "TblPart");" data="searchData" />
        </transport>
    </kendo-datasource>

    function searchData() {
        return {
            search: $("#txtSearch").val(),
            archived: $("#chArchived").prop('checked')
        };
    }

The searchData consists of textbox and checkbox values.

The controller action is as follows:

        public async Task<ActionResult> TblPart_Read([DataSourceRequest] DataSourceRequest request)
        {
            var service = new TblPartService(_context);
            // omitted, but this is where I will filter the result based on the searchData

            return Json(result);
        }

How do I:

  • Make the Grid display the filtered data when the form is submitted
  • Retrieve searchData in the controller action?

Many thanks,

Richard

2 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 2
Iron
Iron
Iron
answered on 19 Oct 2021, 02:44 PM

For my inputs:

            <input type="text" id="txtSearch" name="txtSearch" />
            <input type="checkbox" id="cbArchived" name="cbArchived">

I was able to get it to work using the following code:

    function submitSearch() {
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.read(searchData());
    }

    function searchData() {
        return {
            search: $("#txtSearch").val(),
            archived: $('#cbArchived').is(":checked")
        };
    }

And then in the controller:

        public async Task<ActionResult> TblPart_FilteredRead([DataSourceRequest] DataSourceRequest request, string search, bool archived)
        {
            var service = new TblPartService(_context);
            var filter = await service.Search(search, archived);

0
Tsvetomir
Telerik team
answered on 21 Oct 2021, 06:07 AM

Hi Richard,

Alternatively, from sending the filter value as an additional parameter, you could apply the filter directly to the data source (if the filter should be done to a specific field):

var filter =   {field: field,
                        operator:'eq',
                        value: value};

grid.dataSource.filter(filter);

Also, we do expose the search panel functionality out-of-the-box:

https://demos.telerik.com/aspnet-core/grid/search-panel

 

Regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Richard
Top achievements
Rank 2
Iron
Iron
Iron
commented on 22 Oct 2021, 12:15 PM

Many thanks Tsvetomir - I'll also give that a try
Tags
Grid
Asked by
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Tsvetomir
Telerik team
Share this question
or