Angular ui-grid - DropDown Selection shows Id

{
    field: "Fruit",
    title: "Fruit",
    width: 115,
    editor: renderDropDown,
    template: "#=FruitName#"
}

$('<input required  name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
    dataTextField: "FruitName",
    dataValueField: "FruitID",
    dataSource: dataSource,
    change: function (e) {
        var dataItem = e.sender.dataItem();
        options.model.set("FruitName", dataItem.FruitName);
    }
});

var fruitNames = ["", "Apple", "Orange", "Peaches", "Pears"];
function getFruitName(value) {
    return fruitNames[value];
}

template: "#= getFruitName(FruitID) #"

<div ui-grid="gridOptions" ui-grid-selection class="grid ui-grid-selectable"></div>

.ui-grid-selectable .ui-grid-disable-selection {
     -webkit-touch-callout: default;
     -webkit-user-select: text;
     -khtml-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
     cursor:auto;
 }

<select data-placeholder="All Categories" class="category" value="category.categoryName" [(ngModel)]="selected" (change)="buildServices($event)">
  <option selected="selected" style="display:none">Select Category</option>
  <option class="select" *ngFor="let category of categories" [value]="category.categoryId">
    {{category.categoryName}}
  </option>
</select>
<select data-placeholder="All Cities" class="services location" value="category.categoryName">
  <option selected="selected" style="display:none">select type of services</option>
  <option *ngFor="let service of services; let i =
      index" value="service.serviceId">{{service.serviceName}}
  </option>
</select>

  public buildServices() {
    this.services = [];
    this.categories.forEach((category) => {
      if (category.categoryId == this.selected) {
        this.services = category.categoryServicemodel;
      }  
    }); 
  }