Apply search field criteria to Grid

[Richard]

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

[Tsvetomir]

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

[Richard]

Many thanks Tsvetomir - I'll also give that a try

[Richard]

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);