How to send data to Kendo Grid? - ajax

Question

My goal is to have an input text box with two buttons that will perform different database queries with the input and then output the results to the Kendo Grid. Could someone please show me an example or point out what I am doing wrong? I would like to use Ajax as, from my limited understanding, this would prevent a full page reload.
View code:
<div class="loginForm">
<div id="searchForm" class="well">
<h2>Search</h2>
<form method="post" action="~/Search/Search">
<input type="text" id="search" name="input" class="form-control input-group input-group-lg" placeholder="Search..." required autofocus/>
<br />
<input type="submit" id="bunNumBut" name="submitBut" class="btn btn-primary btn-sm pull-left" value="Bundle Number" />
<input type="submit" id="custNumBut" name="submitBut" class="btn btn-primary btn-sm pull-right" value="Customer Number" />
</form>
</div>
</div>
<br />
<div>
{
#(Html.Kendo().Grid(Model)
.Name("searchResultsG")
.Columns(columns =>
{
columns.Bound(c => c.BundleNumber);
columns.Bound(c => c.CustomerNumber);
columns.Bound(c => c.Carrier);
columns.Bound(c => c.Active);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Sortable()
.Editable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("Bundles_Read", "Search")
.Data("bundlesReadData"))
.Model(model => model.Id(p => p.CustomerNumber)))
)
}
</div>
<script>
function bundlesReadData() {
return {
input: $('#search').val()
};
}
</script>
Controller code:
[HttpPost]
public ActionResult Search(string input, string submitBut)
{
searchInput = input; //private class variables, but they get erased on each request
submitButton = submitBut; //private class variables, but they get erased on each request
switch (submitButt)
{
case "Bundle Number":
return View("Index");
case "Customer Number":
return View("Index");
default:
return View("Index");
}
}
public ActionResult Bundles_Read([DataSourceRequest]DataSourceRequest request)
{
if (searchInput == "Bundle Number")
return Json(GetBundlesByBunNum(searchInput).ToDataSourceResult(request));
else
return Json(GetBundlesByCustNum(searchInput).ToDataSourceResult(request));
}
I don't know how to pass the input and submitBut to the javascript function bundlesReadData() since I would like to pass in conditional data to the Bundles_Read() method. I also don't know what this DataSourceRequest object is doing and it is preventing me from calling the GetBundlesByBunNum() and GetBundlesByCustNum() methods in my Search() method. Let me know if anything is unclear or if I need to provide more details to help you help me.

Answer 1

If you have already returned all your data then instead of making additional ajax requests to filter the results you could use kendo's filter functionality with a single textbox.
When the user enters something in the textbox field the grid filters the results searching if the BundleNumber or CustomerNumber contains the user input field value.
<div class="loginForm">
<div id="searchForm" class="well">
<h2>Search</h2>
<input type="text" id="search" name="input" class="form-control input-group input-group-lg" placeholder="Search..." required autofocus/>
</div>
</div>
<script type="text/javascript">
$(function()
{
$('#search').on('input', function()
{
var value = $(this).val();
if (value)
{
$("#searchResultsG").data("kendoGrid").dataSource.filter(
{
logic: "or",
filters:
[
{ field: "BundleNumber", operator: "contains", value: value },
{ field: "CustomerNumber", operator: "contains", value: value }
]
});
}
else
{
$("#searchResultsG").data("kendoGrid").dataSource.filter({});
}
});
});
</script>