Rank 1
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()
)
1 Answer, 1 is accepted
Hi Sinisa,
Thank you for writing to us.
Yes, you are totally correct. Here is how it should look like when you click on the filter funnel icon:
You can verify that with this live sample:
https://demos.telerik.com/aspnet-mvc/grid/remote-data-binding
If this is not happening on your side, most probably there is a hidden script issue. Can you run the page on Chrome browser and open the F12 inspector console to see if there are any javascript errors interfering?
Regards,
Eyup
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Rank 1
Hi Eyup
Apologies for the late response I can see the following error as per screen shot.
Hi
<link href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2024.3.806/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2024.3.806/js/kendo.aspnetmvc.min.js"></script>
Rank 1
HI Eyup
In the index.html I have the following:
<head>
<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>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.web.min.js"></script>
</head>
I do not have a file as such so I have created one and added the following
<!DOCTYPE html>
<html>
<head>
<link href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2024.3.806/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2024.3.806/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
</body>
</html>
Rank 1
Hello Sinisa,
Your code seems correct, probably there is something subtle missing that we cannot see.
I am sending a working Grid MVC sample app. Can you download and run it to verify that the script references as working as expected? You can freely use it as a base reference.
Rank 1
Sure,
Feel free to examine the sample and let me know if you find it beneficial as a base reference.