Column Wise search and filter in WebGrid using DropDownList in ASP.Net MVC

on Oct 17, 2021 11:01 PM

How would I do for column wise searching for dropdown like textbox

I will provide you the link which I implemented that is for textbox and same thing I want it for dropdown

Column Wise Search and Filter in WebGrid using TextBox in ASP.Net MVC

Download FREE API for Word, Excel and PDF in ASP.Net: Download
on Oct 19, 2021 01:23 AM

Hi zeeshanpas,

Check this example. Now please take its reference and correct your code.


For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


public class HomeController : Controller
    // GET: Home
    public ActionResult Index()
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Customers.Take(5).ToList());


@model IEnumerable<Filter_WebGrid_jQuery.Customer>

    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canPage: false, canSort: false);

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("CustomerID", "Customer Id"),
                 webGrid.Column("ContactName", "Customer Name"),
                 webGrid.Column("Country", "Country")))

    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            var customers = { "ALFKI": "Maria Anders", "ANATR": "Ana Trujillo", "ANTON": "Antonio Moreno", "AROUT": "Thomas Hardy", "BERGS": "Christina Berglund" };
            var countries = { "Austria": "Austria", "France": "France", "Brazil": "Brazil", "Ireland": "Ireland", "Italy": "Italy" };
            var row = $("<TR />");

            var id = $('<select onchange="OnChange(0,this);" />').append($("<option>Select</option>"));
            $.each(customers, function (key, value) {
                $(id).append($("<option></option>").attr("value", key).text(key));
            row.append("<th>" + $(id)[0].outerHTML + "</th>");

            var name = $('<select onchange="OnChange(1,this);" />').append($("<option>Select</option>"));
            $.each(customers, function (key, value) {
                $(name).append($("<option></option>").attr("value", value).text(value));
            row.append("<th>" + $(name)[0].outerHTML + "</th>");

            var country = $('<select onchange="OnChange(2,this);" />').append($("<option>Select</option>"));
            $.each(countries, function (key, value) {
                $(country).append($("<option></option>").attr("value", key).text(value));
            row.append("<th>" + $(country)[0].outerHTML + "</th>");

            $("#WebGrid TR").eq(0).after(row);

        function OnChange(colIndex, ele) {
            var query = $(ele).find('option:selected').text().toLowerCase();
            $("#WebGrid tr:not(:has(th))").each(function (i) {
                if (query == "select" || ($(this).find("td:eq(" + colIndex + ")").text().toLowerCase().indexOf(query) == 0)) {
                } else {