Implement Editable DropDownList and TextBox in KendoGrid using AngularJS

mahesh213
 
on Feb 26, 2020 11:10 PM
2557 Views

Hi,

How to use editable dropdown and Textbox in kendo Grid using anjularjs

In kendo grid i need one dropdown (Category) and textbox (Name)

both are editable for each row i am going to enter values 

could you please me how to add dropdown and textbox fields in kendo grid

i need to do all in below kendo grid

Could you please help me

<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" },
                    //in this i am going to enter some text
                    { field: "Name", title: "Name",
                        template:
                        },
                        //this is dropdown value where i have fecthed from category table
                    {
                        field: "Category", title: "Category",
                        template:
                    },

                ]
            };
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid options="mainGridOptions"></kendo-grid>
</body>
</html>
Download FREE API for Word, Excel and PDF in ASP.Net: Download