CODEWITHSUNDEEP
angularjsangular-ui-grid
XioRcaL
XioRcaL

Reputation: 673

ui-grid button in cell

So I have been struggling with this for like 2 days and still no clue on what to do...

First of all I'm very new to angular and javascript in general so everything I wrote can (and may) be extremely wrong.

sample data:

{
    'title' : 'awesome title',
    'date' : '19-05-2015',
    'place' : 'nice place',
    'person' : 'Juliet Peterson',
    'status' : 'OK'
}

What I need is, in an existing ui-grid, add a column containing either if myData.person contains only one persone, this person if myData.person is empty the text 'No person' if myData.person contains multiple persons the text 'Choose from' wich on click will popup a list for selection.

My problem is that I am curently unable to get that working. the 2 first cases work fine but i'm struggling for the last one.

We are using bootstrap so my heart goes for either a dropdown list or a popover button

here is my current code:

html:

<div id="grid_post_id" ui-grid="gridPostOpts" ui-grid-edit class="grid"></div>

js:

$scope.choosePerson = function(a) {
if (a.length == 0) {
    return 'No person';
} else {
    var split = a.split(',');
    if (split.length > 1) {
        var res = '<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="';
        for (var i = 0; i < split.length; i++) {
            res = res + split[i];
        }
        res = res + '">Choose from</button>'
        return res;
    } else {
        return a;
    }
}
}
$scope.gridPosteOpts = {

columnDefs : [
    {
        name : 'Title',
        field : 'title',
        enableCellEdit : false
    },
[...]
    {
        name : 'Person',
        cellTemplate : '<div class="ui-grid-cell-contents">{{grid.appScope.choosePerson(row.entity.person)}}</div>',
        enableCellEdit : false
    }

this code is almost working as i got the rigth data in my cell but it is displayed instead of being interpreted as html (ie my cell contains the string '<button type="bu...')

Upvotes: 3

Views: 10640

Answers (3)

XioRcaL
XioRcaL

Reputation: 673

Finnaly managed to do it by myself using a mix of differents approaches found on SO!

I used @j2L4e template for the case "button needed" and just the text for the othercases; i choose between the two with an ng-if

here is the "final" code:

$scope.containsComma = function(a) {return a.contains(',')};
$scope.choosePersonBis = function(a) {
    if (a.length == 0) {
        return 'No person';
    } else {
        var split = a.split(',');
        if (split.length > 1) {
            var res = '';
            for (var i = 0; i < split.length; i++) {
                res = res + split[i];
            }
            return res;
        } else {
            return a;
        }
    }
;
$scope.gridPosteOpts = {
    columnDefs : [
        {
            name : 'Title',
            field : 'title',
            enableCellEdit : false
        },
    [...]
    {
        title : 'Person',
        cellTemplate : `
            <div ng-if="grid.appScope.containsComma(row.entity.person)" 
                 class="ui-grid-cell-contents">
              <button type="button" class="btn btn-default"
                      popover="{{grid.appScope.choosePersonBis(row.entity.person)}}"
                      popover-placement="right"
                      popover-trigger="focus">
                Choose person
              </button>
            </div>
            <div ng-if="grid.appScope.notContainsComma(row.entity.person)"
                 class="ui-grid-cell-contents">
              {{grid.appScope.choosePersonBis(row.entity.person)}}
            </div>`
    }
};

Upvotes: 2

j2L4e
j2L4e

Reputation: 7050

Use 

cellTemplate : `
    <div class="ui-grid-cell-contents">
       <button type="button" class="btn btn-default" data-container="body"
               data-toggle="popover" data-placement="right"
               data-content="{{grid.appScope.choosePerson(row.entity.person)}}">
         Choose from
       </button>
    </div>`

and have choosePerson() just return the data.

You can't inject elements into the DOM using angulars {{}}. It will always be text-only

Upvotes: 2

Red
Red

Reputation: 26

try replace this code 

<div class="ui-grid-cell-contents">{{grid.appScope.choosePerson(row.entity.person)}}</div>

with

<div class="ui-grid-cell-contents" ng-bind-html="grid.appScope.choosePerson(row.entity.person)"></div>

Upvotes: 0

Related Questions