When on field is changed can it update another as well.

mikedmason

Hi,
I am wondering if the editor can be used to update a field that is not clicked into and changed. For example I have 2 columns one is rolls and the other is weight. I want to have either field be editable and when you update one it updates the other as well. I have a field that is the average weight of of a single roll.

I am able to do this: Which creates a null field not linked to a database field and it updates when the other field is changed. Is it possible to have the fields both be editable and when one changes it updates the other using the multiplier(average weight of single roll) but have it update the real table field not just the null field.

{ data: null, render: function (data,type,row){
  return (data.rolls*data.avgw).toFixed(0)  }},

data.rolls = number of rolls in the current record
data.weight = weight of number rolls in the current record
data.avgw = average weight of a single roll

http://debug.datatables.net/acorem

Regards,
Mike

allan

Hi Mike,

Yes, perfectly possible. I think it will need a two stage approach - in DataTables you would need to check if the property is null or not - if it is, then use a calculation based on the other property, otherwise, just use it as is.

In Editor you would need to bind an event listener to each input such that when it is changed it will set the other field to be an empty string (use a setFormatter to make that null in the database if you are using the Editor pre-built libraries). You could also use field().message() to tell the user that the other field is being calculated.

The other option is to use field().val() to set the other field to the calculated value, so you have both values stored in the database and don't need to handle null data at all.

Allan

mikedmason

Hi Allan,
I like the approach of the field().val().

here is what I am trying now. (gives me a NaN value until i click into it for the weight and rolls field) Is there an example where the field().val() is used?

                columns: [
                        { data: "paper", editField: "paper.id" },
                        { data: null, render: function (data,type,row) {
                                return (data.width / 16).toFixed(2);
                            }
                        },
                        { data: "prjconsum", editField: "a.id" },
                        { data: "stock", editField: "b.id" },
                        { data: "ordered", editField: "c.id" },
                        { data: "intran", editField: "d.id" },
                        { data: "safety", editField: "e.id" },
                        { data: "recommend", editField: "f.id" },
                        { data: "weight", render: function (data, type, row) {
                                return (data.rolls*data.avgw).toFixed(1);}},

                        { data: "rolls", render: function (data, type, row) {
                                return (data.weight/data.avgw).toFixed(0);}}
                ],

I have never used the field().val before not sure of the proper syntax.

allan

field().val() is just a function that you use to set the value for a given field - e.g.:

editor.field( 'myField' ).val( myValue );

So you might use something like:

editor.field( 'field1' ).input().on( 'keyup', function () {
  editor.field( 'field2' ).val( this.value * const );
} );

where const is whatever your conversion is.

Allan

mikedmason

Thanks Allan,
I will give it a go.

mikedmason

Hi Allan,
It work perfectly for the update to the database and even the footer totals work. But it displays [object Object] in the table.

{ data: "weight", render: function(data,type,row,val){
                        return editor.field('rolls').input().on( 'keyup',function(){
                        editor.field('weight').val( this.value * row.avgw );})}},
{ data: "rolls", render: function(data,type,row,val){
                     return editor.field('weight').input().on( 'keyup',function(){
                     editor.field('rolls').val( this.value / row.avgw );})}}

allan

You probably don't want to return an editor object to the DataTable. Add that code immediately after the Editor initialisation. You shouldn't need a render method in DataTables if you have both values in the data source object.

Allan

mikedmason

Hi Allan,
Thank you i understand why I was getting the [object Object] now. I am still having an issue understanding how to get it to work properly. I do not understand where you mean when you say the Editor initialization. I have tried the examples below.

This one returns the database values but a change does not update the other field. It only updates its own.

{ data: "weight", function(){ editor.field('rolls').input().on( 'keyup',function(){ editor.field('weight').val( this.value * row.avgw );})}},
{ data: "rolls", function(){ editor.field('weight').input().on( 'keyup',function(){ editor.field('rolls').val( this.value / row.avgw );})}} 

I have both values in the database. So I do not believe I need the render: if i leave the render in i get an error

Requested unknown parameter 'weight' for row 0.

{ data: "weight", render: function(data,type,row,val){ editor.field('rolls').input().on( 'keyup',function(){ editor.field('weight').val( this.value * row.avgw );})}},
{ data: "rolls", render: function(data,type,row,val){ editor.field('weight').input().on( 'keyup',function(){ editor.field('rolls').val( this.value / row.avgw );})}}

but it does update the database and the fields properly but it does not show the update value in the table.

Thank you for your assistance. Sorry for my lack of knowledge. The more i read the better I will get. I promise.

allan

I do not understand where you mean when you say the Editor initialization.

Consider the Javascript code shown below the table in this example. I am suggesting that the ode should go into line 32 (not all on line 32 obviously, but insert it there ;-) ). Your Editor and DataTables initialisation will look different, but you are trying to use the Editor API here, not the initialisation options.

As another example showing code using the Editor API take a look at this example. Lines 32 to 43. They use the Editor API to perform the actions of that example. Again, you don't want to just copy and paste that code, but look and see how that code is structured.

Allan

mikedmason

Thanks Allan. Your patience must be legendary here on the forums. I think I understand now. I will give it a go.