CODEWITHSUNDEEP
tabulator
Philip Southwell
Philip Southwell

Reputation: 385

How do I get this mutator to work upon cellEdited?

I'm using Tabulator 3.5 and have a mutator:

Tabulator.extendExtension("mutator", "mutators", {
    percentageMutator:function(value, data, type, mutatorParams){

        console.log(mutatorParams);  // sanity check - we'll come back to this!
        console.log(data);  // sanity check - we'll come back to this!
        // code omitted here to perform calculations
        return percentage

        }
    });

My constructor object, stripped of all niceties, is as below. Notice that the columns are nested twice. Notice also that I'm using the Django template language to dynamically build the table.

    $("#markbook-table").tabulator({
        columns: [
            {title: "First Name", field: "firstname", validator: ["maxLength:50", "string"]},
            {title: "Last Name", field: "lastname", validator: ["maxLength:50", "string"]},
            {   title:"Some grouping",
                columns:[
                    {% for assessment in assessments %}
                        {
                            title: "{{ assessment.name }} (out of {{ assessment.max_mark }})",
                            columns:[
                                {title: "Result", field: "{{ assessment.name }}", editor: "input",},
                                {title: "Mark out of", field: "{{ assessment.name }}_outof"},
                                {title: "weighting", field: "{{ assessment.name }}_weighting"},
                                {title: "%", field: "{{ assessment.name }}_percentage", mutator: "percentageMutator", mutatorParams:{assessmentName: "{{ assessment.name }}"}},
                                },
                                ]
                        },
                    {% endfor %}
                ],
            },
            {% endfor %}
        ],
        data: tableData,
        cellEdited: function(cell) {

            row.update({'Statistics_percentage': false});  // this is the line that fails

            $.ajax({
                // Do ajax magic here to save to database
            });
        },
    })

The crux of the matter is that my row.update() doesn't recalculate the % after a change in the result field. The field name 'Statistics_percentage' has been chosen because it fits my current data but I can easily generalise it later.

The console.log(mutatorParams) in the percentageMutator function is the same upon initial construction of the table, and after editing. However, the console.log(data) shows that the row data passed after editing to the percentageMutator function only contains the cell in question and does not contain any data for other cells in the row - hence the calculations fail after editing.

I'm hoping you'd have an idea about how I can force all the row data to be sent to the mutator upon editing. Thanks so much for even reading this far. Any help would be appreciated.

Upvotes: 1

Views: 1662

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8368

You need to use the mutatorEdit and mutatorEditParams options if you only want the mutator called on edit.

Mutators are only called on a cell if that cells value has been changed, updating the value of other fields in that rows data will not trigger the mutator to be called again as this could lead to unpredictable behaviour (imagine a mutator that multiplied the incoming value by 1000 as a unit change, if that got called any time any row data got updated, it would quickly corrupt the data).

If all you are looking to do is display the value to a user and you don't need to actually store the data, can i suggest that you use a formatter to do this instead, that way you can call the row.reformat() function after your update, which will re-run the formatter and recalculate the display value.

Upvotes: 3

Related Questions