Enable Disable controls in Row based on DropDownList selection using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on May 17, 2019 01:53 AM
Forum: ASP.Net MVC
Answer: 1
Views: 3963
Sample Code: Download

Hi,

Based upon below url

I have updated my code like below

I am going to do edit functionality based upon RId

currentylt relevant values are displaying properly

issue is that as per as my requirement i need to disable some fields based upon dropdown selection

currently issue is that fields are not disabling based upon dropdown selection

If i can select Dropdown need to disable Date

in the same way need to disable FromTable,DispalyCName and ValueCName and date if i can select Textbox

in the same way need to disable FromTable,DispalyCName and ValueCName if i can select Date

            $scope.Edit = function (RId) {
                debugger;
                $scope.form = true;
                var id = RId;
                //var id = $scope.employees[index].OrderId;
                $.post("/report1/Edit/", { orderID: id }, function (r) {
                    debugger;
                    $scope.RId = r.Orders.RId;
                    var id1 = $scope.RId;
                    $scope.Details = [];
                    for (var i = 0; i < r.Items.length; i++) {
                        var customer = {};
                        var itemId = r.Items[i].RSId;
                        customer.RId =r.Orders.RId;
                        customer.RSId = r.Items[i].RSId;
                        customer.CName = r.Items[i].CName;
                        customer.CType = r.Items[i].CType;
                        customer.FromTable = r.Items[i].FromTable;
                        customer.DisplayCName = r.Items[i].DisplayCName;
                        customer.ValueCName = r.Items[i].ValueCName;
                       
                        customer.Date = r.Items[i].Date;
                        $scope.Details.push(customer);
                    }
                    $scope.$apply();
                });
            }

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on May 17, 2019 07:23 AM
Report

Hi mahesh213,

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

Controller

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

    public JsonResult GetReports()
    {
        TestEntities db = new TestEntities();
        return Json(db.Report1.ToList(), JsonRequestBehavior.AllowGet);
    }
}

View

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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">
        var app = angular.module("MyApp", []);
        app.controller("MyController", ['$scope', '$http', 'MyService', function ($scope, $http, MyService) {
            var RId;
            var getReports = MyService.GetReports();
            getReports.then(function (response) {
                $scope.Reports = response.data;
            });

            $scope.GetPlaceHolder = function (query, rId) {
                RId = rId;
                var details = [];
                for (var i = 0; i < query.match("{(.*)}")[0].split('{').length; i++) {
                    if (query.match("{(.*)}")[0].split('{')[i] != '') {
                        var detail = {};
                        detail.Cname = query.match("{(.*)}")[0].split('{')[i].split('}')[0].trim();
                        details.push(detail);
                    }
                }
                $scope.Details = details;
            }

            $scope.Edit = function (query, rId) {
                RId = rId;
                var details = [];
                for (var i = 0; i < query.match("{(.*)}")[0].split('{').length; i++) {
                    if (query.match("{(.*)}")[0].split('{')[i] != '') {
                        var detail = {};
                        detail.Cname = query.match("{(.*)}")[0].split('{')[i].split('}')[0].trim();
                        details.push(detail);
                    }
                }
                $scope.Details = details;
            }

            $scope.TypeChange = function (cType, cName) {
                for (var i = 0; i < $scope.Details.length; i++) {
                    if ($scope.Details[i].Cname.toLowerCase() == cName.toLowerCase()) {
                        if (cType.toLowerCase() == "dropdown") {
                            $scope.Details[i]["isDisabledDate"] = true;
                            $scope.Details[i]["isDisabledFromTable"] = false;
                            $scope.Details[i]["isDisabledDisplayCName"] = false;
                            $scope.Details[i]["isDisabledValueCName"] = false;
                        } else if (cType.toLowerCase() == "datepicker") {
                            $scope.Details[i]["isDisabledFromTable"] = true;
                            $scope.Details[i]["isDisabledDisplayCName"] = true;
                            $scope.Details[i]["isDisabledValueCName"] = true;
                            $scope.Details[i]["isDisabledDate"] = false;
                        } else if (cType.toLowerCase() == "textbox") {
                            $scope.Details[i]["isDisabledFromTable"] = true;
                            $scope.Details[i]["isDisabledDisplayCName"] = true;
                            $scope.Details[i]["isDisabledValueCName"] = true;
                            $scope.Details[i]["isDisabledDate"] = true;
                        } else {
                            $scope.Details[i]["isDisabledFromTable"] = true;
                            $scope.Details[i]["isDisabledDisplayCName"] = true;
                            $scope.Details[i]["isDisabledValueCName"] = true;
                            $scope.Details[i]["isDisabledDate"] = true;
                        }
                    }
                }
            }            
        } ]);
        app.service("MyService", function ($http) {
            this.GetReports = function (user) {
                return $http.get("/Home/GetReports");
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive table-bordered">
            <tr>
                <th>RId</th>
                <th>RNo</th>
                <th>RName</th>
                <th>RQuery</th>
                <th>Actions</th>
            </tr>
            <tbody ng-repeat="r in Reports">
                <tr>
                    <td>{{r.RId}}</td>
                    <td>{{r.RNo}}</td>
                    <td>{{r.RName}}</td>
                    <td>{{r.RQuery}}</td>
                    <td>
                        <button class="btn btn-info btn-sm" ng-click="GetPlaceHolder(r.RQuery,r.RId)">Settings</button>
                        <button type="button" class="btn btn-info btn-sm" ng-click="Edit(r.RQuery,r.RId)" readonly>Edit</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr />
        <table id="tblOrders" class="table table-responsive table-bordered">
            <tr>
                <th>Cname</th>
                <th>Ctype</th>
                <th>From Table</th>
                <th>DisplayCName</th>
                <th>ValueCName</th>
                <th>Date</th>
            </tr>
            <tbody ng-repeat="detail in Details">
                <tr>
                    <td>{{detail.Cname}}</td>
                    <td>
                        <select id="ddlCType" ng-model="CType" class="form-control" ng-change="TypeChange(CType,detail.Cname)">
                            <option value="">Select Value</option>
                            <option value="Dropdown">Dropdown</option>
                            <option value="Datepicker">DatePicker</option>
                            <option value="Textbox">Textbox</option>
                        </select>
                    </td>
                    <td><input type="text" class="form-control" ng-model="FromTable" ng-disabled="detail.isDisabledFromTable" /></td>
                    <td><input type="text" class="form-control" ng-model="DispalyCName" ng-disabled="detail.isDisabledDisplayCName" /></td>
                    <td><input type="text" class="form-control" ng-model="ValueCName" ng-disabled="detail.isDisabledValueCName" /></td>
                    <td>
                        <select id="ddlDate" ng-model="Date" class="form-control" ng-disabled="detail.isDisabledDate">
                            <option value="">Select</option>
                            <option value="Today">Today</option>
                            <option value="Lastday">Last Day</option>
                            <option value="Lastmonth">Last Month</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <button class="btn btn-success btn-sm">
            <span class="glyphicon glyphicon-ok"></span>Save</button>
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Enable Disable controls in Row based on DropDownList selection using AngularJS in ASP.Net MVC

Save (Insert) Table Rows in database using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us