I am unable to use the filter function i.e I am expecting when I click on the funnel to enter a text or something to take place i.e filtering however no option so far?
@model ReportViewModel
@using Kendo.Mvc.UI
@{
ViewBag.Title = "Report";
}
<link href="https://kendo.cdn.telerik.com/themes/6.4.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.aspnetmvc.min.js"></script>
<style>
/* Basic styling for grids */
.k-grid {
width: 100%;
border-collapse: collapse;
}
/* Grid header styling */
.k-grid-header {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
/* Grid header cell styling */
.k-grid-header th {
padding: 8px;
font-weight: bold;
text-align: left;
}
/* Grid body styling */
.k-grid tbody tr {
border-bottom: 1px solid #ddd;
}
/* Grid body cell styling */
.k-grid tbody td {
padding: 8px;
}
/* Alternate row background color */
.k-grid tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Hover effect for rows */
.k-grid tbody tr:hover {
background-color: #f0f0f0;
}
</style>
<h2>Employee and Location Report</h2>
<h3>Employees</h3>
@(Html.Kendo().Grid(Model.Employees)
.Name("gridEmployees")
.Columns(columns =>
{
columns.Bound(e => e.EmployeeId).Title("Employee ID");
columns.Bound(e => e.FirstName).Title("First Name");
columns.Bound(e => e.LastName).Title("Last Name");
columns.Bound(e => e.Department).Title("Department");
columns.Bound(e => e.Position).Title("Position");
columns.Bound(e => e.Salary).Title("Salary").Format("{0:C}");
})
.Pageable()
.Sortable()
.Filterable() // Enable filtering
)
<h3>Locations</h3>
@(Html.Kendo().Grid(Model.Locations)
.Name("gridLocations")
.Columns(columns =>
{
columns.Bound(l => l.LocationId).Title("Location ID");
columns.Bound(l => l.City).Title("City");
columns.Bound(l => l.Country).Title("Country");
columns.Bound(l => l.Address).Title("Address");
})
.Pageable()
.Sortable()
.Filterable()
)