TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Mahesh Reddy
NA
363
16.9k
Dynamically add/delete rows in child row of parent row
Nov 15 2018 3:45 AM
@{
Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.Customers = [
{
Name: "John Hammond", Country: "United States",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Mudassar Khan", Country: "India",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Suzanne Mathews", Country: "France",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
},
{
Name: "Robert Schidner", Country: "Russia",
Orders: [
{ OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
{ OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
{ OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
]
}
];
$scope.Orders = [];
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Country = $scope.Country;
$scope.Customers.push(customer);
//Clear the TextBoxes.
$scope.Name = "";
$scope.Country = "";
};
$scope.add2 = function () {
var items = {};
items.OrderId = $scope.OrderId;
items.Freight = $scope.Freight;
items.ShipCountry = $scope.ShipCountry;
$scope.Orders.push(items);
$scope.OrderId = "";
$scope.Freight = "";
$scope.ShipCountry = "";
}
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.remove1 = function (index) {
var name = $scope.subitems[index].text;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.subitems.splice(index, 1);
}
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
<th>Country</th>
<th>Subitems</th>
<th> </th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td><input type="text" value="{{m.Name}}" /></td>
<td><input type="text" value="{{m.Country}}" /></td>
<td value="{{m.subitems}}">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Order Id</th>
<th>Freight</th>
<th>ShipCountry</th>
</tr>
<tbody ng-repeat="o in m.Orders">
<tr>
<td>{{o.OrderId}}</td>
<td>{{o.Freight}}</td>
<td>{{o.ShipCountry}}</td>
</tr>
</tbody>
</table>
</td>
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Name" /></td>
<td><input type="text" ng-model="Country" /></td>
<td><button type="button" ng-model="subitems" data-toggle="modal" data-target="{{'#' + subitem+'Opts'}}">Click</button></td>
<td><input type="button" ng-click="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="modal fade" id="{{subitem+'Opts'}}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<table class="table table-condensed">
<thead>
<tr style="padding-left:20px; padding-right:20px;" class="active">
<th class="thick-line" style="padding-left:20px; padding-right:20px; padding-top:6px; padding-bottom:6px;">OrderId</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line">Freight</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line">ShipCountry</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line"> </th>
</tr>
</thead>
<tbody>
<tr style="padding-left:20px; padding-right:20px;" ng-model="myData2" ng-repeat="subitem in Orders">
<td>{{subitem.OrderId}}</td>
<td>{{subitem.Freight}}</td>
<td>{{subitem.ShipCountry}}</td>
<td>
<button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly>Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr style="padding-left:20px; padding-right:20px;">
@*<td><input type="text" ng-model="Id"/></td>*@
<td>
<input type="text" class="input-sm form-control" ng-model="OrderId" />
</td>
<td>
<input type="text" class="input-sm form-control" ng-model="Freight" />
</td>
<td>
<input type="text" class="input-sm form-control" ng-model="ShipCountry" />
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="add2()">Add</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
hi , please be look at my code and try to override my problem
I need to add/delete rows dynamically in child row of parent row
For each parent row we have unique child row
In above code sample code subitems is a child row
Once we click subitems we want to display one pop up window and in that we need 3 fileds named as fright,OrderId,shipcountry
Reply
Answers (
15
)
In grid vie i have print buttom after click on the print but
PLEASE ADD RDAIOBUTTON AND CHECKBOXLIST BIND WHEN EDIT OPTIO