I have a search form which will get a list of records.
I would like to bind the search results on pressing submit after performing some initial checks on the entered data. How do i bind my action result to the Kendo Grid ?
My JS File is
function validateDataForSearch() {
var empNo = $("#empNo").val();
var empName = $("#empName").val();
var empMgr = $("#empMgr").val();
var clientName = $("#ClientName").val();
var noValues = empNo.length + empName.length + empMgr.length + clientName.length;
if (noValues <= 0) {
alert("Please enter at least one value to be able to search.");
}
else {
if (empNo.length <= 0)
empNo = 0;
$.ajax({
type: "POST",
url: 'Home/Search',
data: { empNo: empNo, empName: empName, empMgr: empMgr, clientName: clientName },
success: function (response) {
}
});
}
var validator = $("#searchForm").kendoValidator().data("kendoValidator");
$("#btnSearch").click(function (e) {
if (!validator.validate()) {
e.preventDefault();
}
else
validateDataForSearch();
});
10 Answers, 1 is accepted
Hello Man,
If I understand your correctly, you want to show the response from the Ajax call in a Grid? If this is the case, you can easily do it using the data() method of the dataSource, to set the data to the grid and display it. Here is documentation about this method:
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data
Regards,
Kiril Nikolov
Telerik
Rank 1
Hi Kiril,
Many thanks for your response. However, I have tried using those but none of those seem to work for me. The code samples in the link do not seem to run either. Can you please advise an alternate solution.
The idea is that user enters data in a form. When clicking a search button,a couple of validations take place in javascript and an Ajax call is made to the server side to call an action result which returns an object that I need to bind to my grid on the same form
Hello Man,
It works in the following sample, please edit it in order to show your exact scenario where it is not working and we will be happy to help:
Regards,
Kiril Nikolov
Telerik
Rank 1
Hi Kiril,
It seems to be making progress but i seem to be getting an Uncaught Typerror: Cannot read property datasource
my cshtml is as follows
@model IEnumerable<PMT.Models.EmpData>
<div id="kendoGrid">
@(Html.Kendo().Grid(Model)
.Name("SearchResult")
.Columns(columns =>
{
columns.Bound(p => p.empNo);
columns.Bound(p => p.empName);
columns.Bound(p => p.empMgr);
columns.Bound(p => p.ClientName);
})
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)
My js is now modified as
function validateDataForSearch() {
var empNo = $("#empNo").val();
var empName = $("#empName").val();
var empMgr = $("#empMgr").val();
var clientName = $("#ClientName").val();
var noValues = empNo.length + empName.length + empMgr.length + clientName.length;
if (noValues <= 0) {
alert("Please enter at least one value to be able to search.");
}
else {
if (empNo.length <= 0)
empNo = 0;
$.ajax({
type: "POST",
url: 'Home/Search',
data: { empNo: empNo, empName: empName, empMgr: empMgr, clientName: clientName },
success: function (response) {
$("#kendoGrid").getKendoGrid().datasource.data(response);
}
});
}
Rank 1
My Search ActionResult method in the controller just returns a list<empData> with 2 dummy records
as return View(searchResults);
Rank 1
Hello Man,
I can see that the the Id of the grid is .Name("SearchResult"), while you are selecting the grid using a wrong selector - $("#kendoGrid"). Please note that the .Name() will set the id of the grid, that you need to use later to get a reference to it.
Regards,
Kiril Nikolov
Telerik
Rank 1
Hi Kiril
I have tried changing both references to "SearchResult" as well but had no luck
i.e.
$("#SearchResult").kendoGrid();
and
$("#pmtSearchResult").getKendoGrid().DataSource.data(response);
Rank 1
Getting the same error as the one in the screenshot
Cannot ready property "data" of undefined
I also keep getting the error
Failed to load resource: the server responded with a status of 404 (Not Found) for "http://localhost/PMT/Content/kendo/2015.2.805/images/kendoui.woff?v=1.1" on page load. Not sure if this is expected
Rank 1