Filtering a Kendo UI Grid in MVC with Remote Data Binding using controls outside of the Grid

Question

I am working on a project where the client wants to be able to have a "Control" on the page where the user can start typing and a data grid will filter with each keystroke.

The filter should use the starts with operator, and removing all of the characters inside of the input ("control") will reset the Grid to its original unfiltered state.

My Controller, I don't want to modify it or add additional parameters:

public JsonResult GetFoo([DataSourceRequest]DataSourceRequest request, bool active = true)
{
    List<Foo> model = FooContext.Foo.GetFoo(active);
    model = model.OrderBy(m => m.Name).ToList();
    return Json(model.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}

This is my current Gird:

@(Html.Kendo().Grid<foo>()
    .Name("fooTable")
    .PrefixUrlParameters(Settings.Grid.PrefixUrlParameters)
    .Columns(columns =>
    {
        columns
            .Bound("fooName")
            .ClientTemplate("<a href='#= Id #'>#= fooName #</a>");
        columns
            .Bound("StateName")
            .Title("State").Width(120);
        columns.Bound("PreviousYearsHomes")
            .Title("Previous Years Homes")
            .Width(120); 
        columns.Bound("CurrentYearsHomes")
            .Title("Current Years Homes")
            .Width(120);
    .Sortable()
    .Resizable(q => q.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("GetBuilders", "Builders", new { Area = "Administrator", active = true }))
    )
)

The Filter should filter the 'fooName' column.

Answer 1

I really didn't want to answer my own question, but for anyone trying this for themselves this is what I did to get the results I was looking for.

Added an input with an Id of fooNameInput

<script type="text/javascript">


$(function () {
    $('#fooNameInput').on("keyup change", function () {
        var Value = $(this).val();
        if (Value.length) {
            FilterGridByName(Value, 'Name');
        }
        else {
            $('#fooTable').data("kendoGrid").dataSource.filter([]);
        }
    });



    function FilterGridByName(Value, Field) {
        if (Field != "") {
            if (Value != "") {
                $('#fooTable').data("kendoGrid").dataSource.filter({ field: Field, operator: "startswith", value: Value })
            }
            else {
                $('#fooTable').data("kendoGrid").dataSource.filter([]);
            }
        }
    }
});
</script>

This is working as I wanted it to work but if there is a better way please let me know in the comments and I will update this answer/remove it.

This is a another option that I feel is important to include -

Another Option Provided by : https://stackoverflow.com/users/2293059/stevechapman

I would recommend specifying the .Data(string handler) method available on the data source, for example

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("GetBuilders", "Builders", new { Area = "Administrator", active = true })
        .Data("getDataParams")
    )
)

This allows you to specify a javascript function that returns a JSON object defining additional parameters to append to the ajax request.

You can use something like this:

var getDataParams = function (e) {
    var result = {
        name: $('#fooNameInput').val()
    }
    return result;
};

And to trigger a refresh of the grid (from a key up event or similar):

$("#fooTable").data("kendoGrid").dataSource.read();

Some docs to assist:

Kendo Forums working example

MVC Fluent docs

Answer 2

I would recommend specifying the .Data(string handler) method available on the data source, for example

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("GetBuilders", "Builders", new { Area = "Administrator", active = true })
        .Data("getDataParams")
    )
)

This allows you to specify a javascript function that returns a JSON object defining additional parameters to append to the ajax request.

You can use something like this:

var getDataParams = function (e) {
    var result = {
        name: $('#fooNameInput').val()
    }
    return result;
};

And to trigger a refresh of the grid (from a key up event or similar):

$("#fooTable").data("kendoGrid").dataSource.read();

Some docs to assist:

Kendo Forums working example

MVC Fluent docs