Editing Dialogs about md-data-table

[lily93]

@daniel-nagy
thanks for the reply!
everything is working now, the Codepen example was just what i was looking for :)

[cleydsonjr]

@daniel-nagy I was thinking about the best markup approach and came up with this solution:

...
 <td md-edit-dialog ng-model="dessert.comment">Add a comment</td>
...

and for the large option:

...
 <td md-edit-dialog="large" md-dialog-title="Add a title" ng-model="dessert.comment">Add a comment</td>
...

Whats your opinion?

[daniel-nagy]

A few things.

• For large dialogs, we will need attributes for the cancel and save events. Something that will allow the developer to execute their own functions when the buttons are clicked.
• For large dialogs, we will need attributes that allow the developer to change the text for the cancel and save buttons for non-English applications.
• We might want to consider making two separate directives, md-edit-dialog-small and md-edit-dialog-large. This way we can separate the logic and templates for small and large edit dialogs.

[cleydsonjr]

I agree with you. But we should have default save/cancel events. Only set the value to the model when save and do nothing when cancel.

Anyway.. I'm gonna focus just on md-edit-dialog-small for a first submission.

[daniel-nagy]

Okay. Another thing to think about is attributes for input validation. Things like max-length and required.

[jimmywarting]

There is alot of things you would like to be able to control in the dialog, such as the text translation, type of input, validation, step, title, placeholder, error message, ng-model-options.

Maybe we should do what $mdDialog are able to do: use a templateUrl or a template string. then md-edit-dialog is only responsible for showing a nice dialog at the correct position and a developer can control the dialog as much as he wants. then resolve or reject the dialog

We could have predefined dialog such as small and large template, can be compared to $mdDialog alert and comfirm

Maybe a service is the the way to go? pass in $event and you got the target element where you want to show it. then you dont have do bind so much logic to each row/colum

I'm just speculating

[daniel-nagy]

@jimmywarting that might be a good solution.

[jimmywarting]

one thing i also was thinking of was that the small and large dialog can be smart enough to figure out what kind of input type should be used.

if thead>tr th is numeric or the typeof value are number show a input type=number or if the typeof value are boolean show a checkbox and so on

[HBO2]

Hi,

I am searching for the option to have an edit action on each row. I mean by having an edit icon at the end of the row with action to edit the cell's in a row. So, not by selecting the row first and then have an action to edit the the cell's of the row, but directly a dialog after clicking on the edit pencil.
In case no i could ask some developers to help you, but it would be graet if you can guide them while developing this function.

Let me know what you think.

Greetings and my compliments for this very good data table. In my opnion one of the best in the sense of following the google guideleines.

[lily93]

Hi,
(sry for bad engilsh in advance)
i'm quite new to angular and this module in particular..
i just wanted to know some things to get an edit dialog (does not matter if small or large) work, i could neither find any examples in the api documentation nor any clear explanation via google regarding the html specs.... soo:

• how is the tag specified? (md-edit-dialog/ class="?" ... )
• how does the binding to a function via click on the row work? (ng-click)
• is it working within ng-repeat?

i would really appreciate your help :)

[daniel-nagy]

@lily93

how is the tag specified? (md-edit-dialog/ class="?" ... )

Edit dialogs are an Angular service not a directive. You do not use HTML tags to create an edit dialog, you must use Javascript. There is an example, along with a description of each option, included in the documentation for edit dialogs. There is also a live example in the Codepen.

how does the binding to a function via click on the row work? (ng-click)

At the very bottom of the Edit Dialogs section you will see a snippet of HTML that looks like

<td md-cell ng-click="editComment($event, dessert)" ng-class="{'md-placeholder': !dessert.comment}">
  {{dessert.comment || 'Add a comment'}}
</td>

ng-click is a wrapper around HTML's onclick attribute that essentially allows Angular to be notified of the click event. In order to bind to a function it must be available in the current scope. For edit dialogs the click handler must be placed on a table cell.

is it working within ng-repeat?

Yes, ng-repeat should be okay.

[offwork]

TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function...

[offwork]

TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function, TypeError: $mdEditDialog.small is not a function.........................................

[daniel-nagy]

@offwork did you inject the $mdEditDialog service into your controller?

[offwork]

It was already there, but it fixed when adding $timeout....

[nani3105]

For the large dialog , is passing in the message array resolved for ng messages, currently this doesn't work. I do not want to roll a custom dialog just for this case