Click here to Skip to main content
15,566,615 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to bind ng-grid in init function and also I want to show textbox for name field and bind dropdown list for department(from bb) and bind radiobuttonlist for gender(from db). In ng-click i want to update the grid. but in ng-init i can load only radiobuttonlist and dropdown. I cant bind ui.grid . But i can bind grid if i dont have dropdown and radiobutton.

What I have tried:

I have declared one ng-app and I have ng-init function in that app.
in ng-init function i have binded dropdown and radiobutton from database.
in ng-init i want to bing ui-grid also from database. But i cant do that.
JavaScript
var helloApp = angular.module('helloApp', []);
        helloApp.controller('employeesCtrl', function ($scope, $http) {
            $scope.deptList;
            $scope.GenderList;
            $scope.FirstCall = function () {              
                $http.post('WebForm2.aspx/GetList', { data: {} }).success(function (response) {
                    var data = (response.hasOwnProperty) ? response.d : response;
                    $scope.deptList = data;
                })

                $http.post('WebForm2.aspx/GetGender', { data: {} }).success(function (response) {
                    var data = (response.hasOwnProperty) ? response.d : response;
                    $scope.GenderList = data;
                })

                $scope.myData = [
                     { name: "Madhav Sai", age: 10, location: 'Nagpur' },
                     { name: "Suresh Dasari", age: 30, location: 'Chennai' },
                     { name: "Rohini Alavala", age: 29, location: 'Chennai' },
                     { name: "Praveen Kumar", age: 25, location: 'Bangalore' },
                     { name: "Sateesh Chandra", age: 27, location: 'Vizag' }
                ];
                $scope.grdusers = { data: 'myData' }

            }

            $scope.SubmitUser = function () {
                $scope.errMsgName = '';
                $scope.errMsgDept = '';
                $scope.errMsgGender = '';

                var validationSuccess = true;
                if ($scope.userfullName == "" || $scope.userfullName == undefined) {
                    $scope.errMsgName = 'Name Required';
                    validationSuccess = false;
                }
                else {
                }

                if ($scope.userSelect == "" || $scope.userSelect == undefined) {
                    $scope.errMsgDept = 'Please Select Department';
                    validationSuccess = false;
                }

                if ($scope.UserGender == "" || $scope.UserGender == undefined) {
                    $scope.errMsgGender = 'Please Select Gender';
                    validationSuccess = false;
                }

                if (validationSuccess) {

                    alert(true);
                }
            }

            $scope.Clear = function () {
                $scope.errMsgName = '';
                $scope.errMsgDept = '';
                $scope.errMsgGender = '';
                $scope.userfullName = null;
                $scope.userSelect = "";
                $scope.UserGender = false;

            }

        });


HTML
<div>
            <span>Name : </span>            
            <span style="color: red">{{errMsgName}}</span>
            <br>
            <br>
            <span>Department :</span>            
                --Select Dept--
                {{dept.deptName}}            
            <span style="color: red">{{errMsgDept}}</span>
            <br>
            <br>
            <span>Gender :</span> 
                {{G.GenderText}}
            <span style="color: red">{{errMsgGender}}</span>
            <br>
            <br> 
            <br>
            <br>
        </div>
        <div>
            <div class="myGrid"></div>
        </div>

if i put ui.grid like this nothing is working.
JavaScript
var helloApp = angular.module('helloApp', ['ui.grid']);


but I can able to bind grid in a separate page that doesn't have dropdown and radiobutton.
Posted
Updated 21-Feb-17 21:21pm
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900