Populate dropdown values from database using javascript service

Question

Hello I am new to AngularJS and I am trying to populate values for my column dropdown in a ui grid. Currently it just displays undefined for the whole list.

Here is my column definition:

{ field: "FullName", displayName: "Employee", editableCellTemplate: 'ui-grid/dropdownEditor', validators: { required: true }, minWidth: 150, width: "25%", cellFilter: 'mapEmployee', editDropdownIdLabel: 'Value', editDropdownValueLabel: 'Text', editDropdownOptionsArray: dataService.getEmployees() },

Here is my service function:

function getEmployees() {
  return $.ajax({
    url: '/EmployeeSkills/GetEmployees',
    type: 'POST',
    dataType: "json",
    success: getEmployeesComplete,
    error: getEmployeesFailed
  });

  function getEmployeesComplete(r) {
    return r;
  }

  function getEmployeesFailed(e) {
    $log.warn("Failed to get employees. " + e.data);
    return $q.reject(e);
  }
}

Here is my Controller method:

[HttpPost]
public JsonResult GetEmployees()
{
    try
    {
        List<string> tecPosition = new List<string>() { "SUB", "" };
        IEnumerable<SelectListItem> Employees = db.Employees.Where(x => tecPosition.Contains(x.JobPosition) && x.Active).Select(c => new SelectListItem
        {
            Value = c.EmployeeNumber.ToString(),
            Text = c.FullName
        });
        return Json(new SelectList(Employees), JsonRequestBehavior.AllowGet);
    }
    catch (Exception e)
    {
        return null;
    }
}

Here is my ui grid:

<div class="row">
<div class="grid" ui-grid="gridOptions"
ui-grid-pagination
ui-grid-selection
ui-grid-edit
ui-grid-row-edit
ui-grid-validate
ui-grid-exporter
ui-grid-cellNav
style="height: 500px;">
</div>
</div>

Any help would be greatly appreciated. It does make it to my Controller method and appears to be working but in the display it just list undefined over and over. Thanks

So what is your angular code? You provide method for getting data from storage. Share your view. — user3272018, May 09 '16 at 19:24
I had to add a cellFilter of griddropdown:editDropdownOptionsArray:editDropdownIdLabel:editDropdownValueLabel:row.entity.employees.fullname. And write a filter to map the value to the id when the cell loses focus. — jason316, May 12 '16 at 19:06

score 0 · Accepted Answer · edited May 13 '16 at 05:27

I had to add a cellFilter of griddropdown:editDropdownOptionsArray:editDropdownIdLabel:editDropdownValueLabel‌:row.entity.employees.fullname. And write a filter to map the value to the id when the cell loses focus.

.filter('griddropdown', function () {
    return function (input, map, idField, valueField, initial) {
        if (typeof map !== "undefined") {
            for (var i = 0; i < map.length; i++) {
                if (map[i][idField] == input) {
                    return map[i][valueField];
                }
            }
        } else if (initial) {
            return initial;
        }
    return input;
};

Populate dropdown values from database using javascript service

1 Answers1