ANGULAR JS UI-GRID :How to Create Dynamically Row based DropDown

Question

I'm working on a project where I'm trying to add a dropdown in a UI Grid and the values of those dropdowns should come directly from the database. How can i implement this functionality? And Add Code and html

This is the code I have implemented

Controller JS

function
 fetchData ()
 {
  $http({
  url: "api/GetAllpattern",
  method: 'GET',
  dataType: 'json',
  headers: { "Content-Type": "application/json" }
 }).then(function (result) {
 if (result) {
 $scope.gridOptions.data = result.data;
            }});}

 $scope.gridOptions = {
        rowHeight: 38,
        enableFullRowSelection: true,
        multiSelect: true,
        columnDefs: [
            { name: 'Slno' },
            { name: 'Name', type: 'number' },
            {
                name: 'Pattern',
               // editableCellTemplate: 'uiSelect',
                cellFilter: 'mapGender',
                enableCellEdit: true,
                editType: 'dropdown',
                editableCellTemplate: 'ui-grid/dropdownEditor',
                editDropdownValueLabel: 'displayName',
                editDropdownValueLabel: 'Pattern', editDropdownOptionsArray: [
                    { id: 1, gender: 'male' },
                    { id: 2, gender: 'female' },
                ],
                 editDropdownValueLabel: 'type',
               },
   ]};
}

HTML markup

<div ui-grid="gridOptions"
     ui-grid-selection
     ui-grid-edit
     class="grid">

Answer 1

function loadcourseGrid() {
    var params = { 'SchoolCollege': $scope.usersList.SchoolCollege };
    $http({
        url: "api/GetAllcourse",
        method: 'GET',
        dataType: 'json',
        params: params,
        headers: { "Content-Type": "application/json" }
    }).then(function (result) {
        if (result) {
            var coursedata = result.data;
           
            for (i = 0; i < coursedata.length; i++) {
                if (coursedata[i].PatternSlno == 1) {
                    coursedata[i].PatternName = 'WEEKLY';
                } else if (coursedata[i].PatternSlno == 2) {
                    coursedata[i].PatternName = 'FORTNIGHT';
                }
                else if (coursedata[i].PatternSlno == 3) {
                    coursedata[i].PatternName = 'MONTHLY'
                }
                else {
                    coursedata[i].PatternName = 'Choose Pattern .. '
                    coursedata[i].PatternSlno = 0;
                }
            }
            $scope.gridOptionscourse.data = coursedata;
        }
    });
}