mahesh213 says:
LastaName= "LastaName" + i,
Here you have defined property LastaName and using as LastName in the view.
So there is javascript error.
So modify the code.
Model
public class Customer
{
public int OrderID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }
public string ShipName { get; set; }
public string ShipCity { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public List<Customer> CustomersData()
{
var result = Enumerable.Range(0, 100).Select(i => new Customer
{
OrderID = i,
FirstName = "FirstName" + i,
LastName = "LastaName" + i,
City = "LastaName" + i,
ShipName = "ShipName" + i,
ShipCity = "ShipCity" + i,
});
return result.ToList();
}
public JsonResult GetCustomers()
{
return Json(CustomersData(), JsonRequestBehavior.AllowGet);
}
public ActionResult GetShipNameList()
{
int pageSize = Convert.ToInt32(Request.Params.Get("pageSize"));
int skip = Convert.ToInt32(Request.Params.Get("skip"));
string search = Request.Params.Get("filter[filters][0][value]");
var dataEnteredList = CustomersData();
var total = dataEnteredList.Count();
var data = dataEnteredList.Skip(skip).Take(pageSize).ToList();
return Json(new { total = total, data = data }, JsonRequestBehavior.AllowGet);
}
public ActionResult ValueMapper(int?[] values)
{
var indices = new List<int>();
if (values != null && values.Any())
{
var index = 0;
}
return Json(indices, JsonRequestBehavior.AllowGet);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: "/Home/GetCustomers" },
},
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
//filterable: {
// ui: cityFilter
//}
},
{
field: "ShipName",
width: 120,
filterable: {
ui: shipNameFilter
}
},
{
title: "Ship City",
width: 160,
filterable: false,
template: "#=ShipCity# #=ShipCity#"
},
]
});
});
function shipNameFilter(element) {
element.kendoDropDownList({
dataTextField: "ShipName",
dataValueField: "ShipName",
filter: "contains",
virtual: {
itemHeight: 26,
valueMapper: function (options) {
$.ajax({
url: "@Url.Action("ValueMapper", "Home")",
type: "GET",
dataType: "json",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
})
}
},
height: 520,
dataSource: {
transport: {
read: "/Home/GetShipNameList",
contentType: 'application/json',
dataType: 'json',
type: 'GET',
},
schema: {
data: 'data',
total: 'total',
fields: [
{ field: 'ShipName', type: 'string' },
{ field: 'OrderID', type: 'number' },
]
},
pageSize: 10,
serverPaging: true,
serverFiltering: true
}
});
}
function convertValues(value) {
var data = {};
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data["values[" + idx + "]"] = value[idx];
}
return data;
}
</script>
</head>
<body>
<div id="example">
<div id="grid"></div>
</div>
</body>
</html>
Screenshot
