Implement searchable DropDownList in KendoGrid using AngularJS in ASP.Net MVC

mahesh213
 
on Jul 28, 2020 03:45 AM
Sample_101978.zip
1513 Views

Hi,

Can you please make this Country Dropdown to searchable dropdown

Bind (Populate) DropDown Template in KendoGrid using AngularJS in ASP.Net MVC

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 28, 2020 05:17 AM

Hi mahesh213,

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

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetCustomers()
    {
        List<Customer> customers = new List<Customer>();
        customers.Add(new Customer { CustomerId = 1, Name = "John Hammond", Country = "United States" });
        customers.Add(new Customer { CustomerId = 2, Name = "Mudassar Khan", Country = "India" });
        customers.Add(new Customer { CustomerId = 3, Name = "Suzanne Mathews", Country = "France" });
        customers.Add(new Customer { CustomerId = 4, Name = "Robert Schidner", Country = "Russia" });
        return Json(customers, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetCountryName()
    {
        List<SelectListItem> countries = new List<SelectListItem>();
        countries.Add(new SelectListItem { Text = "United States", Value = "United States" });
        countries.Add(new SelectListItem { Text = "India", Value = "India" });
        countries.Add(new SelectListItem { Text = "France", Value = "France" });
        countries.Add(new SelectListItem { Text = "Russia", Value = "Russia" });
        return Json(countries, JsonRequestBehavior.AllowGet);
    }

    public class Customer
    {
        public int CustomerId { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

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 type="text/javascript">
        var app = angular.module("MyApp", ["kendo.directives"]);
        app.controller("MyController", function ($scope, $http) {
            ApplyKendoGrid();

            function columnTemplateFunction(dataItem) {
                return '<input class="dropDownTemplate"/>';
            };

            function ApplyKendoGrid() {
                GetCountries();
                $scope.mainGridOptions = {
                    dataSource: { transport: { read: "/Home/GetCustomers/" }, pageSize: 5 },
                    pageable: { refresh: true, pageSizes: [2, 25, 50] },
                    groupable: false,
                    sortable: true,
                    columns: [
                        { field: "CustomerId", title: "Id" },
                        { field: "Name", title: "Name" },
                        {
                            field: "Country",
                            template: columnTemplateFunction
                        },
                    ],
                    dataBound: function (e) {
                        var grid = e.sender;
                        var items = e.sender.items();
                        items.each(function (e) {
                            var dataItem = grid.dataItem(this);
                            var ddlCountries = $(this).find('.dropDownTemplate');
                            $(ddlCountries).kendoDropDownList({
                                dataSource: $scope.ddlDataSource,
                                dataTextField: "Text",
                                dataValueField: "Value",
                                value: dataItem.Country,
                                filter: "contains",
                                minLength: 2
                            });
                        });
                    }
                };
            }

            function GetCountries() {
                $scope.ddlDataSource = {
                    type: "json",
                    transport: {
                        read: { url: "/Home/GetCountryName" }
                    }
                };
            }
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</body>
</html>

Screenshot