July 2016 ~ MiTechDev.com

Wednesday, 27 July 2016

CRUD operations on Angular UI Calendar(Event Scheduling)

22:41:00 Posted by raviteja swayampu , , 2 comments
Hi every one thank for recommendations for the previous post Implementing Event Scheduling in Angular UI Calendar.In this tutorial  i am going to explain about how to implement CRUD operations on UI calendar.If you are new to this post please refer above link Implementing Event Scheduling in Angular UI to understand the implementation of basic UI calendar and how to load events data from server to display on calendar.
In this tutorial i am going to use the previous post code.The below screen shot represents the previous application.
CRUD operations on Angular UI Calendar(Event Scheduling)

CRUD operations on Angular UI Calendar(Event Scheduling)

1.Create a Visual studio application (in this application is created in VS2015).
2.See previous article to know the Calendar implementation click here .
3.You can find what libraries to Add and How to get and display server data in UI-calendar from previous post.
4. I am using same table schema and ADO.NET Data Model from the previous post.

Add Controller to display view and CRUD functions

1.Right click on Controllers folder --> Add --> Select Empty Controller template --> name it (HomController) --> Add.
2.Replace the previous code with below code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AngularUICalendarCRUd.Models;

namespace AngularUICalendarCRUd.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetEvents()
        {
            //Here MyDatabaseEntities is our entity datacontext (see Step 4)
            using (DatabaseEntities dc = new DatabaseEntities())
            {
                var v = dc.Events.OrderBy(a => a.StartAt).ToList();
                return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
        }
        //Action for Save event
        [HttpPost]
        public JsonResult SaveEvent(Event evt)
        {
            bool status = false;
            using (DatabaseEntities dc = new DatabaseEntities())
            {
                if (evt.EndAt != null && evt.StartAt.TimeOfDay == new TimeSpan(0, 0, 0) &&
                    evt.EndAt.TimeOfDay == new TimeSpan(0, 0, 0))
                {
                    evt.IsFullDay = true;
                }
                else
                {
                    evt.IsFullDay = false;
                }

                if (evt.EventID > 0)
                {
                    var v = dc.Events.Where(a => a.EventID.Equals(evt.EventID)).FirstOrDefault();
                    if (v != null)
                    {
                        v.Title = evt.Title;
                        v.Description = evt.Description;
                        v.StartAt = evt.StartAt;
                        v.EndAt = evt.EndAt;
                        v.IsFullDay = evt.IsFullDay;
                    }
                }
                else
                {
                    dc.Events.Add(evt);
                }
                dc.SaveChanges();
                status = true;
            }
            return new JsonResult { Data = new { status = status } };
        }
        [HttpPost]
        public JsonResult DeleteEvent(int eventID)
        {
            bool status = false;
            using (DatabaseEntities dc = new DatabaseEntities())
            {
                var v = dc.Events.Where(a => a.EventID.Equals(eventID)).FirstOrDefault();
                if (v != null)
                {
                    dc.Events.Remove(v);
                    dc.SaveChanges();
                    status = true;
                }
            }
            return new JsonResult { Data = new { status = status } };
        }
    }
}
3.SaveEvent saves the event data to data basae.DeleteEvent deletes the event data from data base.
4.Index action to render the Index view.
5.Make below changes to _Layout.cshtml page in Shared folder.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body> 
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
</body>
</html>

Add View to display the UI

1.Right click on Index action in HomeController.cs file --> Add --> name it (Index) --> Add.
2.Replace the Index.cshtml page code with below code.
@{
    ViewBag.Title = "Index";
}
<h2>Angular UI calender Events Scheduling CRUD operations</h2>
<!--Styles for UI calender-->
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<!--Angualar script libraries-->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="~/Scripts/calendar.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/gcal.js"></script>
<!--Current application Scripts-->
<script src="~/Scripts/myscript.js"></script>
<!--Bootstrap Angular UI Modal popup script library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
@* HTML *@
<div ng-app="myapp" ng-controller="CalenderController">
     <!--Angular template for modal dialog code structure starts here-->
    <script type="text/ng-template" id="modalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">Events</h3>
        </div>
        <div class="modal-body">
            <div style="color:red">{{Message}}</div>
            <div class="form-group">
                <label>Event Title : </label>
                <input type="text" ng-model="NewEvent.Title" autofocus class="form-control" />
            </div>
            <div class="form-group">
                <label>Description : </label>
                <input type="text" ng-model="NewEvent.Description" class="form-control" />
            </div>
            <div class="form-group">
                <label>Time Slot : </label>
                <span>{{NewEvent.StartAt}} - {{NewEvent.EndAt}}</span>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">Save</button>
            <button class="btn btn-danger" type="button" ng-show="NewEvent.EventID > 0" ng-click="delete()">Delete</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>

        </div>
        <!--Angular modal dialog code ends here-->
    </script>
    <div class="row">
        <div class="col-md-12">
            <!--this element displays the UI-caledar-->
            <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
        </div>      
    </div>
</div>
3.I am using Bootstrap Angular UI Modal popup to Create,Edit and Delete the Events created in the UI calendar.

Add Script for Calendar Functionality

