Using Ng-grid in AngularJS Pages

-
It is a common requirement for any project to display data in a tabular format. The easiest way to do this is by using HTML tables, but soon this gets complex, you need a way to support sorting (single & multi columns), resizable columns, inline editing, filtering, pagination (client-side and server-side) and so on. There is a way to bind data to a HTML Table in AngularJs, but when it comes to sorting, paging, editing and dragging the columns, the grid choice is useful. ng-grid is Angular's native implementation of the Grid. There are many plugins from third-parties that can be integrated into AngularJS Pages, but ng-grid exists inside the AngularJs framework and is very rich in functionality and compatibility.

Let us create a sample ng-grid and understand how ng-grid works.

To use AngularJS, you have to include it in your page before the closing <body> tag. Google's CDN is recommended for a faster load time:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

what the features are in ng-grid to make it more useful. We will do a sample ng-grid binding, editing, paging, sorting and grouping the records.
 
 <!DOCTYPE html>  
    <html ng-app="myApp">  

    <head>  
        <meta charset="utf-8" />  
        <title>Working With NG-Grid </title>  

        <style type="text/css">  
            .gridStyle  
            {  
                border: 1px solid rgb(212, 212, 212);  
                width: 800px;  
                height: 370px;  
                margin-left: 50px;  
                color: coral;  
            }  
            .red {  
        background-color: green;  
        color: red;  
    }  
        </style>  
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
        <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>  
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>  
        <script>  
            var app = angular.module('myApp', ['ngGrid']);  
            app.controller(  
                            'MyCtrl',  
                            function ($scope) {  
                                var Company;  
                                var Model;  
                                var Price;  
                                var Stocks;  
                                var x;  
                                $scope.submit = function () {  
                                    Company = $scope.Company;  
                                    Model = $scope.Model;  
                                    Price = $scope.Price;  
                                    Stocks = $scope.Stocks;  
                                    $scope.myData.push({  
                                        Company: Company,  
                                        Model: Model,  
                                        Price: Price,  
                                        Stocks: Stocks  
                                    });  
                                };  

                                $scope.myData = [{ "Company": "Samsung", "Model": "Samsung Galaxy Grand 2", "Price": 5000, "Stocks": 4 },  
                                                 { "Company": "Samsung", "Model": "Samsung Galaxy S3 Neo", "Price": 9000, "Stocks": 41 },  
                                               { "Company": "Samsung", "Model": "Samsung Galaxy Grand Max", "Price": 11000, "Stocks": 4 },  
                                                { "Company": "MicroMax", "Model": "Micromax Canvas Blaze", "Price": 6300, "Stocks": 0 },  
                                               { "Company": "MicroMax", "Model": "Micromax Canvas Duddle", "Price": 11000, "Stocks": 3 },  
                                                 { "Company": "MicroMax", "Model": "Micromax Canvas Duddle- SPL", "Price": 11000, "Stocks": 3 },  
                                                 { "Company": "Blackberry", "Model": "Blackberry Z30", "Price": 19000, "Stocks": 10 },  
                                               { "Company": "Blackberry", "Model": "Micromax bold  9780", "Price": 12900, "Stocks": 20 },  

                                ],  


                                $scope.gridOptions = {  

                                    data: 'myData',  
                                    pagingOptions: $scope.pagingOptions,  
                                    enablePinning: true,  
                                    enablePaging: true,  
                                    showFooter: true,  
                                    enableColumnResize: true,  
                                    enableCellSelection: true,  
                                    columnDefs: [  
                                            {  
                                                field: "Company",  
                                                width: 180,  
                                                pinned: true,  
                                                enableCellEdit: true  
                                            },  
                                            {  
                                                field: "Model",  
                                                width: 200,  
                                                enableCellEdit: true  
                                            },  
                                            {  
                                                field: "Price",  
                                                width: 100,  
                                                enableCellEdit: true  
                                            },  
                                            {  
                                                field: "Stocks",  
                                                width: 120,  
                                                enableCellEdit: true,  
                                                cellTemplate: basicCellTemplate  
                                            },  
                                            {  
                                                field: "Action",  
                                                width: 200,  
                                                enableCellEdit: false,  
                                                cellTemplate: '<button id="editBtn" type="button" class="btn btn-xs btn-info"  ng-click="updateCell()" >Click a Cell for Edit </button>'  
                                            }]  

                                };  

                                $scope.selectedCell;  
                                $scope.selectedRow;  
                                $scope.selectedColumn;  

                                $scope.editCell = function (row, cell, column) {  
                                    $scope.selectedCell = cell;  
                                    $scope.selectedRow = row;  
                                    $scope.selectedColumn = column;  
                                };  

                                $scope.updateCell = function () {  

                                    //   alert("checking");  
                                    $scope.selectedRow[$scope.selectedColumn] = $scope.selectedCell;  
                                };  

                                var basicCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()" ng-click="editCell(row.entity, row.getProperty(col.field), col.field)"><span class="ui-disableSelection hover">{{row.getProperty(col.field)}}</span></div>';  

                                $scope.filterOptions = {  
                                    filterText: "",  
                                    useExternalFilter: true  
                                };  

                                $scope.gridOptions.sortInfo = {  
                                    fields: ['Company', 'Price'],  
                                    directions: ['asc'],  
                                    columns: [0, 1]  
                                };  

                                $scope.totalServerItems = 0;  

                                $scope.pagingOptions = {  
                                    pageSizes: [5, 10, 20],  
                                    pageSize: 5,  
                                    currentPage: 1  
                                };  

                                $scope.changeGroupBy = function (group1, group2) {  
                                    $scope.gridOptions.$gridScope.configGroups = [];  
                                    $scope.gridOptions.$gridScope.configGroups.push(group1);  
                                    $scope.gridOptions.$gridScope.configGroups.push(group2);  
                                    $scope.gridOptions.groupBy();  
                                }  
                                $scope.clearGroupBy = function () {  
                                    $scope.gridOptions.$gridScope.configGroups = [];  
                                    $scope.gridOptions.groupBy();  
                                }  

                            });  
        </script>  
    </head>  
    <body ng-controller="MyCtrl">  
        <div class="panel panel-danger">  
            <div class="panel-heading"></div>  
            <div class="panel-body">  
                <form class="input" ng-submit="submit()" role="form">  
                    <div style="border: 2px solid gray;width:600px;" >  
                        <labl> <b> Add a New Model:  NG GRID DEMO </b></labl>  
                        <div class="form-group">  
                            <label"><b>Company:</b></label>   
                    <input id="inputs" class="form-control" type="text" ng-model="Company">  
                        </div>  
                        <div class="form-group">  
                            <label><b>Model :</b></label>  
                            <input id="Number1" class="form-control" type="text" ng-model="Model">  
                        </div>  
                        <div class="form-group">  
                            <label>Price</label>  
                            <input id="Date1" class="form-control" type="number" ng-model="Price">  
                        </div>  
                        <div class="form-group">  
                            <label>Stocks</label>  
                            <input id="Number2" class="form-control" type="number" ng-model="Stocks">  
                        </div>  

                        <div class="form-group">  
                            <input  
                                type="submit" value="submit" id="but" class="btn btn-success">  
                            <button type="button" ng-click="changeGroupBy('Company','Price')">Company By Name and Price</button>  
                            <button type="button" ng-click="clearGroupBy()">Clear Group</button>  
                        </div>  
                    </div>  
                </form>  
            </div>  
        </div>  
        <div class="panel panel-danger">  
            <div class="panel-heading"><b><p style="padding-left:50px;">Model and Stocks Information</p></b></div>  
            <div style="width: 500px;">  
                <div class="gridStyle" ng-grid="gridOptions"></div>  
            </div>  
        </div>  
    </body>  

    </html>   
 
