md-custom-cell not display md-button inside

[netanelwebzi]

Hey ,

That's my html code: http://pastebin.com/cRnZm7jY

on md-custom-cell element I trying to insert md-button for actions like: edit, delete. for some reason I cant see the buttons on the table.

Someone ?

[isaiastavares]

Sorry for my English, because I'm brazilian. So I decided:

Example:

<mdt-row ng-repeat="usuario in vm.usuarioList track by usuario.id">
                    <mdt-cell>{{usuario.nome}}</mdt-cell>
                    <mdt-cell>{{usuario.email}}</mdt-cell>
                    <mdt-cell>{{usuario.permissao}}</mdt-cell>
                    <mdt-cell html-content="true">
                        <div class="crop">
                            <md-button class="md-icon-button md-primary" aria-label="Editar"
                                       ng-click="vm.editar(usuario)">
                                <md-icon md-svg-icon="../images/icon/ic_mode_edit_black_18px.svg"></md-icon>
                            </md-button>
                        </div>
                    </mdt-cell>
                </mdt-row>

[iamisti]

@netanelwebzi did that solve your problem?

[netanelwebzi]

@iamisti no, because I need a table with ajax, search, pagination and buttons to work. your example for ajax search support: http://codepen.io/iamisti/pen/RRrjLk

I need example of ajax search support with buttons on some column, when I try to make mdt-custom-cell with md-buttons its not working and not displaying the md-buttons.

Please try to give me example of working ajax search support with md-buttons in the table.

[jdnwi]

I am having this issue. I receive an error in the JS console: https://docs.angularjs.org/error/ngTransclude/orphan?p0=%3Cbutton

Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found.

Is there a supported way to have the whole row be a clickable element(via data-ui-sref) which has the md-ink-ripple animation effects? Maybe this would avoid using the md-button

<mdt-table table-card="{title: 'Customer List'}" paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,50]}"
           mdt-row-paginator="paginatorCallback(page, pageSize)"
           mdt-row-paginator-error-message="Error happened during loading customers."
           mdt-trigger-request="getLoadResultsCallback(loadPageCallback)"
           mdt-row="{
            'table-row-id-key': 'id',
            'column-keys': [
                'id',
                'email',
                'date_created',
                'actions'
            ],
        }">
    <mdt-header-row>
        <mdt-column align-rule="left">ID</mdt-column>
        <mdt-column align-rule="right">Email</mdt-column>
        <mdt-column align-rule="right">Date Created</mdt-column>
        <mdt-column align-rule="right">Actions</mdt-column>
    </mdt-header-row>
    <mdt-custom-cell column-key="actions">
        <md-button class="md-primary md-raised">Edit</md-button>
    </mdt-custom-cell>
</mdt-table>

[mateosss]

There is not a proper way for using a md-button inside a mdt-custom-cell yet. But I found a workaround by using a custom directive.

// This directive creates a md-button with an md-icon inside.
.directive('mdtCustomCellButton', function () {
  return {
    template: '<md-button class="md-primary"><md-icon>edit</md-icon></md-button>',
  };
});

In your html you will use (replacing with your specific column-key):

<mdt-custom-cell column-key="<id>">
  <mdt-custom-cell-button></mdt-custom-cell-button>
</mdt-custom-cell>

[webcane]

@netanelwebzi You can try to use md-button inside mdt-custom-cell with md-svg-icon

<mdt-custom-cell column-key="protein">
    <md-button class="md-icon-button launch">
        <md-icon md-svg-icon="launch"></md-icon> 
    </md-button>
</mdt-custom-cell>

just do not forget about $mdIconProvider

  app.config(function($mdIconProvider) {
      $mdIconProvider
        .defaultIconSet('assets/mdi/mdi.svg')
    });

see md icons docu

[laurentperroteau]

Hello,

First of all, thank for this very useful project.

I have the same problem, I can't add any directive in <mdt-custom-cell> (Material directive or custom directive).

I fork your Codepen by adding <mdt-custom-cell> with inside a native button and Material button: the Material button generates this error.

I note it would be nice adding a Codepen with the option <mdt-custom-cell> in your demos.

[iamisti]

@laurentperroteau I'm not why this issue is happening, but here is a simple solution: http://codepen.io/iamisti/pen/PGxwAV

Basically wrapping the material button directive into your own directive.

wrapping the directive

.directive('mdtCustomCellButton', function () {
  return {
    template: '<md-button class="md-primary md-raised">Angular Material button</md-button>',
  };
});

and using it

<mdt-custom-cell column-key="iron">        
    <mdt-custom-cell-button ng-click="clientScope.hello()">Angular Material button</mdt-custom-cell-button>
    </mdt-custom-cell>
</mdt-header-row>

[laurentperroteau]

Thanks, it works

[cryptokoala4]

@iamisti is there a way to make the mdtCustomCellButton behave as per the row?

I'm trying to add buttons in a column and that button would enable/disable the row by posting a http request, then use css to disable the row. But i'm not able to pass anything to the button.

I was thinking of something along the lines of adding a toggleButton (like deleteSelectedRows) into the customCellButton directive, but i'm having issue accessing the ctrl inside the `link: function($scope, element, attrs, actrl) function.

any ideas?

[iamisti]

@jackywhlee If you can help me and provide a codepen example, I can try to investigate what the issue is and hopefully fixing it too.