CODEWITHSUNDEEP
htmlangularjsdrop-down-menuangular-ui-grid
LarsHoffbeck
LarsHoffbeck

Reputation: 107

Custom Dropdown within Angular UI-Grid

I'm playing around with the new Angular UI-Grid, and am having problems injecting a custom dropdown into a grid cell. The built-in dropdown functionality doesn't work for my project since you can only go so far to style a SELECT tag. I'd like to use this swanky multi-select dropdown, but it looks like the ui-grid's magic is either stopping my open dropdown event from propagating or my dropdown isn't able to be initialized on the fly.

Here's my example code:

HTML:

<div ng-controller="MainCtrl">
    <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>
<script src="app.js"></script>`

app.js:

var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'angularjs-dropdown-multiselect']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  var grid;

    $scope.msData = [ {id: 1, label: "David"}, {id: 2, label: "John"}, {id: 3, label: "Danny"}];
    $scope.msSettings = {enableSearch: true, smartButtonMaxItems: 3, smartButtonTextConverter: function(itemText, originalItem) {return originalItem.id;}};

  $scope.gridOptions = {
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name'}
      ,{ name: 'friends', displayName: 'Friends', editableCellTemplate: 'temp.html', width: '250', editDropdownValueLabel: 'friends'}
    ],
    onRegisterApi: function( gridApi ) {
      grid = gridApi.grid;
    }
  };

  $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });

}]);

temp.html (edit cell template):

<div ng-dropdown-multiselect="" options="msData" selected-model="MODEL_COL_FIELD" extra-settings="msSettings" checkboxes="true"></div>

When you double click the Friends cell, the select dropdown button appears, but clicking it doesn't expand the dropdown.

Here is a plunker

I've played around with a couple of other ways of doing a dropdown, but all have the same issue where the base element (button, link, etc) appears but the dropdown doesn't expand.

Does anyone have any suggestions for how to stop the ui-grid from intercepting my click event (if that actually is what is causing the problem)? Or have any of you fine people implemented a similar custom dropdown in ui-grid before?

Upvotes: 1

Views: 17164

Answers (2)

c0bra
c0bra

Reputation: 3012

Generally speaking, the common problem with using html-based widgets in UI-Grid is that individual cells as well as the grid itself are set up to prevent their contents from overflowing. This lets everything stay sized nice and normal but gets in the way when you want to show extra content like a custom dropdown.

You can get around this with UI-Select because it has an append-to-body attribute that will absolutely position the element in the right place, but it will be appended to the document body, which gets rid of the overflow issue.

I have a write-up on the exact method for doing this here: http://brianhann.com/ui-grid-and-dropdowns/ . There may be ways to do the same thing with other widgets but it would probably require some extra coding or perhaps even forking them.

Upvotes: 3

PaulL
PaulL

Reputation: 6650

The most likely problem is that you need to create a directive, not just a template. Refer the discussion here: http://ui-grid.info/docs/#/tutorial/201_editable about custom editors.

To get an idea of what that might look like, take a look at the edit.js file, and the bottom directive: https://github.com/angular-ui/ng-grid/blob/master/src/features/edit/js/gridEdit.js

That last directive, for the file chooser, I added recently. You'd need something like that (or perhaps more like the directive for uiGridEditDropdown, which I added a while back a little further up the file).

Upvotes: 2

Related Questions