Output of above code as follows



We can add a different property to ng-grid, such as paging, sorting, pinning of columns we need to display, enable scrolling and controlling a cell property value such as styling and events.

This is all about the basics of ng-grid. I hope you have understood what ng-grid is and how to use it.
Thanks for reading.

Comments

Post a Comment

Popular posts from this blog

Restore the lost focus of Auto post back controls in asp.net update Panel control

-
Problem: We put  autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details  the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times. Solution: Step 1: Save following in js file give any name to it (like MyUpdatePanelFocus.js ) var lastFocusedControlId = ""; function focusHandler(e) { document.activeElement = e.originalTarget; } function appInit() { if (typeof (window.addEventListener) !== "undefined") { window.addEventListener("focus", focusHandler, true); } Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler); Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); } function pageLoadingHandler(sender, args) { lastFocusedControlId = typeof (document.acti
Read more

Clone a generic list in C# using extension method

-
In practical situation you need to clone of object so that change in cloned object will not affect the original one. If you need a cloned list with the same capacity you need to do some extra stuff with your user type. I came up with this easy solution using ICloneable interface in your custom type class. The first step you need to implement the ICloneable interface in your class like below. public class MyClassDto : ICloneable { public Int64 Id { get; set; } public string Time { get; set; } public int user{ get; set; } public object Clone() { return new MyClassDto{ Date = this.Date, Id = this.Id, user = this.user}; } } after that you need to add extension method in common class so that you can use it everywhere you want. public static class Extensions { public static List<T> Clone<T>(this List<T> listToClone) where T : ICloneable { return listToClone.Select(item
Read more

Disable backspace key using Jquery

-
Disable backspace key in HTML form using Jquery in simple steps. While user enters data into application if user accidentally  press backspace button then it will redirect to previous page and all entered data would be lost. to eliminate this event we can disable the backspace key using Jquery. Following is the JQuery script tag you can add to the web page $(document).keydown(function (e) { var nodeName = e.target.nodeName.toLowerCase(); if (e.which === 8) { if ((nodeName === 'input' && e.target.type === 'text') || nodeName === 'textarea') { // do nothing } else { e.preventDefault(); } } }); The above code can be used seamlessly with any web technology you are using. Hope this will help you in your web application. Happy coding:)
Read more

Add Comma automatically while entering amounts in textbox using Javascript

-
Use following javascript function to add comma in numerics input in textbox function Comma(Num) { Num += ''; Num = Num.replace(/,/g, ''); x = Num.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d)((\d)(\d{2}?)+)$/; while (rgx.test(x1)) x1 = x1.replace(rgx, '$1' + ',' + '$2'); return x1 + x2; } Use following event of input textbox to call above function onkeyup = "javascript:this.value=Comma(this.value);"
Read more

Step by step migration of ASP.NET Core 2.2 to 3.1

-
In order to upgrade/migrate asp.net core version to 3.1 following steps to be perform. Download and install Visual Studio 2019 version 16.4 or higher. Download and install .NET Core 3.1  https://dotnet.microsoft.com/download/dotnet-core/3.1 Upgrade the projects of solution to .NET Core 3.1 , because ASP.NET Core 3.1 requires it. Update existing Nuget packages to a version compatible with ASP.NET Core 3.1 in each project Use IHost interface from a IHostBuilder instead of building and running a IWebHost from a IWebHostBuilder in Program.cs public static IHostBuilder CreateWebHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseKestrel() .UseSerilog() .UseStartup<Startup>(); }) Change AddMvc method has been replaced by AddControllers in Startup.cs of each projects. In Startup.cs, UseMvc method to b
Read more

Source Code Beautifier And Format Source Code For Blogger and Websites

-
Source Code Beautifier And Formatter For Blogger and Websites, Format Source Code , Format Source code for blog or blogging & website, Online line source code formatter tool, blogger code format tool, Format source code for blog-spot,Insert formatted source code How to format source code for blogger & website :   You can format your source code for blogger & website in easy three steps.. 1) Paste your source code into "Paste Here Your Source Code" Text-area. 2) Choose appropriate options from "formatting options" and click Format Source Code button.. 3) See preview of formatted source code if it's fine then copy from "Copy Formatted Source Code" text-area otherwise repeat step 2  This source code formatter allow you to format code like JavaScript, HTML, CSS, C#, PHP, ASP.net, VB.Net, Visual Basic, DOT.net, ASP & many other languages.  It does not add unnecessary tags into formatted code, It use only two t
Read more

Remove Owin from MVC 5 Application and use asp.net custom forms authentication

-
Image
Owin comes with 15 other dependencies when we add default "blank" mvc5 template in solution. Which some time is irrelevant to web application hence needs to be removed for adding custom authentication techniques in the web application. Remove the owin  from solution is tedious task but if we follow the below procedure then it can be easily removed from the solution. Right click on your project and from menu click on Manage Nuget Packages. on left side of Manage Nuget Packages window click on Installed Package then on right side of window in search box type owin.  Uninstall packages in order of: microsoft.aspnet.identity.owin microsoft.owin.host.systemweb microsoft.owin.security.cookies microsoft.owin.security.facebook microsoft.owin.security.google microsoft.owin.security.microsoftaccount microsoft.owin.security.twitter microsoft.aspnet.identity.entityframework microsoft.aspnet.identity.core Open web.config file and remove these sections from   &l
Read more

How to Import CSV File and bind csv file data to gridview in asp.net using c#

-
I am going to demonstrate in this article about importing CSV file data into datatable and then bind that data to Asp.net gridview control. i have tried to make code simpler and less line of code. I am assuming that you have saved the csv file to server by using fileupload control. After that create function which returns string[] private IEnumerable<string[]> GetAllDataFromCSVFile(string FileName) { string str; using (StreamReader rd=new StreamReader(FileName)) { while ((str = rd.ReadLine()) != null) { yield return str.Split(','); } } } Create another function which returns final data-table with CSV File data private DataTable GetCSVData(string FileName) { var values = GetAllDataFromCSVFile(FileName); DataTable dt = new DataTable(); int j=0; foreach (var i
Read more

Email validation using regular expression in jQuery

-
To validate user input for email-id it's very easy using regular expressions. Using regular expressions you do not need to write lengthy logical code in jQuery. Following are the steps to do the same. Pass a string to RegExp or create a regex using the  // syntax Call  regex.test(string) So code would be... jQuery ( function () { $ ( ".mail" ). keyup ( function () { var VAL = this . value ; var email = new RegExp ( '^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$' ); if ( email . test ( VAL )) { alert ( 'Great, you entered an valid E-Mail-address' ); } }); });
Read more