Row Column Edit save on Database how it works?

[atodicebear]

Hey, ive tried to get it working that the Column Edit saves the new Data on my Database but it was not working. So checking the example and deleting everything I thought is not needed and then see what happens. But nothing has changed ? It saves the new Values still without the save functions? I even changed the e-name="name2" but it still gets saved? So how does it work? Here is the Example minified: http://jsfiddle.net/NfPcH/16199/ Has someone a working Example where he uses ColumnEdit to save Data on serverside? Thx for Help

[ckosloski]

In your fiddle, there is an issue with your definition of onaftersave, it should look like onaftersave="saveColumn('name')".

Your saveColumn function will fail if you do not set all the names to awesome because the mock function will return a 500 error.

It does appear that the onaftersave is not displaying the errors correctly.

[atodicebear]

@ckosloski My Problem is more the understanding how everything works together. Thats not an Issue that i had that was on Purpose to see how it works. for Example thats my saveColumn Function only added console.log:

    saveColumn(column) {
      console.log(column);
      var results = [];
      angular.forEach(column, function(value) {
        console.log(value);
        /*results.push(this.$http.patch('/api/dict_values/' + 28, {
          user_id: 266,
        }));*/
      });
      return this.$q.all(results);
    }

<span editable-text="v.value2" e-name="valueTranslate" e-form="valueForm">
          {{v.value2 || 'empty' }}
        </span>

Situation1: <form editable-form name="valueForm" onaftersave="$ctrl.saveColumn('valueTranslate')" oncancel="$ctrl.checkCancel()" ng-show="valueForm.$visible"> If i click save output is: First Console.log = valueTranslate For Each not doing. Same Case in for each changed this.Values to column: first console.log the same for each console.log output ist v a l and so till value translate is shown. So with Singlequote 'name' we are sending a String in ? Because if change onaftersave=" 'blahblah' " Output is blahblah? Situation 2:

Same without SingleQuote Undefined output allways Situation 3: Sending the Form: Output is the last Edited Cell. In all Situations he throws an Typeerror $http undefined in the angular.foreach ? But its defined and working because if i set it before the angular.forEach its working? ``` saveColumn(column) { console.log(column); var results = []; this.$http.patch('/api/dict_values/' + 28, { user_id: 266, }); angular.forEach(column, function(value) { console.log(value); }); return this.$q.all(results); } ``` In the Example I even changed the Name of the Input Fields in 'name2' but sending onaftersave='name' and everything still works? Thats why iam asking for a Example which shows the Function how to save the Data in the Databse, if the Example it allready does then I understand it fully wrong? My understanding is: 1. Name input Fields which are repeated e-name'name' 2. After editing and click save the Function onaftersave is called 3. We are giving it the input fields => onaftersave= " 'name' " (why singlequote? like this we send a String only, do we ?) 4. forEach repeat every Row in this Column and save with $http request in Database 5. Work with promises results and $q so it works So where is my understanding/coding Problem? Im grateful for Help :)

[ckosloski]

The example you are looking at for editable-column seems to be a good example for saving. When you are passing in a string into saveColumn, that string represents the name of the field on the object. The code is then looping through each user object and getting the value for the specified property that is passed in and sending that in the http request. The onaftersave is called after your model is updated, so the code is looping through your model and sending the updated values to the backend.

[atodicebear]

Ok ok got it it has to be: onaftersave="$ctrl.saveColumn('valueTranlate')"

  saveColumn(column) {
      console.log(column);
      var results = [];
      angular.forEach(this.langV, function(value) {
        console.log(value._id);
          results.push(this.$http.patch('/api/dict_values/' + value._id, {
            user_id: 266,
          }));
      });
      return this.$q.all(results);
    }

It now Loops through every Object fine. Only one Problem it says the $http request is undefined ? Like mentioned before if I put it before the forEach its working. So how can I Inject $http in the forEach?

For Future Coding is there something Implemented as $touched/$dirty or sometihg to only updated the ones which are were Edited?

Btw if you are on SO YOu can post your Answer there and I will Accept it :+1: Points for ya ;) http://stackoverflow.com/questions/38302877/angular-ui-grid-rowedit-not-working

[ckosloski]

Why are you doing this.$http? Shouldn't it just be `$http.patch'?

There isn't any $touched/$dirty support that I know of.

I looked at your SO request, it looks different than what is posted here. Not sure what you want me to comment on there.

[atodicebear]

Im using Angularjs 1.5.x Components. Will this ($dirty and so on) come in near Future? So at the moment we need to do somehow a Workaround by ourself for only saving Edited ones?

[ckosloski]

Yes, you will have to figure out something to determine what has been edited.

Feel free to submit a pull request to add this functionality :)

[atodicebear]

Im fine at the moment like it is. If I have free time around I will look in this ;)

[atodicebear]

@ckosloski Now the Time has come which I need this or Iam going to Hell :D. I need kinda this 2 Functions which are normally there be default in Angularjs

1. ng-change
2. touched/dirty

You mentionend allready that there are not implemented. Could you show me/explain how I can change your Code so that I can implment this Functions? Never changed a Code of a Package I used so no clue how to start.

So to add to your standards e-name and so on something like "e-change" and functionality to check valied and more https://docs.angularjs.org/api/ng/directive/ngModel

Or are there workarounds you or someone else used to get this Funtionalitys?

Thx for Help

Edit1: Iam sorry, checked the Pull Requests to see if something on the way found this.

350

So there is allready "e-ng-change". Could never find it and in the DEmo its only mentioned once only at the Date Sector. Would be nice in the Demo kinda mentioned under Techniques or somewhere that everything is in normal Textarea is implemented here as well. For some kinda dumbheads like me for less Problems :D

Only thing left is "save only touched/edited" Textareas. Having at the moment Kinda thousands of them and it is Iterating everyone and saving values.

[ckosloski]

The documentation does state that any e-* attributes that are defined will be transferred to the element.

You could inspect the value with ng-change and only save the ones that are changed.