1.Right click on Scripts folder --> Add --> Java script file.
2.Add below script code for UI -calendar display and CRUD operations.
//ui.calendar --> for caledar control
//ui.bootstrap  --> for bootstrap angualr UI modal popup
var app = angular.module('myapp', ['ui.calendar', 'ui.bootstrap']);
app.controller('CalenderController', ['$scope', '$http', 'uiCalendarConfig', '$uibModal', function ($scope, $http, uiCalendarConfig, $uibModal) {    
    $scope.SelectedEvent = null;
    var isFirstTime = true;
    $scope.events = [];
    $scope.eventSources = [$scope.events];

    $scope.NewEvent = {};
    //this function for get datetime from json date
    function getDate(datetime) {
        if (datetime != null) {
            var mili = datetime.replace(/\/Date\((-?\d+)\)\//, '$1');
            return new Date(parseInt(mili));
        }
        else {
            return "";
        }
    }
    // this function clears clender enents
    function clearCalendar() {
        if (uiCalendarConfig.calendars.myCalendar != null) {
            uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
            uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect');
        }
    }
    //Load events from server to display on caledar
    function populate() {
        clearCalendar();
        $http.get('/home/getevents', {
            cache: false,
            params: {}
        }).then(function (data) {
            $scope.events.slice(0, $scope.events.length);
            angular.forEach(data.data, function (value) {
                $scope.events.push({
                    id : value.EventID,
                    title: value.Title,
                    description: value.Description,
                    start: new Date(parseInt(value.StartAt.substr(6))),
                    end: new Date(parseInt(value.EndAt.substr(6))),
                    allDay: value.IsFullDay,
                    stick: true
                });
            });
        });
    }
    populate();
    //UI- calendar configuration
    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            displayEventTime: true,
            header: {
                left: 'month,agendaWeek,agendaDay',
                center: 'title',
                right:'today prev,next'
            },
            timeFormat : {
                month : ' ', // for hide on month view
                agenda: 'h:mm t'
            },
            selectable: true,
            selectHelper: true,
            select : function(start, end){
                var fromDate = moment(start).format('YYYY/MM/DD LT');
                var endDate = moment(end).format('YYYY/MM/DD LT');
                $scope.NewEvent = {
                    EventID : 0,
                    StartAt : fromDate,
                    EndAt : endDate,
                    IsFullDay :false,
                    Title : '',
                    Description : ''
                }

                $scope.ShowModal();
            },
            eventClick: function (event) {
                $scope.SelectedEvent = event;
                var fromDate = moment(event.start).format('YYYY/MM/DD LT');
                var endDate = moment(event.end).format('YYYY/MM/DD LT');
                $scope.NewEvent = {
                    EventID : event.id,
                    StartAt : fromDate,
                    EndAt : endDate,
                    IsFullDay :false,
                    Title : event.title,
                    Description : event.description
                }

                $scope.ShowModal();
            },
            eventAfterAllRender: function () {
                if ($scope.events.length > 0 && isFirstTime) {
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                }
            }
        }
    };

    //This function shows bootstrap modal dialog
    $scope.ShowModal = function () {
        $scope.option = {
            templateUrl: 'modalContent.html',
            controller: 'modalController',
            backdrop: 'static',
            resolve: {
                NewEvent: function () {
                    return $scope.NewEvent;
                }
            }
        };
        //CRUD operations on Calendar starts here
        var modal = $uibModal.open($scope.option);
        modal.result.then(function (data) {
            $scope.NewEvent = data.event;
            switch (data.operation) {
                case 'Save':            //save
                    $http({
                        method: 'POST',
                        url: '/home/SaveEvent',
                        data : $scope.NewEvent
                    }).then(function (response) {
                        if (response.data.status) {
                            populate();
                        }
                    })
                    break;
                case 'Delete':          //delete
                    $http({
                        method: 'POST',
                        url: '/home/DeleteEvent',
                        data: {'eventID' : $scope.NewEvent.EventID }
                    }).then(function (response) {
                        if (response.data.status) {
                            populate();
                        }
                    })
                    break;
                default:
                    break;
            }
        }, function () {
            console.log('Modal dialog closed');
        })
    }
}])
3.In above code i used $http service to contact with server(for save,Edit and delete oeprations).
4.Add below code to display the Bootstrap Angular UI Modal popup.
// create a new controller for Bootstrap Angualr modal popup
app.controller('modalController', ['$scope', '$uibModalInstance', 'NewEvent', function ($scope, $uibModalInstance,NewEvent) {
    $scope.NewEvent = NewEvent;
    $scope.Message = "";
    $scope.ok = function () {
        if ($scope.NewEvent.Title.trim() != "") {
            $uibModalInstance.close({event : $scope.NewEvent, operation: 'Save'});
        }
        else {
            $scope.Message = "Event title required!";
        }
    }
    $scope.delete = function () {
        $uibModalInstance.close({ event: $scope.NewEvent, operation: 'Delete' });
    }
    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    }
}])
5.Finally run the application and see the output in browser.

CRUD operations on Angular UI Calendar(Event Scheduling)

6.To create new event click on any Date.then you get a popup like below.

CRUD operations on Angular UI Calendar(Event Scheduling)

 7.To perform EDIT and DELETE operations click on any event.
CRUD operations on Angular UI Calendar(Event Scheduling)

Download the source code for this application here Source Code(VS2015 code).

Conclusion

I hope this article may helpful for many readers.If you recommend any suggestions i always welcome.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates...

Tuesday, 26 July 2016

Implementing Nested Web Grid in ASP.NET MVC5

21:07:00 Posted by raviteja swayampu , 3 comments
In many website you say saw the nested grids for good information display for end user.In this tutorial i am going to explain about Implementing Nested web grid (Expandable) in ASP.NET MVC5 application.In previous posts i am explained about Exporting Webgrid to PDF  and Exporting webgrid to Excel.Now in this i will explain how to implement nested grid using jquery.The below are some of posts on web grid.
Read:

Implementing Nested web grid in MVC


1.Create a web application using MVC Empty template in VS2013.
2.Create a below table schema with below code..
CREATE TABLE [dbo].[Demo_OrderMaster] (
    [OrderID]         INT             IDENTITY (1, 1) NOT NULL,
    [OrderDate]       DATETIME        NOT NULL,
    [OrderAmount]     NUMERIC (10, 2) NOT NULL,
    [CustomerName]    VARCHAR (100)   NOT NULL,
    [CustomerAddress] VARCHAR (200)   NULL,
    PRIMARY KEY CLUSTERED ([OrderID] ASC)
);

CREATE TABLE [dbo].[Demo_OrderDetails] (
    [OrderDetailsID] INT             IDENTITY (1, 1) NOT NULL,
    [OrderID]        INT             NOT NULL,
    [Product]        VARCHAR (100)   NOT NULL,
    [Quantity]       INT             NOT NULL,
    [Rate]           NUMERIC (10, 2) NOT NULL,
    [Amount]         NUMERIC (10, 2) NOT NULL,
    PRIMARY KEY CLUSTERED ([OrderDetailsID] ASC)
);
3.Now table schema is created successfully.And insert some data into above tables.
SET IDENTITY_INSERT [dbo].[Demo_OrderMaster] ON
INSERT INTO [dbo].[Demo_OrderMaster] ([OrderID], [OrderDate], [OrderAmount], [CustomerName], [CustomerAddress]) VALUES (1, N'2016-09-12 00:00:00', CAST(5000.00 AS Decimal(10, 2)), N'Raviteja', N'Hyderabad,500073')
INSERT INTO [dbo].[Demo_OrderMaster] ([OrderID], [OrderDate], [OrderAmount], [CustomerName], [CustomerAddress]) VALUES (2, N'2015-10-22 00:00:00', CAST(4023.00 AS Decimal(10, 2)), N'Mark', N'S.R.Nagar')
INSERT INTO [dbo].[Demo_OrderMaster] ([OrderID], [OrderDate], [OrderAmount], [CustomerName], [CustomerAddress]) VALUES (3, N'2016-10-02 00:00:00', CAST(7023.00 AS Decimal(10, 2)), N'Tony stark', N'Washington DC')
INSERT INTO [dbo].[Demo_OrderMaster] ([OrderID], [OrderDate], [OrderAmount], [CustomerName], [CustomerAddress]) VALUES (4, N'2014-07-10 00:00:00', CAST(3000.00 AS Decimal(10, 2)), N'Jony dop', N'New Jersy')
INSERT INTO [dbo].[Demo_OrderMaster] ([OrderID], [OrderDate], [OrderAmount], [CustomerName], [CustomerAddress]) VALUES (6, N'2015-03-03 00:00:00', CAST(9394.00 AS Decimal(10, 2)), N'Jukenberg', N'Kalifornia')
INSERT INTO [dbo].[Demo_OrderMaster] ([OrderID], [OrderDate], [OrderAmount], [CustomerName], [CustomerAddress]) VALUES (8, N'2016-03-05 00:00:00', CAST(9834.00 AS Decimal(10, 2)), N'Sara', N'London')
SET IDENTITY_INSERT [dbo].[Demo_OrderMaster] OFF

