Hi, I have 2 tables based upon category it can display the product table(working fine) in edit functionality also same (in that also working)
Problem is that after clicking of edit functionality category value is displaying properly but product value is showing null
see my screenshot how i am getting output
Could you please help me since morining onwards i have tried but didn't get
[HttpGet]
public ActionResult GetCategories()
{
db.Configuration.ProxyCreationEnabled = false;
var coun = db.Categories.Select(model => new { model.CategoryID, model.CategortName}).ToList();
return Json(coun, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult GetProducts(int CategoryID)
{
db.Configuration.ProxyCreationEnabled = false;
var coun = db.Products.Where(model => model.ProductID == CategoryID).Select(model => new { model.ProductID, model.ProductName }).ToList();
return Json(coun, JsonRequestBehavior.AllowGet);
}
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script>
var app = angular.module('invoice', []);
app.directive("select2", function ($timeout, $parse) {
return {
restrict// Code goes here
: 'AC',
require: 'ngModel',
link: function (scope, element, attrs) {
console.log(attrs);
$timeout(function () {
element.select2();
element.select2Initialized = true;
});
var refreshSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.trigger('change');
});
};
var recreateSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.select2('destroy');
element.select2();
});
};
scope.$watch(attrs.ngModel, refreshSelect);
if (attrs.ngOptions) {
var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
// watch for option list change
scope.$watch(list, recreateSelect);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refreshSelect);
}
}
};
});
app.controller('InvoiceController', ['$scope', '$http', '$window' ,function ($scope, $http, $window) {
$scope.EditCustomer;
$scope.EditIndex;
$scope.edit = function (index) {
debugger;
//$scope.parentrow =true;
//Find the record using Index from Array.
$scope.EditCustomer = $scope.myData[index];
$scope.Category = $scope.EditCustomer.Category;
$scope.Product = $scope.EditCustomer.Product;
$scope.EditIndex = index;
var index;
for (var i = 0; i < $scope.categories.length; i++) {
if ($scope.categories[i].CategortName == $scope.EditCustomer.Category) {
index = i;
}
}
for (var i = 0; i < $scope.products.length; i++) {
if ($scope.products[i].ProductName == $scope.EditCustomer.Product) {
index = i;
}
}
$scope.Category = $scope.categories[index];
$scope.Product = $scope.products[index];
alert($scope.EditCustomer);
}
$scope.myData = [];
$scope.Update = function (index) {
//$scope.parentrow = false;
alert("updated");
//Find the record using Index from Array.
$scope.EditCustomer.Category = $scope.Category.CategortName;
$scope.EditCustomer.Product = $scope.Product.ProductName;
$scope.myData[index] = $scope.EditCustomer;
alert($scope.EditCustomer);
//clear the fields
$scope.Category = "";
$scope.Product = "";
}
$scope.reset = function () {
$scope.Category = "";
$scope.Product = "";
}
GetCategory();
function GetCategory() {
debugger;
$scope.categories = [];
$http({
method: 'Get',
url: '/invoice/GetCategories/',
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetProducts = function () {
var countryId = $scope.Category.CategoryID;
if (countryId) {
$http({
method: 'POST',
url: '/invoice/GetProducts/',
data: JSON.stringify({ CategoryID: countryId })
}).success(function (data, status, headers, config) {
$scope.products = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.products = null;
}
}
// Add functionality for Items
$scope.add = function () {
alert("hello");
debugger;
$scope.myData.push({
Product: $scope.Product.ProductName,
ProductId: $scope.Product.ProductID,
Category: $scope.Category.CategortName,
CategoryID: $scope.Category.CategortName,
});
$scope.Product = "";
$scope.Category = "";
};
// remove functionality for Items
$scope.remove = function (index) {
var name = $scope.myData[index].RAI_Item;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.myData.splice(index, 1);
}
}
// Add functionality for Subitem
}]);
</script>
</head>
<body>
<div class="container" ng-app="invoice" ng-controller="InvoiceController">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Category</th>
<th>Product</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="invoice in myData track by $index">
<tr>
<td>
{{invoice.Category}}
</td>
<td>
{{invoice.Product}}
</td>
<td>
<button type="button" class="btn btn-danger btn-sm" ng-click="remove($index)" readonly>Remove</button>
<button class="btn btn-info btn-sm" ng-click="edit($index)" data-toggle="modal" data-target="#popup2">
Edit
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr style="padding-left:20px; padding-right:20px;">
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts()" ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</td>
<td>
<select select2="" ng-model="Product" ng-disabled="!products"
class="input-sm form-control" ng-options="s as s.ProductName for s in products">
<option value="">-- Select Product --</option>
</select>
<td>
<button type="button" class="btn btn-success btn-sm" ng-click="add()">Add</button>
</td>
</tr>
</tfoot>
</table>
<div class="modal fade" id="popup2" role="dialog" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="Center">Item Details</h4>
</div>
<div class="modal-body" style="overflow-x:scroll">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default" ng-model="EditCustomer">
<table class="table table-condensed">
<thead>
<tr style="padding-left:10px; padding-right:10px;" class="active">
<th class="thick-line" style="padding-left:20px; padding-right:20px; padding-top:6px; padding-bottom:6px;">SNo</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line">Category</th>
<th style="padding-left:20px; padding-right:20px;" class="thick-line">Product</th>
</tr>
<tr>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="Category"
ng-change="GetProducts()" value="{{EditCustomer.Category}}" containercssclass="all"
ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</td>
<td>
<select class="input-sm form-control" ng-disabled="!products" select2="" name="ProductName" ng-model="Product"
value="{{EditCustomer.Product}}" containercssclass="all"
ng-options="c as c.ProductName for c in products">
<option value="">Select Product</option>
</select>
</td>
<td>
<button class="btn btn-info btn-sm" ng-click="Update()" value="update">
</button>
<button type="button" class="btn btn-danger btn-sm" ng-click="reset()" readonly><span class="glyphicon glyphicon-remove-sign"></span></button>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
