Refresh KendoGrid data after Insert Update Delete using AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

How to refresh the kendogrid after inerting / updating records in database

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

could you please help me

Posted one month ago Modified on one month ago

Hi mahesh213,

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

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

Controller

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

    public JsonResult GetCustomers()
    {
        CustomerEntities entities = new CustomerEntities();
        List<Customer> customers = entities.Customers.ToList();
        return Json(customers, JsonRequestBehavior.AllowGet);
    }

    public JsonResult InsertCustomer(Customer customer)
    {
        CustomerEntities entities = new CustomerEntities();
        entities.Customers.AddObject(customer);
        entities.SaveChanges();
        return Json(customer, JsonRequestBehavior.AllowGet);
    }

    public JsonResult UpdateCustomer(Customer customer)
    {
        CustomerEntities entities = new CustomerEntities();
        Customer customerForUpdate = entities.Customers.Where(x => x.CustomerId == customer.CustomerId).FirstOrDefault();
        customerForUpdate.Name = customer.Name;
        customerForUpdate.Country = customer.Country;
        entities.SaveChanges();
        return Json(customer, JsonRequestBehavior.AllowGet);
    }

    public JsonResult DeleteCustomer(Customer customer)
    {
        CustomerEntities entities = new CustomerEntities();
        Customer customerForDelete = entities.Customers.Where(x => x.CustomerId == customer.CustomerId).FirstOrDefault();
        entities.Customers.DeleteObject(customerForDelete);
        entities.SaveChanges();
        return Json(customer, JsonRequestBehavior.AllowGet);
    }
}

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>
    <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: {
                    type: "json",
                    transport: {
                        read: { url: "Home/GetCustomers" },
                        destroy: { url: "Home/DeleteCustomer" },
                        create: { url: "Home/InsertCustomer" },
                        update: { url: "Home/UpdateCustomer" }
                    },
                    schema: {
                        model: {
                            id: "CustomerId",
                            fields: {
                                CustomerId: { editable: false, nullable: true, type: "number" },
                                Name: { editable: true, nullable: true, type: "string" },
                                Country: { editable: true, nullable: true, type: "string" }
                            }
                        }
                    },
                    pageSize: 2,
                    serverPaging: false,
                    serverSorting: false
                },
                editable: "inline",
                toolbar: [{ name: "create", text: "Add", iconClass: "k-icon k-i-plus"}],
                sortable: true,
                pageable: true,
                resizeable: true,
                columns: [{ field: "CustomerId", title: "Id", width: '40px' },
                            { field: "Name", title: "Name" },
                            { field: "Country", title: "Country" },
                            {
                                title: 'Action',
                                width: '200px',
                                command:
                                [
                                    {
                                        name: "edit",
                                        text: "Edit",
                                        iconClass: {
                                            edit: "k-icon k-i-edit",
                                            update: "k-icon k-i-save",
                                            cancel: "k-icon k-i-cancel"
                                        }
                                    },
                                    {
                                        name: "destroy",
                                        text: "Delete",
                                        iconClass: "k-icon k-i-delete"
                                    }
                                ]
                            }
                        ]
            };
        }) 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</body>
</html>

Screenshot


Posted one month ago

Hi mahesh213,

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

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

Controller

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetAll()
    {
        CustomerEntities entities = new CustomerEntities();
        List<Customer> customers = entities.Customers.ToList();
        return Json(customers, JsonRequestBehavior.AllowGet);
    }

    public JsonResult DeleteCustomer(int? id)
    {
        CustomerEntities entities = new CustomerEntities();
        Customer customer = entities.Customers.Where(x => x.CustomerId == id).FirstOrDefault();
        entities.Customers.DeleteObject(customer);
        entities.SaveChanges();
        return Json(customer, JsonRequestBehavior.AllowGet);
    }
}

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: "CustomerId", 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).CustomerId;
                                $http({
                                    method: 'POST',
                                    url: '/Home/DeleteCustomer/',
                                    params: { id: id }
                                }).then(function (response) {
                                    $('#tblCustomers').data('kendoGrid').dataSource.read();
                                    $('#tblCustomers').data('kendoGrid').refresh();
                                });
                            }
                        }]
                    }
                ]
            };
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid options="mainGridOptions" id="tblCustomers"></kendo-grid>
</body>
</html>

Screenshot