SET IDENTITY_INSERT [dbo].[Demo_OrderDetails] ON
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (1, 1, N'ASP.NET Ebook', 1, CAST(2000.00 AS Decimal(10, 2)), CAST(2000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (2, 1, N'SQL Server 2012 v.1.0', 1, CAST(3000.00 AS Decimal(10, 2)), CAST(3000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (3, 1, N'Telerik Ajax Webform ', 1, CAST(423.00 AS Decimal(10, 2)), CAST(423.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (4, 2, N'Motorola e-2210', 1, CAST(5000.00 AS Decimal(10, 2)), CAST(5000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (5, 2, N'B. Handset ', 2, CAST(711.50 AS Decimal(10, 2)), CAST(1423.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (6, 3, N'4Gb Ram - E1102032', 2, CAST(2500.00 AS Decimal(10, 2)), CAST(5000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (7, 3, N'1TB Hard-disk Sanddisk', 1, CAST(2458.00 AS Decimal(10, 2)), CAST(2458.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (8, 4, N'Levis tea shirt', 3, CAST(1000.00 AS Decimal(10, 2)), CAST(1500.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (9, 4, N'Angular Js book', 2, CAST(1500.00 AS Decimal(10, 2)), CAST(3000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (10, 4, N'The Secret', 1, CAST(2000.00 AS Decimal(10, 2)), CAST(2000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (11, 4, N'The pirates of the carebian CD', 1, CAST(1274.00 AS Decimal(10, 2)), CAST(3000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (12, 8, N'Lenovo laptop', 1, CAST(30000.00 AS Decimal(10, 2)), CAST(35000.00 AS Decimal(10, 2)))
INSERT INTO [dbo].[Demo_OrderDetails] ([OrderDetailsID], [OrderID], [Product], [Quantity], [Rate], [Amount]) VALUES (13, 7, N'Dell laptop', 2, CAST(50.00 AS Decimal(10, 2)), CAST(50000.00 AS Decimal(10, 2)))
SET IDENTITY_INSERT [dbo].[Demo_OrderDetails] OFF

4.Database phase is completed.Now add ADO.NET entity data model to solution.

Add ADO.NET Entity Data Model

1.Right click on Models folder--> Add --> New Item -->Select ADO.NET Entity Data Model(Under Data) --> name it -->Add --> select Add from Database (In Entity Data Model wizard) --> Next
2.Select Database --> give name for web.config.
3.Choose your Database objects(tables) and click finish.
4.Now Model is added to my project.
Note:1.Add another file in Models folder to bind those two tables data.
2.Right click on Models --> Add --> Class file --> name it -->add
3.Replace it below code..
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCNestedWebgrid.Models
{
    public class OrderVM
    {
        public Demo_OrderMaster order { get; set; }
        public List orderDetails { get; set; }
    }
}

Add Controller to pass data to View.

1.Right click on Controller --> Add --> Controllers --> select Empty Controller template --> name it --> Add.
2.Replace the HomeController code with below code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCNestedWebgrid.Models;

namespace MVCNestedWebgrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            List allOrder = new List();

            // Gets the data from database and pass it to View
            //using strongly typed view concept.
            using (DatabaseEntities dc = new DatabaseEntities())
            {
                var orders = dc.Demo_OrderMaster.OrderByDescending(a => a.OrderID);
                foreach (var i in orders)
                {
                    var order_details = dc.Demo_OrderDetails.Where(a => a.OrderID.Equals(i.OrderID)).ToList();
                    allOrder.Add(new OrderVM { order= i, orderDetails = order_details });
                }
            }
            return View(allOrder);
        }
    }
}

Add View to display Grid

1.Right click on Index action in HomeController and Add view.
2.Using below we create a nested sub grid using Web grid class.
@{
    ViewBag.Title = "Nested webgrid implementation";
    WebGrid grid = new WebGrid(source: Model, canSort: false);
}
<div id="main" style="padding:25px; background-color:white;">
    <h2>Nested webgrid in ASP.NET MVC5 application</h2>
    @grid.GetHtml(
            htmlAttributes: new { id = "MainGrid", width = "700px" },
    tableStyle: "table table-bordered table-responsive",
    //for main grid display
    columns: grid.Columns(
            grid.Column("order.OrderID", "Order ID"),
            grid.Column(header: "Order Date", format: (item) => string.Format("{0:dd-MM-yyyy}", item.order.OrderDate)),
            grid.Column("order.CustomerName", "Customer Name"),
            grid.Column("order.CustomerAddress", "Address"),

            //nested grid code starts here
            grid.Column(format: (item) =>
            {
                WebGrid subGrid = new WebGrid(source: item.orderDetails);
                return subGrid.GetHtml(
                    htmlAttributes: new { id = "SubGrid" },
                    columns: subGrid.Columns(
                            subGrid.Column("Product", "Product"),
                            subGrid.Column("Quantity", "Quantity"),
                            subGrid.Column("Rate", "Rate"),
                            subGrid.Column("Amount", "Amount")
                        )
                    );
            })
        )
    )
</div>
3.Add below jquery script code that makes grid collapsible.
 $(document).ready(function () {
            //gets the size of the tabl(colmns)
            var size = $("#main #MainGrid > thead > tr >th").size();
            //removes the last column to display sbgrid
            $("#main #MainGrid > thead > tr >th").last().remove();
            //adding new column for sbgrid header
            $("#main #MainGrid > thead > tr").prepend(""); 
            $("#main #MainGrid > tbody > tr").each(function (i, el) {
                $(this).prepend(
                        $("")
                        .addClass("expand")
                        .addClass("hoverEff")
                        .attr('title', "click for show/hide")
                    );

                //Now get sub table from last column and add this to the next new added row
                var table = $("table", this).parent().html();
                //add new row with this subtable
                $(this).after("" + table + "

");
                $("table", this).parent().remove();
                // click event that makes row collapsable
                $(".hoverEff", this).live("click", function () {
                    $(this).parent().closest("tr").next().slideToggle(100);
                    $(this).toggleClass("expand collapse");
                });
            });
            //subgrid is collapsed by default
            $("#main #MainGrid > tbody > tr td.expand").each(function (i, el) {
                $(this).toggleClass("expand collapse");
                $(this).parent().closest("tr").next().slideToggle(100);
            });
        });
4.The below is the complete Index view code to display the Grid with nested functionality.
@model IEnumerable<MVCNestedWebgrid.Models.OrderVM>

@{
    ViewBag.Title = "Nested webgrid implementation";
    WebGrid grid = new WebGrid(source: Model, canSort: false);
}

<style>
    /*Here I will write some css for looks good*/

    th, td {
        padding: 5px;
    }

    th {
        background-color: lightgreen;
    }

    #MainGrid, #MainGrid tr {
        border: 1px solid #0D857B;
    }

    #SubGrid, #SubGrid tr {
        border: 1px solid green;
    }

    #SubGrid {
        margin: 0px 0px 0px 10px;
        padding: 5px;
        width: 95%;
    }

        #SubGrid th {
            font-size: 12px;
        }

    .hoverEff {
        cursor: pointer;
    }

        .hoverEff:hover {
            background-color: rgb(248, 242, 242);
        }

    .expand {
        background-image: url(/Images/plus.png);
        background-position-x: -22px;
        background-repeat: no-repeat;
    }

    .collapse {
        background-image: url(/Images/plus.png);
        background-position-x: -2px;
        background-repeat: no-repeat;
    }
</style>

<div id="main" style="padding:25px; background-color:white;">
    <h2>Nested webgrid in ASP.NET MVC5 application</h2>
    @grid.GetHtml(
            htmlAttributes: new { id = "MainGrid", width = "700px" },
    tableStyle: "table table-bordered table-responsive",
    //for main grid display
    columns: grid.Columns(
            grid.Column("order.OrderID", "Order ID"),
            grid.Column(header: "Order Date", format: (item) => string.Format("{0:dd-MM-yyyy}", item.order.OrderDate)),
            grid.Column("order.CustomerName", "Customer Name"),
            grid.Column("order.CustomerAddress", "Address"),

            //nested grid code starts here
            grid.Column(format: (item) =>
            {
                WebGrid subGrid = new WebGrid(source: item.orderDetails);
                return subGrid.GetHtml(
                    htmlAttributes: new { id = "SubGrid" },
                    columns: subGrid.Columns(
                            subGrid.Column("Product", "Product"),
                            subGrid.Column("Quantity", "Quantity"),
                            subGrid.Column("Rate", "Rate"),
                            subGrid.Column("Amount", "Amount")
                        )
                    );
            })
        )
    )
</div>
    <!--Jquery code that makes the rows collapsable in grid-->
    <script>
        $(document).ready(function () {
            //gets the size of the tabl(colmns)
            var size = $("#main #MainGrid > thead > tr >th").size();
            //removes the last column to display sbgrid
            $("#main #MainGrid > thead > tr >th").last().remove();
            //adding new column for sbgrid header
            $("#main #MainGrid > thead > tr").prepend("<th></th>"); 
            $("#main #MainGrid > tbody > tr").each(function (i, el) {
                $(this).prepend(
                        $("<td></td>")
                        .addClass("expand")
                        .addClass("hoverEff")
                        .attr('title', "click for show/hide")
                    );

                //Now get sub table from last column and add this to the next new added row
                var table = $("table", this).parent().html();
                //add new row with this subtable
                $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
                $("table", this).parent().remove();
                // click event that makes row collapsable
                $(".hoverEff", this).live("click", function () {
                    $(this).parent().closest("tr").next().slideToggle(100);
                    $(this).toggleClass("expand collapse");
                });
            });
            //subgrid is collapsed by default
            $("#main #MainGrid > tbody > tr td.expand").each(function (i, el) {
                $(this).toggleClass("expand collapse");
                $(this).parent().closest("tr").next().slideToggle(100);
            });
        });
    </script>
5.Now run the application and see the output in browser.


Download the source code of this post here Source Code(visual studio 2013 code).

Conclusion

I hope this article may helpful for many readers.If you recommend any suggestions i always welcome.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates...


Monday, 25 July 2016

How to export Web grid to PDF in MVC5

20:31:00 Posted by raviteja swayampu , No comments
In previous post you How to export web grid to Excel sheet .Now in this post i am going to explain How to Export Web grid to PDF format page.If you are new to this post please refer previous posts on Web grid.
PDF libraries (writer) used in this application are,
iTextSharp: iTextSharp is a post of the open source java library for PDF generation written entirely in C# for .NET platform.
iTextSharp XML Worker: This iTextsharp XML Worker tool parses XHTML snippets and associated CSS and converts them to Pdf format. 
1.We can install this two library files using Nuget package Manager. Go to Solution explorer --> Right click solution --> Manage Nuget packages --> search with string 'itextsharp' --> add.
2.See below screen shot.

How to export Web grid to PDF in MVC5

3.Add above two files to solution.

Export web grid to PDF in MVC5

1.Create ASP.NET Web application using Empty MVC template in Visual studio 2013.
2.Create a table for Web grid to display.
3.Create a table insert some data into the table.
CREATE TABLE [dbo].[UserTable] (
    [UserID]     INT          IDENTITY (1, 1) NOT NULL,
    [UserName]   VARCHAR (50) NOT NULL,
    [Address]    VARCHAR (50) NOT NULL,
    [PostalCode] INT          NOT NULL,
    [Phone]      BIGINT       NOT NULL,
    PRIMARY KEY CLUSTERED ([UserID] ASC)
);
---insert some data to table
SET IDENTITY_INSERT [dbo].[UserTable] ON
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (1, N'Raviteja', N'Hyderabad', 500073, 9834737430)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (2, N'Mark twain', N'New jersy', 474578, 9034983434)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (3, N'Lisa', N'Washington', 467346, 1983483744)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (4, N'Gopala krishna', N'Hyderabad', 573743, 9347364373)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (5, N'Srinivas', N'chennai', 578348, 9398473487)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (6, N'Vinod kumar', N'mumbai', 573483, 9374374373)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (7, N'Priya batia', N'kolkata', 578346, 9378434783)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (8, N'supriya singh', N'Delhi', 587347, 9384734884)
INSERT INTO [dbo].[UserTable] ([UserID], [UserName], [Address], [PostalCode], [Phone]) VALUES (9, N'Rahul rajat singh', N'Delhi', 573467, 9343477437)
SET IDENTITY_INSERT [dbo].[UserTable] OFF

Create a controller and Index action to display Web grid

1.Right click Controllers --> Add --> Controller --> select Empty Controller template --> name it --> Add.
2.I added below Index action method to display and pass data to Web grid in Index view.
//Data that fills the strongly typed view
        //And displays the View page
        public ActionResult Index()
        {
            List data = new List();
            using (DatabaseEntities db = new DatabaseEntities())
            {
                data = db.UserTables.ToList();
            }
            return View(data);
        }
3.Now Add index View(strongly typed) to the Index action.
4.Replace the Index view code with below code..
@model List<ExportWebgridToPDF.Models.UserTable>
@{
    ViewBag.Title = "www.mitechdev.com";
    var grid = new WebGrid(source: Model, canSort: false);
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<h2>Export Webgrid to Pdf</h2>
<!--Btton to export web grid to pdf-->
@Html.ActionLink("Export to PDF", "ExportPdf", "Home", new { @class = "btn btn-success" })
<div>
    @grid.GetHtml(
        tableStyle: "table table-responsive,table-bordered",
        columns: grid.Columns(
              grid.Column("UserID", "UserID"),
              grid.Column("UserName", "User Name"),
              grid.Column("Address", "Address"),
              grid.Column("PostalCode", "Postal Code"),
              grid.Column("Phone", "Phone")
            )
        )
</div>
5.Run the application and see the output in browser..

How to export Web grid to PDF in MVC5

6.Right now i did not implemented any functionality for Export to PDF button.

Implementing Export to PDF functionality

1.Create Another method to export the web grid data in HomeController with type FileStreamResult.
2.Replace the HomeController code with below code(including Index action method also).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Web.Mvc;
using iTextSharp.text;
using iTextSharp.text.pdf;
using ExportWebgridToPDF.Models;
using System.Web.Helpers;

namespace ExportWebgridToPDF.Controllers
{
    public class HomeController : Controller
    {
        //Data that fills the strongly typed view
        //And displays the View page
        public ActionResult Index()
        {
            List data = new List();
            using (DatabaseEntities db = new DatabaseEntities())
            {
                data = db.UserTables.ToList();
            }
            return View(data);
        }
        //Code to Export data to PDF file
        public FileStreamResult ExportPdf()
        {
            List data = new List();
            using (DatabaseEntities db = new DatabaseEntities())
            {
                data = db.UserTables.ToList();
            }
            //convert all webgrid data to single string
            WebGrid grid = new WebGrid(source: data, canSort: false, canPage: false);
            string griddata = grid.GetHtml(
                    columns: grid.Columns(
                        grid.Column("UserID", "UserID"),
                        grid.Column("UserName", "User Name"),
                        grid.Column("Address", "Address"),
                        grid.Column("PostalCode", "Postal Code"),
                        grid.Column("Phone", "Phone")
                   )
                ).ToString();
            //display styles for webgrid table in pdf sheet
            //because iTextSharp takes XHTML and css to pdf.so we need to pass data in XHTML format 
            string export = String.Format(""<html><head>{0}</head><body>{1}</body></html>", "<style>table{ border-spacing: 10px; border-collapse: separate;}</style>", griddata);
            //converting all data into bytes in UTF-8 format
            var bytes = System.Text.Encoding.UTF8.GetBytes(export);
            //Now prepare docment using iTextsharp module
            //And print using PDF writer
            using (var input = new MemoryStream(bytes))
            {
                var output = new MemoryStream();
                var document = new iTextSharp.text.Document(PageSize.A4, 50, 50, 50, 50);
                var writer = PdfWriter.GetInstance(document, output);
                writer.CloseStream = false;
                document.Open();

                var XmlWorker = iTextSharp.tool.xml.XMLWorkerHelper.GetInstance();
                XmlWorker.ParseXHtml(writer, document, input, System.Text.Encoding.UTF8);
                document.Close();
                output.Position = 0;
                return new FileStreamResult(output, "application/pdf");
            }
        }
    }
}
3.Here we are converting those data into XHTML format and we are passing it as input to iTextSharp .
4.Finally run the application and click on Export to PDF button in Index view page.
5.After clicking on button we get below pdf output in browser default pdf viewer.

How to export Web grid to PDF in MVC5

6.Download the source code for application Source Code(visual studio 2013).

Conclusion

I hope this article may helpful for many readers.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates...


Sunday, 24 July 2016

Implementing Event Scheduling in Angular UI calendar

21:02:00 Posted by raviteja swayampu , , No comments
Hi every one in this article i am going to explain about Implementing angular UI calendar with Events scheduling using Angular JS.UI-calendar is a open source git hub project for implementing events scheduling in angular enabled web application.To know more about this UI calendar angular control click here.In this article i am going to show the events in UI calendar that are created in the database.
I will explain it in step by step manner like below.

Implementing Event Scheduling in Angular UI calendar

1.Create a ASP.NET web application using Empty MVC template.
2.I am creating this application in visual studio 2013 (may be the source code of this application i am providing do not work in Visual studio 2015).

3.Create a table with below table definition.
CREATE TABLE [dbo].[EventCalender] (
    [EventID]     INT           IDENTITY (1, 1) NOT NULL,
    [Title]       VARCHAR (250) NOT NULL,
    [Description] VARCHAR (250) NOT NULL,
    [StartAt]     DATETIME      NOT NULL,
    [EndAt]       DATETIME      NOT NULL,
    [IsFullDay]   BIT           NOT NULL,
    PRIMARY KEY CLUSTERED ([EventID] ASC)
);
4.After creating table insert some data into the table.

Add ADO.NET Entity Data Model

1.Right click on Models folder--> Add --> New Item -->Select ADO.NET Entity Data Model(Under Data) --> name it -->Add --> select Add from Database (In Entity Data Model wizard) --> Next
2.Select Database --> give name for web.config.
3.Choose your Database objects(tables) and click finish.
4.Now Model is added to my project.

Create a Controller to Display View and fetch data from DB

1.Right click on Controllers folder --> add --> Controller --> name it.
2.Replace the controller code with below code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AngularUICalender.Models;

namespace AngularUICalender.Controllers
{
    public class HomeController : Controller
    {
        //Index action to display the Index view
        public ActionResult Index()
        {
            return View();
        }
        //Get Events data from server
        public ActionResult GetEventsData()
        {
            using (DatabaseEntities db = new DatabaseEntities())
            {
                var events = db.EventCalenders.OrderBy(a => a.StartAt).ToList();
                return new JsonResult{Data=events,JsonRequestBehavior=JsonRequestBehavior.AllowGet};
            }
        }
 }
}
3.GetEventData method gets the events data from the server to display in UI-Calendar.
4.Add below reference files in Either _layout.cshtml page or Index page.
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<!--Angular javascript references for UI-Calendar-->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/calendar.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/gcal.js"></script>
<!--application script-->
<script src="~/Scripts/myscript.js"></script>
5.download those reference files from link here Download

Add angular script code for UI-calendar implementation

1.Right click on Scripts folder --> add --> java script file --> name it.
2.Replace the code with the below script.
var app = angular.module('myapp', ['ui.calendar']); //Inject dependency here
app.controller('CalenderController', function ($scope, uiCalendarConfig, $http) {
    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    //get the events data from server 
    $http.get('/Home/GetEventsData', {
        cache: true,
        params: {}
    }).then(function (data) {
        //get and push events data to calendar here
        $scope.events.slice(0, $scope.events.length);
        angular.forEach(data.data, function (value) {
            $scope.events.push({
                title: value.Title,
                description: value.Description,
                start: new Date(parseInt(value.StartAt.substr(6))),
                end: new Date(parseInt(value.EndAt.substr(6))),
                allDay: value.IsFullDay,
                stick: true
            });
        });
    });
    //Calender configration in angular
    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            displayEventTime: false,
            header: {
                left: 'Day and Monthly calendar Events',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function (event) {
                $scope.SelectedEvent = event;
            },
            eventAfterAllRender: function () {
                if ($scope.events.length > 0 && isFirstTime) {
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                }
            }
        }
    };
});
3.Here  $scope.uiConfig is used to configure the UI calendar.
4.And $http service to get the data from the server.

Add Index View to display the UI calendar

1.Right click on Index action --> Add View --. name it.
2.Replace the code with below code for Index.cshtml.
@{
    ViewBag.Title = "mitechdev.com";
}
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<!--Angular javascript references for UI-Calendar-->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/calendar.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/gcal.js"></script>
<!--application script-->
<script src="~/Scripts/myscript.js"></script>

<h2>Angular UI Full Caleder Controller</h2>
<div ng-app="myapp" ng-controller="CalenderController">
    <div class="row">
        <div class="col-md-8">
            <!--Calendar display element-->
            <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
        </div>
    </div>
</div>
3.Finally run the application and see output..

Implementing Event Scheduling in Angular UI calendar

Download source code for this application Source code(Visual studio 2013 code).

Conclusion

I hope this article may helpful for many readers.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates...

Friday, 22 July 2016

Angular nvd3 Force Direction Graph in MVC5 application

08:16:00 Posted by raviteja swayampu , , No comments
Hi every one welcome back.In this post i am going to show you the real time Demo of the Angular nvd3 Force Directed Graph.There might be many graph libraries for Angular Charts on internet.But nvd3 provides rich user interaction events and good looking UI. It simply look Beautiful.Mainly this Force graph is used to display the network of things.For Example Diagrammatic representation of  your face book connection.The below is the Simple Live Demo of Force Directed Graph with some sample data.
i already explained about Angular nvd3 Multi bar Horizonthal graph here for implementation.And the live demo for this Graph is here.Live demo 

Angular nvd3 Force Direction Graph Demo


Angular nvd3 Force Direction Graph in MVC5 application

1.Create ASP.NET MVC web application(i created in Visual studio 2013).
2.Create a Controller(HomeController).
3.Create a Index action and add View to this action.
4.Replace the Index view code with below code as shown.

Index.cshtml
@{
    ViewBag.Title = "mitechdev.com";
}

<h2>Angular nvd3-Force Direction Graph</h2>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.7/angular-nvd3.min.js"></script>
<script src="~/Scripts/myscript.js"></script>

<div ng-app="myapp" ng-controller="GraphController">

    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
</div>
5.Add below script code for Graph display...
6.The below script to display the Graph.Here we must add nvd3 directive as dependency in angular module.
7.We can customize this graph using $scope.options and i have prepared the data source using $scope.data .
myscript.js
var app = angular.module('myapp', ['nvd3']);

app.controller('GraphController', function ($scope) {
    var color = d3.scale.category20()
    $scope.options = {
        chart: {
            type: 'forceDirectedGraph',
            height: 500,
            // width: (function () { return nv.utils.windowSize().width })(),
            width:700,
            margin: { top: 20, right: 20, bottom: 20, left: 20 },
            color: function (d) {
                return color(d.group)
            },
            nodeExtras: function (node) {
                node && node
                  .append("text")
                  .attr("dx", 8)
                  .attr("dy", ".35em")
                  .text(function (d) { return d.name })
                  .style('font-size', '10px');
            }
        }
    };

    $scope.data = {
        "nodes": [
            { "name": "Myriel", "group": 1 },
            { "name": "Napoleon", "group": 1 },
            { "name": "Mlle.Baptistine", "group": 1 },
            { "name": "Mme.Magloire", "group": 1 },
            { "name": "CountessdeLo", "group": 1 },
            { "name": "Geborand", "group": 1 },
            { "name": "Champtercier", "group": 1 },
            { "name": "Cravatte", "group": 1 },
            { "name": "Count", "group": 1 },
            { "name": "OldMan", "group": 1 },
            { "name": "Labarre", "group": 2 },
            { "name": "Valjean", "group": 2 },
            { "name": "Marguerite", "group": 3 },
            { "name": "Mme.deR", "group": 2 },
            { "name": "Isabeau", "group": 2 },
            { "name": "Gervais", "group": 2 },
            { "name": "Tholomyes", "group": 3 },
            { "name": "Listolier", "group": 3 },
            { "name": "Fameuil", "group": 3 },
            { "name": "Blacheville", "group": 3 },
            { "name": "Favourite", "group": 3 },
            { "name": "Dahlia", "group": 3 },
            { "name": "Zephine", "group": 3 },
            { "name": "Fantine", "group": 3 },
            { "name": "Mme.Thenardier", "group": 4 },
            { "name": "Thenardier", "group": 4 },
            { "name": "Cosette", "group": 5 },
            { "name": "Javert", "group": 4 },
            { "name": "Fauchelevent", "group": 0 },
            { "name": "Bamatabois", "group": 2 },
            { "name": "Perpetue", "group": 3 },
            { "name": "Simplice", "group": 2 },
            { "name": "Scaufflaire", "group": 2 },
            { "name": "Woman1", "group": 2 },
            { "name": "Judge", "group": 2 },
            { "name": "Champmathieu", "group": 2 },
            { "name": "Brevet", "group": 2 },
            { "name": "Chenildieu", "group": 2 },
            { "name": "Cochepaille", "group": 2 },
            { "name": "Pontmercy", "group": 4 },
            { "name": "Boulatruelle", "group": 6 },
            { "name": "Eponine", "group": 4 },
            { "name": "Anzelma", "group": 4 },
            { "name": "Woman2", "group": 5 },
            { "name": "MotherInnocent", "group": 0 },
            { "name": "Gribier", "group": 0 },
            { "name": "Jondrette", "group": 7 },
            { "name": "Mme.Burgon", "group": 7 },
            { "name": "Gavroche", "group": 8 },
            { "name": "Gillenormand", "group": 5 },
            { "name": "Magnon", "group": 5 },
            { "name": "Mlle.Gillenormand", "group": 5 },
            { "name": "Mme.Pontmercy", "group": 5 },
            { "name": "Mlle.Vaubois", "group": 5 },
            { "name": "Lt.Gillenormand", "group": 5 },
            { "name": "Marius", "group": 8 },
            { "name": "BaronessT", "group": 5 },
            { "name": "Mabeuf", "group": 8 },
            { "name": "Enjolras", "group": 8 },
            { "name": "Combeferre", "group": 8 },
            { "name": "Prouvaire", "group": 8 },
            { "name": "Feuilly", "group": 8 },
            { "name": "Courfeyrac", "group": 8 },
            { "name": "Bahorel", "group": 8 },
            { "name": "Bossuet", "group": 8 },
            { "name": "Joly", "group": 8 },
            { "name": "Grantaire", "group": 8 },
            { "name": "MotherPlutarch", "group": 9 },
            { "name": "Gueulemer", "group": 4 },
            { "name": "Babet", "group": 4 },
            { "name": "Claquesous", "group": 4 },
            { "name": "Montparnasse", "group": 4 },
            { "name": "Toussaint", "group": 5 },
            { "name": "Child1", "group": 10 },
            { "name": "Child2", "group": 10 },
            { "name": "Brujon", "group": 4 },
            { "name": "Mme.Hucheloup", "group": 8 }
        ],
        "links": [
            { "source": 1, "target": 0, "value": 1 },
            { "source": 2, "target": 0, "value": 8 },
            { "source": 3, "target": 0, "value": 10 },
            { "source": 3, "target": 2, "value": 6 },
            { "source": 4, "target": 0, "value": 1 },
            { "source": 5, "target": 0, "value": 1 },
            { "source": 6, "target": 0, "value": 1 },
            { "source": 7, "target": 0, "value": 1 },
            { "source": 8, "target": 0, "value": 2 },
            { "source": 9, "target": 0, "value": 1 },
            { "source": 11, "target": 10, "value": 1 },
            { "source": 11, "target": 3, "value": 3 },
            { "source": 11, "target": 2, "value": 3 },
            { "source": 11, "target": 0, "value": 5 },
            { "source": 12, "target": 11, "value": 1 },
            { "source": 13, "target": 11, "value": 1 },
            { "source": 14, "target": 11, "value": 1 },
            { "source": 15, "target": 11, "value": 1 },
            { "source": 17, "target": 16, "value": 4 },
            { "source": 18, "target": 16, "value": 4 },
            { "source": 18, "target": 17, "value": 4 },
            { "source": 19, "target": 16, "value": 4 },
            { "source": 19, "target": 17, "value": 4 },
            { "source": 19, "target": 18, "value": 4 },
            { "source": 20, "target": 16, "value": 3 },
            { "source": 20, "target": 17, "value": 3 },
            { "source": 20, "target": 18, "value": 3 },
            { "source": 20, "target": 19, "value": 4 },
            { "source": 21, "target": 16, "value": 3 },
            { "source": 21, "target": 17, "value": 3 },
            { "source": 21, "target": 18, "value": 3 },
            { "source": 21, "target": 19, "value": 3 },
            { "source": 21, "target": 20, "value": 5 },
            { "source": 22, "target": 16, "value": 3 },
            { "source": 22, "target": 17, "value": 3 },
            { "source": 22, "target": 18, "value": 3 },
            { "source": 22, "target": 19, "value": 3 },
            { "source": 22, "target": 20, "value": 4 },
            { "source": 22, "target": 21, "value": 4 },
            { "source": 23, "target": 16, "value": 3 },
            { "source": 23, "target": 17, "value": 3 },
            { "source": 23, "target": 18, "value": 3 },
            { "source": 23, "target": 19, "value": 3 },
            { "source": 23, "target": 20, "value": 4 },
            { "source": 23, "target": 21, "value": 4 },
            { "source": 23, "target": 22, "value": 4 },
            { "source": 23, "target": 12, "value": 2 },
            { "source": 23, "target": 11, "value": 9 },
            { "source": 24, "target": 23, "value": 2 },
            { "source": 24, "target": 11, "value": 7 },
            { "source": 25, "target": 24, "value": 13 },
            { "source": 25, "target": 23, "value": 1 },
            { "source": 25, "target": 11, "value": 12 },
            { "source": 26, "target": 24, "value": 4 },
            { "source": 26, "target": 11, "value": 31 },
            { "source": 26, "target": 16, "value": 1 },
            { "source": 26, "target": 25, "value": 1 },
            { "source": 27, "target": 11, "value": 17 },
            { "source": 27, "target": 23, "value": 5 },
            { "source": 27, "target": 25, "value": 5 },
            { "source": 27, "target": 24, "value": 1 },
            { "source": 27, "target": 26, "value": 1 },
            { "source": 28, "target": 11, "value": 8 },
            { "source": 28, "target": 27, "value": 1 },
            { "source": 29, "target": 23, "value": 1 },
            { "source": 29, "target": 27, "value": 1 },
            { "source": 29, "target": 11, "value": 2 },
            { "source": 30, "target": 23, "value": 1 },
            { "source": 31, "target": 30, "value": 2 },
            { "source": 31, "target": 11, "value": 3 },
            { "source": 31, "target": 23, "value": 2 },
            { "source": 31, "target": 27, "value": 1 },
            { "source": 32, "target": 11, "value": 1 },
            { "source": 33, "target": 11, "value": 2 },
            { "source": 33, "target": 27, "value": 1 },
            { "source": 34, "target": 11, "value": 3 },
            { "source": 34, "target": 29, "value": 2 },
            { "source": 35, "target": 11, "value": 3 },
            { "source": 35, "target": 34, "value": 3 },
            { "source": 35, "target": 29, "value": 2 },
            { "source": 36, "target": 34, "value": 2 },
            { "source": 36, "target": 35, "value": 2 },
            { "source": 36, "target": 11, "value": 2 },
            { "source": 36, "target": 29, "value": 1 },
            { "source": 37, "target": 34, "value": 2 },
            { "source": 37, "target": 35, "value": 2 },
            { "source": 37, "target": 36, "value": 2 },
            { "source": 37, "target": 11, "value": 2 },
            { "source": 37, "target": 29, "value": 1 },
            { "source": 38, "target": 34, "value": 2 },
            { "source": 38, "target": 35, "value": 2 },
            { "source": 38, "target": 36, "value": 2 },
            { "source": 38, "target": 37, "value": 2 },
            { "source": 38, "target": 11, "value": 2 },
            { "source": 38, "target": 29, "value": 1 },
            { "source": 39, "target": 25, "value": 1 },
            { "source": 40, "target": 25, "value": 1 },
            { "source": 41, "target": 24, "value": 2 },
            { "source": 41, "target": 25, "value": 3 },
            { "source": 42, "target": 41, "value": 2 },
            { "source": 42, "target": 25, "value": 2 },
            { "source": 42, "target": 24, "value": 1 },
            { "source": 43, "target": 11, "value": 3 },
            { "source": 43, "target": 26, "value": 1 },
            { "source": 43, "target": 27, "value": 1 },
            { "source": 44, "target": 28, "value": 3 },
            { "source": 44, "target": 11, "value": 1 },
            { "source": 45, "target": 28, "value": 2 },
            { "source": 47, "target": 46, "value": 1 },
            { "source": 48, "target": 47, "value": 2 },
            { "source": 48, "target": 25, "value": 1 },
            { "source": 48, "target": 27, "value": 1 },
            { "source": 48, "target": 11, "value": 1 },
            { "source": 49, "target": 26, "value": 3 },
            { "source": 49, "target": 11, "value": 2 },
            { "source": 50, "target": 49, "value": 1 },
            { "source": 50, "target": 24, "value": 1 },
            { "source": 51, "target": 49, "value": 9 },
            { "source": 51, "target": 26, "value": 2 },
            { "source": 51, "target": 11, "value": 2 },
            { "source": 52, "target": 51, "value": 1 },
            { "source": 52, "target": 39, "value": 1 },
            { "source": 53, "target": 51, "value": 1 },
            { "source": 54, "target": 51, "value": 2 },
            { "source": 54, "target": 49, "value": 1 },
            { "source": 54, "target": 26, "value": 1 },
            { "source": 55, "target": 51, "value": 6 },
            { "source": 55, "target": 49, "value": 12 },
            { "source": 55, "target": 39, "value": 1 },
            { "source": 55, "target": 54, "value": 1 },
            { "source": 55, "target": 26, "value": 21 },
            { "source": 55, "target": 11, "value": 19 },
            { "source": 55, "target": 16, "value": 1 },
            { "source": 55, "target": 25, "value": 2 },
            { "source": 55, "target": 41, "value": 5 },
            { "source": 55, "target": 48, "value": 4 },
            { "source": 56, "target": 49, "value": 1 },
            { "source": 56, "target": 55, "value": 1 },
            { "source": 57, "target": 55, "value": 1 },
            { "source": 57, "target": 41, "value": 1 },
            { "source": 57, "target": 48, "value": 1 },
            { "source": 58, "target": 55, "value": 7 },
            { "source": 58, "target": 48, "value": 7 },
            { "source": 58, "target": 27, "value": 6 },
            { "source": 58, "target": 57, "value": 1 },
            { "source": 58, "target": 11, "value": 4 },
            { "source": 59, "target": 58, "value": 15 },
            { "source": 59, "target": 55, "value": 5 },
            { "source": 59, "target": 48, "value": 6 },
            { "source": 59, "target": 57, "value": 2 },
            { "source": 60, "target": 48, "value": 1 },
            { "source": 60, "target": 58, "value": 4 },
            { "source": 60, "target": 59, "value": 2 },
            { "source": 61, "target": 48, "value": 2 },
            { "source": 61, "target": 58, "value": 6 },
            { "source": 61, "target": 60, "value": 2 },
            { "source": 61, "target": 59, "value": 5 },
            { "source": 61, "target": 57, "value": 1 },
            { "source": 61, "target": 55, "value": 1 },
            { "source": 62, "target": 55, "value": 9 },
            { "source": 62, "target": 58, "value": 17 },
            { "source": 62, "target": 59, "value": 13 },
            { "source": 62, "target": 48, "value": 7 },
            { "source": 62, "target": 57, "value": 2 },
            { "source": 62, "target": 41, "value": 1 },
            { "source": 62, "target": 61, "value": 6 },
            { "source": 62, "target": 60, "value": 3 },
            { "source": 63, "target": 59, "value": 5 },
            { "source": 63, "target": 48, "value": 5 },
            { "source": 63, "target": 62, "value": 6 },
            { "source": 63, "target": 57, "value": 2 },
            { "source": 63, "target": 58, "value": 4 },
            { "source": 63, "target": 61, "value": 3 },
            { "source": 63, "target": 60, "value": 2 },
            { "source": 63, "target": 55, "value": 1 },
            { "source": 64, "target": 55, "value": 5 },
            { "source": 64, "target": 62, "value": 12 },
            { "source": 64, "target": 48, "value": 5 },
            { "source": 64, "target": 63, "value": 4 },
            { "source": 64, "target": 58, "value": 10 },
            { "source": 64, "target": 61, "value": 6 },
            { "source": 64, "target": 60, "value": 2 },
            { "source": 64, "target": 59, "value": 9 },
            { "source": 64, "target": 57, "value": 1 },
            { "source": 64, "target": 11, "value": 1 },
            { "source": 65, "target": 63, "value": 5 },
            { "source": 65, "target": 64, "value": 7 },
            { "source": 65, "target": 48, "value": 3 },
            { "source": 65, "target": 62, "value": 5 },
            { "source": 65, "target": 58, "value": 5 },
            { "source": 65, "target": 61, "value": 5 },
            { "source": 65, "target": 60, "value": 2 },
            { "source": 65, "target": 59, "value": 5 },
            { "source": 65, "target": 57, "value": 1 },
            { "source": 65, "target": 55, "value": 2 },
            { "source": 66, "target": 64, "value": 3 },
            { "source": 66, "target": 58, "value": 3 },
            { "source": 66, "target": 59, "value": 1 },
            { "source": 66, "target": 62, "value": 2 },
            { "source": 66, "target": 65, "value": 2 },
            { "source": 66, "target": 48, "value": 1 },
            { "source": 66, "target": 63, "value": 1 },
            { "source": 66, "target": 61, "value": 1 },
            { "source": 66, "target": 60, "value": 1 },
            { "source": 67, "target": 57, "value": 3 },
            { "source": 68, "target": 25, "value": 5 },
            { "source": 68, "target": 11, "value": 1 },
            { "source": 68, "target": 24, "value": 1 },
            { "source": 68, "target": 27, "value": 1 },
            { "source": 68, "target": 48, "value": 1 },
            { "source": 68, "target": 41, "value": 1 },
            { "source": 69, "target": 25, "value": 6 },
            { "source": 69, "target": 68, "value": 6 },
            { "source": 69, "target": 11, "value": 1 },
            { "source": 69, "target": 24, "value": 1 },
            { "source": 69, "target": 27, "value": 2 },
            { "source": 69, "target": 48, "value": 1 },
            { "source": 69, "target": 41, "value": 1 },
            { "source": 70, "target": 25, "value": 4 },
            { "source": 70, "target": 69, "value": 4 },
            { "source": 70, "target": 68, "value": 4 },
            { "source": 70, "target": 11, "value": 1 },
            { "source": 70, "target": 24, "value": 1 },
            { "source": 70, "target": 27, "value": 1 },
            { "source": 70, "target": 41, "value": 1 },
            { "source": 70, "target": 58, "value": 1 },
            { "source": 71, "target": 27, "value": 1 },
            { "source": 71, "target": 69, "value": 2 },
            { "source": 71, "target": 68, "value": 2 },
            { "source": 71, "target": 70, "value": 2 },
            { "source": 71, "target": 11, "value": 1 },
            { "source": 71, "target": 48, "value": 1 },
            { "source": 71, "target": 41, "value": 1 },
            { "source": 71, "target": 25, "value": 1 },
            { "source": 72, "target": 26, "value": 2 },
            { "source": 72, "target": 27, "value": 1 },
            { "source": 72, "target": 11, "value": 1 },
            { "source": 73, "target": 48, "value": 2 },
            { "source": 74, "target": 48, "value": 2 },
            { "source": 74, "target": 73, "value": 3 },
            { "source": 75, "target": 69, "value": 3 },
            { "source": 75, "target": 68, "value": 3 },
            { "source": 75, "target": 25, "value": 3 },
            { "source": 75, "target": 48, "value": 1 },
            { "source": 75, "target": 41, "value": 1 },
            { "source": 75, "target": 70, "value": 1 },
            { "source": 75, "target": 71, "value": 1 },
            { "source": 76, "target": 64, "value": 1 },
            { "source": 76, "target": 65, "value": 1 },
            { "source": 76, "target": 66, "value": 1 },
            { "source": 76, "target": 63, "value": 1 },
            { "source": 76, "target": 62, "value": 1 },
            { "source": 76, "target": 48, "value": 1 },
            { "source": 76, "target": 58, "value": 1 }
        ]
    }
});
Download the source code for this application here Source code

Conclusion

I hope this article may helpful for many readers.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates...