Editor Total Row

dpanscik

I would like to have a total row on the bottom of editor (either calculated browser side or server side).

I currently use the following draw callback in table (not editor) and was wondering if the same callback technique would work with editor?

            fnDrawCallback: function (row, data, start, end, display) {

                var api = this.api(), data;



                // Remove the formatting to get integer data for summation
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };

                totalInvoiced = api

                    .rows(function (idx, data, node) {
                        return data["documentNumber"] === 'Sub Total' ?
                            true : false;
                    })
                    .data()
                    .pluck('Invoiced')
                    .reduce(function (a, b) {
                        return ((intVal(a) + intVal(b)).toLocaleString('en-US', { style: 'currency', currency: 'USD', }));

                        //return intVal(a) + intVal(b);
                    }, 0);

               $(api.column(9).footer()).html(totalInvoiced);

            },

allan

You could use a readonly field to show the calculated value, or the display only plugin.

In terms of making the calculation - use dependent() on the fields that effect the calculation to update the result.

Allan

dpanscik

Hi Allan,

Well... I have questions. Lets start at the beginning.

Looking at the readonly field documentation.

sample code of;

editor.add({
    type: 'readonly',
    label: 'Read only field',
    name: 'counter',
    def: '1'
});

I don't understand how the above sample is integrated into a larger context.

Thinking the above was a browser code sample, I dropped in a few places along the lineage of code in my chtml file to see what happened and the read only field never showed up at the bottom of editor.

So my first question is, is the above code sample intended for browser chtml file or server controller file?

Where should the sample drop in at along the lineage of editor code?

kthorngren

You can add the field into your fields definition in the Editor init code, for example:

const editor = new DataTable.Editor({
    ajax: '../php/staff.php',
    fields: [
        {
            label: 'First name:',
            name: 'first_name'
        },
        {
            label: 'Last name:',
            name: 'last_name',
            type: 'readonly'
        },
    ]
});

You could do the same if you choose to use the display only plugin.

Kevin

dpanscik

Ohhh... of course. That should have been obvious. Thank you for the kick start!

dpanscik

Well... im having no luck with ```readonly'''

I tried placing the example in two places of the chtml file and never got a field to show up in the browser. I expected the first option (below) to work, but when it didn't work, I tried the 2nd option. Neither one produced a cell in the table.

Here are the two spots I attempted (with redactions);

    $("#ApForm").DataTable({


        },
        "search": {
            "caseInsensitive": true
        },

        "ajax": {


        },

        fields: [

            {
                label: 'read only test:',
                name: 'read_only_test',
                type: 'readonly'
            },
        ],


        "columnDefs":
            [

               

            ],

        "columns": [

 

        ],
        select: true,
        buttons: [
            {

        ],
        rowCallback: function (row, data, val, meta) {
                     


        }
    });

.
.
.
.

    editor = new $.fn.dataTable.Editor({
       table: "#ApForm", },

        formOptions: {
            inline: {
                submit: 'allIfChanged',
            },
        },
        fields: [


            {
                label: 'read only test:',
                name: 'read_only_test',
                type: 'readonly'
            },


        ]

allan

You wouldn't have a fields array in the DataTables configuration object - it would be ignored. e-fields is an Editor configuration object.

Here is a fairly simple example with a readonly field. Note that the Start date can't be modified in Editor.

If it isn't working for you, pleaser link to a page showing the issue so I can look into it.

Allan

dpanscik

Hi Allan,

Thank you for helping. I'm still learning the ins and outs of editor. Editor has much more moving parts than Table.

The example you provided adds a column. I'm trying to add a sum row at the bottom of editor.

colin

I'm trying to add a sum row at the bottom of editor.

Do you mean at the bottom of the Editor form? Like something here, either beside the "Update" button, or in the white area?

Or do you mean a footer in the main table, as shown in this footer example?

Colin

allan

Edit can show a message at the top of the form using message(), or it can show an error message in the bottom bar using error(). There isn't an API to show a message at the bottom of the form though.

You could perhaps use a direct DOM or jQuery insertion into the modal.

Allan

dpanscik

Hi Colin & Allan,

Here is a visual on what I am trying to accomplish. Shown in this screen shot is a sum row I have in a existing Table project. I would like to implement this same type of sum row functionality in a Editor project.

allan

Thank you for the image that helps clarify a few things.

That is a DataTable and you want to put a summation in the footer of the table. Editor is a plug-in to DataTables and it doesn't operate on the table footer at all, so the fact that you have Editor on the table in question has no bearing on the footer.

If you already have this working in an existing table, you basically want to do the same again. Probably something like in this example.

Allan

dpanscik

Perfect! I am now moving right along. I now have a sum row in an editor project. However the sum row breaks the ability to move the columns. Ill provide three screen shots to help give you a visual of what I am seeing.

For this example (starting with the count of 0) note the position of column #2 (paid) and the position of column #3 (Email Received Date)

Now I successfully drag and drop to switch the position of column #2 and #3

In the above screen shot pay attention to column #11 (PoAmount) and column #13 (PH), the header of the column moves but not the values.

I drag and drop column #11 and column #13 to switch their positions.

The screen shot below shows the header of the column moving but the the column values remain in their previous position and do not move

colin

This example here should help - it's showing how to use colReorder.transpose()to ensure the footer stays with the correct column.

Colin

allan

We'd really need a test case showing the issue to be able to offer much more help.

dpanscik

Hi Allan,

Would it be alright if I PM you a link and login details?

allan

Please do

dpanscik

Sounds good. PM is sent.