Display KendoGrid Row details on Button Click using AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

Dispaly Id value in alert after clicking of edit button in kendogrid.

i have one edit button in kendogrid

currently my requirement is that after clicking of edit button need to display that partular row Id value in alert box

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 12pt;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["kendo.directives"]);
        app.controller("MyController", function ($scope, $window, $http) {
            $scope.mainGridOptions = {
                dataSource: { transport: { read: "/Home/GetAll/" }, pageSize: 5 },
                pageable: { refresh: true, pageSizes: [2, 25, 50] },
                groupable: false,
                sortable: true,
                columns: [
                { field: "Id", title: "Id" },
                { field: "Name", title: "Name" },
                {                 
                    command: [
                        { name: "edit", text: "", iconClass: "k-icon k-i-hyperlink-open", click: $scope.clickHandler, className: "ob-edit" },
                        { name: "edit1", text: "", iconClass: "k-icon k-i-delete k-i-trash", className: "ob-deleteuser" }], 
                    title: "Action", lock: true, width: "15%;"}
                ]
            };          
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div id="example">
        <kendo-grid options="mainGridOptions">
        </kendo-grid>
    </div>
</body>
</html>

 

Posted one month ago

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 GetAll()
    {
        List<Employee> employees = new List<Employee>();
        employees.Add(new Employee { Id = 1, Name = "Category 1", IsEmployee = 1 });
        employees.Add(new Employee { Id = 2, Name = "Category 2", IsEmployee = 0 });
        employees.Add(new Employee { Id = 3, Name = "Category 3", IsEmployee = 1 });
        return Json(employees, JsonRequestBehavior.AllowGet);
    }
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int IsEmployee { get; set; }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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, $window, $http) {
            $scope.mainGridOptions = {
                dataSource: { transport: { read: "/Home/GetAll/" }, pageSize: 5 },
                pageable: { refresh: true, pageSizes: [2, 25, 50] },
                groupable: false,
                sortable: true,
                columns: [
                    { field: "Id", title: "Id" },
                    { field: "Name", title: "Name" },
                    {
                        title: "Action", lock: true, width: "35%;",
                        command: [{ name: "edit", text: "", iconClass: "k-icon k-i-hyperlink-open", className: "ob-edit",
                            click: function (e) {
                                // get the current table row (tr).
                                var tr = $(e.target).closest("tr");
                                // get the data bound to the current table row.
                                var id = this.dataItem(tr).Id;
                                var name = this.dataItem(tr).Name;
                                $window.alert("Id : " + id + "\nName : " + name);
                            }
                        }, { name: "edit1", text: "", iconClass: "k-icon k-i-delete k-i-trash", className: "ob-deleteuser",
                            click: function (e) {
                                // get the current table row (tr).
                                var tr = $(e.target).closest("tr");
                                // get the data bound to the current table row.
                                var id = this.dataItem(tr).Id;
                                if ($window.confirm("Are you sure delete Id : " + id + " ?")) {
                                    $window.alert("Id : " + id + " deleted.");
                                } else {
                                    return false;
                                }
                            }
                        }]
                    }
                ]
            };
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid options="mainGridOptions"></kendo-grid>
</body>
</html>

Screenshot