[Solved] DropDownList change reflects in other row in AngularJS

Last Reply 5 months ago By dharmendr

Posted 5 months ago

Hi,

I have 2 fileds Category and product

currently issue in my code is that if i have changed same category value on one row(ex row 3) it was effecting same category value on other row(ex row5) rows on same category id

Ex:If i have changed category value then it was effecting other row value aslo

could you please help me

    


@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ CName: "Item1" }, { CName: "Item2"}];
            GetCategory();
            function GetCategory() {
                $scope.categories = [];
                $http({
                    method: 'Get',
                    url: '/kendogrid/GetCategories/'
                }).success(function (data, status, headers, config) {
                    $scope.categories = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.GetProducts = function (Category, index) {
                if (Category != null) {
                    $http({
                        method: 'Get',
                        url: '/kendogrid/GetProducts/',
                        params: { CategoryID: Category }
                    }).success(function (data, status, headers, config) {
                        for (var i = 0; i < $scope.Details.length; i++) {
                            if (data.length > 0) {
                                if ($scope.Details[i].Category == data[0].CategoryID) {
                                    $scope.Details[i].products = data;
                                    break;
                                }
                            } else {
                                $scope.Details[i].products = null;
                            }
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.message = 'Unexpected Error';
                    });
                } else {
                    $scope.Details[index].products = '';
                }
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Cname</th>
            <th>Category</th>
            <th>Product</th>
        </tr>
        <tbody dir-paginate="detail in Details|orderBy:sortKey:reverse|filter:search|itemsPerPage:1" @*ng-repeat="detail in Details"*@>
            <tr>
                <td>{{detail.CName}}</td>
                <td>
                    <select class="input-sm form-control" select2="" name="CategortName" ng-model="detail.Category"
                            containercssclass="all" ng-change="GetProducts(detail,$index)" 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="!detail.products" class="input-sm form-control"
                            ng-options="s as s.ProductName for s in detail.products">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls max-size="10"
                             direction-links="true"
                             boundary-links="true">
    </dir-pagination-controls>
</body>
</html>

[Solved] Disable DropDownList not working on paging in AngularJS

 

You are viewing reply posted by: dharmendr 5 months ago.
Posted 5 months ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult getAll()
    {
        List<Employee> employeeList = GetAll();
        var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);

        return JsonResult;
    }

    public ActionResult GetCategories()
    {
        List<Category> categories = Categories();
        return Json(categories, JsonRequestBehavior.AllowGet);
    }

    public ActionResult GetProducts(int? CategoryID)
    {
        List<Product> products = Products();
        products = products.Where(x => x.CategoryID == CategoryID).ToList();
        return Json(products, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult getTimesheetByNo(int id)
    {
        List<Employee> reportList = null;
        if (id > 0)
        {
            reportList = GetAll().Where(x => x.Id == id).ToList();
        }
        else
        {
            reportList = GetAll();
        }
        List<Employee> employeesList = new List<Employee>();
        foreach (Employee employee in reportList)
        {
            employee.Categories = Categories();
            employee.Products = Products().Where(x => x.CategoryID == employee.CategoryID).ToList();
            employeesList.Add(employee);
        }

        EmplpoyeeDetail details = new EmplpoyeeDetail();
        details.Employees = employeesList;
        var JsonResult = Json(details, JsonRequestBehavior.AllowGet);
        return JsonResult;
    }

    private static List<Employee> GetAll()
    {
        List<Employee> employeeList = new List<Employee>();
        employeeList.Add(new Employee { Id = 1, Name = "mahesh", CategoryID = 1, ProductID = 1 });
        employeeList.Add(new Employee { Id = 1, Name = "mahesh 1", CategoryID = 1, ProductID = 1 });
        employeeList.Add(new Employee { Id = 2, Name = "rahul", CategoryID = 2, ProductID = 1 });
        return employeeList;
    }

    private static List<Category> Categories()
    {
        List<Category> categories = new List<Category>();
        categories.Add(new Category { CategoryID = 1, CategortName = "Category 1", IsEmployee = true });
        categories.Add(new Category { CategoryID = 2, CategortName = "Category 2", IsEmployee = false });
        categories.Add(new Category { CategoryID = 3, CategortName = "Category 3", IsEmployee = true });
        return categories;
    }

    private static List<Product> Products()
    {
        List<Product> products = new List<Product>();
        products.Add(new Product { ProductID = 1, CategoryID = 1, ProductName = "Product 1" });
        products.Add(new Product { ProductID = 2, CategoryID = 1, ProductName = "Product 2" });
        products.Add(new Product { ProductID = 3, CategoryID = 3, ProductName = "Product 3" });
        return products;
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int CategoryID { get; set; }
        public int ProductID { get; set; }
        public List<Category> Categories { get; set; }
        public List<Product> Products { get; set; }
    }

    public class Category
    {
        public int CategoryID { get; set; }
        public string CategortName { get; set; }
        public bool IsEmployee { get; set; }
    }

    public class Product
    {
        public int ProductID { get; set; }
        public int CategoryID { get; set; }
        public string ProductName { get; set; }
    }

    public class EmplpoyeeDetail
    {
        public List<Employee> Employees { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ CName: "Item1" }, { CName: "Item2"}];
            GetCategory();
            GetEmployees();
            function GetCategory() {
                $scope.categories = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetCategories/'
                }).success(function (data, status, headers, config) {
                    $scope.categories = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }
            function GetEmployees() {
                $scope.employees = [];
                $http({
                    method: 'Get',
                    url: '/Home/getAll'
                }).then(function (response) {
                    $scope.employees = response.data;
                }), function (error) {
                    $scope.message = 'Unexpected Error';
                };
            }
            $scope.GetProducts = function (index, detail) {
                if (detail.Category != null) {
                    $http({
                        method: 'Get',
                        url: '/Home/GetProducts/',
                        params: { CategoryID: detail.Category }
                    }).success(function (data, status, headers, config) {
                        if (data.length > 0) {
                            for (var i = 0; i < $scope.Details.length; i++) {
                                if ($scope.Details[i].Category == data[0].CategoryID) {
                                    $scope.Details[i].products = data;
                                }
                            }
                        } else {
                            for (var i = 0; i < $scope.Details.length; i++) {
                                if ($scope.Details[i].CName == detail.CName
                                && $scope.Details[i].Poduct == detail.Poduct) {
                                    $scope.Details[i].products = null;
                                    break;
                                }
                            }
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.message = 'Unexpected Error';
                    });
                } else {
                    $scope.Details[index].products = '';
                }
            }
            $scope.edit = function (employee) {
                $.post("/Home/getTimesheetByNo/", { id: employee.Id }, function (r) {
                    $scope.Details = [];
                    for (var i = 0; i < r.Employees.length; i++) {
                        var time = {};
                        time.CName = r.Employees[i].Name;
                        time.Category = r.Employees[i].CategoryID;
                        time.Categores = r.Employees[i].Categories;
                        time.Product = r.Employees[i].ProductID;
                        time.products = r.Employees[i].Products.length > 0 ? r.Employees[i].Products : null;
                        $scope.Details.push(time);
                    }
                    $scope.$apply();
                });
            }
        }); 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Product</th>
        </tr>
        <tbody dir-paginate="detail in Details|orderBy:sortKey:reverse|filter:search|itemsPerPage:1">
            <tr>
                <td>{{detail.CName}}</td>
                <td>
                    <select class="input-sm form-control" name="CategortName" ng-model="detail.Category"
                        ng-change="GetProducts($index,detail)" ng-options="c.CategoryID as c.CategortName for c in categories">
                        <option value="">Select Category</option>
                    </select>
                </td>
                <td>
                    <select class="input-sm form-control" ng-model="detail.Product" ng-disabled="!detail.products"
                        ng-options="s.ProductID as s.ProductName for s in detail.products">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls direction-links="true" boundary-links="true">
    </dir-pagination-controls>
    <hr />
    <div id="dvContainer">
        <div>
            <div class="table-responsive ">
                <table id="dvData" class="table table-bordered ">
                    <tr class="success">
                        <th>OrderName</th>
                        <th>CId</th>
                        <th>Actions</th>
                    </tr>
                    <tr ng-repeat="employee in employees">
                        <td><input type="hidden" ng-model="employee.Id " />{{employee.CategoryID}}</td>
                        <td>{{employee.ProductID}}</td>
                        <td><a ng-click="edit(employee)" href="">Edit</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot