KendoUI Grid Ajax Binding Parameters For Select

Question

I have a basic KendoUI Grid for my ASP.NET MVC app which uses ajax binding for the read. I\'d like to enhance this so that a Form above the grid is used to help se

Answer 1

Nicholas answer could work if your requirements can be solved with the built in filtering. But if your requirements can be solved with the built filtering why do you want to create a custom search form?

So I suppose you have a reason to do the search manually so here is how we've done it in our project (so maybe there is more easier way but still this worked for us):

The controller action is fine:

public ActionResult _Search([DataSourceRequest]DataSourceRequest request, 
                            CustomerSearchModel customerSearchModel)
{
    return Json(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(request));
}

Next step: you need a JavaScript function which collects the data from the search form (the property names of the JS object should match the property names of your CustomerSearchModel) :

function getAdditionalData() {
    // Reserved property names
    // used by DataSourceRequest: sort, page, pageSize, group, filter
    return {
        FirstName: $("#FirstName").val(),
        LastName: $("#LastName").val(),
        //...
    };
}

Then you can configure this function to be called on each read:

.DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_Search", "Customer")
                          .Data("getAdditionalData"))
    )

Finally in your button click you just need to refresh the grid with:

$('#Grid').data('kendoGrid').dataSource.fetch();

Answer 2

Refer Pass Additional Data to the Action Method

To pass additional parameters to the action use the Data method. Provide the name of a JavaScript function which will return a JavaScript object with the additional data:

A working Search example listed below:

Important: type="button" for the button; And AutoBind(false) for Grid; otherwise, it won’t work

VIEW

@model  IEnumerable<KendoUIMvcSample.Models.Sample>
@{
    ViewBag.Title = "Index";
}


<script type="text/javascript">


    function getAdditionalData()
    {
        return {
            FirstName: 'A',
            LastName: 'B',
        };
    }

    $(document).ready(function ()
    {
        $('#Submit1').click(function ()
        {
            alert('Button Clicked');
            //Refresh the grid
            $('#ssgrid222').data('kendoGrid').dataSource.fetch();
        });

    });

</script>

<h2>Index</h2>
@using (Html.BeginForm())
{ 

    @(Html.Kendo().Grid<KendoUIMvcSample.Models.Sample>()    
    .Name("ssgrid222")
    .Columns(columns => {
        columns.Bound(p => p.SampleDescription).Filterable(false).Width(100);
        columns.Bound(p => p.SampleCode).Filterable(false).Width(100);
        columns.Bound(p => p.SampleItems).Filterable(false).Width(100);
    })
    .AutoBind(false)
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Sample")
        .Data("getAdditionalData"))
     )
  )

 <input id="Submit1" type="button" value="SubmitValue" />

}

Controller

namespace KendoUIMvcSample.Controllers
{
    public class SampleController : Controller
    {
        public ActionResult Index()
        {
            SampleModel AddSample = new SampleModel();
            Sample s1 = new Sample();
            return View(GetSamples());
        }
        public static IEnumerable<Sample> GetSamples()
        {
            List<Sample> sampleAdd = new List<Sample>();
            Sample s12 = new Sample();
            s12.SampleCode = "123se";
            s12.SampleDescription = "GOOD";
            s12.SampleItems = "newone";
            Sample s2 = new Sample();
            s2.SampleCode = "234se";
            s2.SampleDescription = "Average";
            s2.SampleItems = "oldone";
            sampleAdd.Add(s12);
            sampleAdd.Add(s2);
            return sampleAdd;
        }
        public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel)
        {
            string firstParam = customerSearchModel.FirstName;
            return Json(GetOrders().ToDataSourceResult(request));
        }
        private static IEnumerable<Sample> GetOrders()
        {
            return GetSamples();
        }
    }
    public class CustomerSearchModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Model

namespace KendoUIMvcSample.Models
{
    public class SampleModel
    {
        public List<Sample> samples;
    }
    public class Sample
    {
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }
    }
}

Answer 3

You can set the filters on the grid by calling filter on the grid's data source.

So in your button's onclick handler function, put something like this:

var $Grid = $('#Grid').data('kendoGrid');

$Grid.dataSource.filter([
  { field: 'FirstName', operator: 'eq', value: $('#firstName').val() },
  { field: 'LastName', operator: 'eq', value: $('#lastName').val() }
]);

Here's a link to the Kendo docs: DataSource.filter