AngularJs With Data Table With Dialog Box
15:23
Introduction
In this post I want to show how to create angular dialog box. ngDialog is used for showing the DialogBox.Dialog Box View
Using Js and Css
<link href="/css/jquery.dataTables.css" rel="stylesheet" /> Download <link href="/css/ngDialog.css" rel="stylesheet" /> Download <link href="/css/ngDialog-theme-plain.css" rel="stylesheet" /> Download <link href="/css/ngDialog-theme-default.css" rel="stylesheet" /> Download <link href="/css/ngDialog-custom-width.css" rel="stylesheet" /> Download <script src="/js/jquery.js"></script> Download <script src="/js/jquery.dataTables.js"></script> Download <script src="/js/angular.js"></script> Download <script src="/js/angular-datatables.js"></script> Download <script src="/js/angular-resource.js"></script> Download <script src="/js/ngDialog.js"></script> Download
app.js
var app = angular.module('myApp', ['datatables', 'ngDialog', 'ngResource']);
app.controller('ctrlDialog', function ($scope, $rootScope, $compile, $resource, ngDialog, $q, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.show = show;
vm.dtInstance = {};
vm.persons = {};
vm.dtOptions = DTOptionsBuilder.fromSource('/data.json')
.withPaginationType('full_numbers')
.withOption('createdRow', createdRow);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
];
function show(person) {
ngDialog.open({
template: 'showDialog',
controller: 'ctrlDialog',
className: 'ngdialog-theme-default',
disableAnimation: true,
scope: $scope
});
$scope.ID = person.id;
$scope.FirstName = person.firstName;
$scope.LastName = person.lastName;
}
function createdRow(row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
}
function actionsHtml(data, type, full, meta) {
vm.persons[data.id] = data;
return '<button title="Details" ng-click="showCase.show(showCase.persons[' + data.id + '])">Details</button>';
}
});
data.json
Click here to download data.jsonView
@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link href="/css/jquery.dataTables.css" rel="stylesheet" />
<link href="/css/ngDialog.css" rel="stylesheet" />
<link href="/css/ngDialog-theme-plain.css" rel="stylesheet" />
<link href="/css/ngDialog-theme-default.css" rel="stylesheet" />
<link href="/css/ngDialog-custom-width.css" rel="stylesheet" />
<script src="/js/jquery.js"></script>
<script src="/js/jquery.dataTables.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/angular-datatables.js"></script>
<script src="/js/angular-resource.js"></script>
<script src="/js/ngDialog.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<div style="margin-left: 25%; margin-right: 25%; margin-top: 5%;">
<h1>Angular Datatable with Dialog Box</h1>
<div ng-controller="ctrlDialog as showCase" style="border: 1px solid black; padding: 15px 2px 15px 2px;">
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance"></table>
<script type="text/ng-template" id="showDialog">
<div class="ngdialog-message">
<form name="editForm">
<h2>User Details:</h2>
<div>
<p><strong>ID: </strong>{{ID}}</p>
<p><strong>FirstName: </strong>{{FirstName}}</p>
<p><strong>LastName: </strong>{{LastName}}</p>
</div>
</form>
</div>
</script>
</div>
</div>
</body>
</html>
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AngularDialogBox.Controllers
{
public class TestController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Error!
If you getting any error please add the following in web.config <system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
0 comments