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

zeeshanpas
 
on Oct 17, 2021 11:01 PM
Sample_196843.zip
482 Views

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
dharmendr
 
on Oct 19, 2021 01:23 AM

Hi zeeshanpas,

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

Database

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

Download Northwind Database

Controller

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

View

@model IEnumerable<Filter_WebGrid_jQuery.Customer>

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

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @webGrid.GetHtml(
        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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }
    </script>
</body>
</html>

Screenshot