How to Create AngularJS UI-Grid Editable - GridView

How to Create AngularJS UI-Grid Editable – GridView

How to Create AngularJS UI-Grid Editable – GridView

In this Post We Will Explain About is How to Create AngularJS UI-Grid Editable – GridView With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to GridView Batch Editing in AngularJs Example

In this post we will show you Best way to implement Angular UI GridView, hear for How to implement row edit functionality in Angular UIGrid with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

AngularJS uiGrid Module Example

The AngularJS simple UI-Grid provides futures simple and easy to use all the features to create the grid cells editable and updated.

  Mifflin-St Jeor Equation BMR Calculator

We can select which all the columns of the angularjs UI Grid should be updated and editable and which are not data editable, or create new add a dropdown select editor to a angular particular table UI Grid column and more data.

The JSON Data

First of all you need to simple Create a file name like as a live.json.and then Copy the simple data into the all the file and save it json file.

[
  	{
    "ID": "001",
   "Name": "Jaydeep Gondaliya-Gondaliya",
    "Type": "Male",
    "product Name": "swift"
},
	{
    "ID": "002",
    "Name": "Sejal Ramani",
    "Type": "Female",
    "product Name": "ford me figo" 
},
	{
    "ID": "003",
    "Name": "Vishal's Pandya",
    "Type": "Male",
    "product Name": "four wheel car"  
},
	{
    "ID": "004",
    "Name": "Hiren Mungara",
    "Type": "male",
    "product Name": "computer depart"  
},
	{
    "ID": "005",
    "Name": "Dhaval dave",
    "Type": "dave",
    "product Name": "lenovo laptop"  
},
	{
    "ID": "006",
    "Name": "Rakesh Bhanderi",
    "Type": "male",
    "product Name": "varana car"  
},
	{
    "ID": "007",
    "Name": "Dinesh Bhanderi",
    "Type": "male",
    "product Name": "swift car"  
},
	{
    "ID": "008",
    "Name": "Jagruti Bhatiya",
    "Type": "female",
    "product Name": "led i24u"  
}
]

The Markup(index.html)

<!DOCTYPE html>
<html>
<head>
<!-- Include External angular.js Scripts-->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<!-- Include External ui-grid.js Scripts-->
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
<!-- Include External ui-grid.css Scripts-->
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
   
    <style>
        .uiGrd {
            width: 800px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div ng-app="liveApp" 
        ng-controller="liveCtrl">

        <div class="uiGrd" id="grd"
            ui-grid="gridOptions" 
            ui-grid-edit 
            ui-grid-cellnav>
        </div>
    </div>
</body>

The Controller (Script)

<script>
     var app = angular.module('liveApp', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
     app.controller('liveCtrl', function ($scope, $http) {
		//create init varibles
         $scope.gridOptions = {};
	
         //simple get all the data REQUEST JSON DATA FROM FILE.
         var request = {
             method: 'get',
             url: 'live.json',
             dataType: 'json',
             contentType: "application/json"
         };
		//get all the data
         $http(request)
            .success(function (jsonData) {
                $scope.gridOptions.data = jsonData;     //devloped by Pakainfo.com BIND JSON TO GRID.
            })
            .error(function () { });
     });
</script>
</html>

Your Last step to put data, editable angularjs script UI-Grid is ready.

  Laravel 6 Delete File from public folder Example

Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is How to implement row edit functionality in Angular UIGrid And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Leave a Reply

avatar
  Subscribe  
Notify of