Editor Total Row

Editor Total Row

dpanscikdpanscik Posts: 125Questions: 32Answers: 0
edited March 26 in Free community support

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);

            },

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

    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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0
    edited March 27

    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?

  • kthorngrenkthorngren Posts: 20,258Questions: 26Answers: 4,763
    edited March 27 Answer ✓

    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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

    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'
                },
    
    
            ]
    
    
  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

    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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

    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.

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    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

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

    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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

    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.

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

    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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0
    edited March 29

    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

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

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

    Colin

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

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

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

    Hi Allan,

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

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

    Please do :)

  • dpanscikdpanscik Posts: 125Questions: 32Answers: 0

    Sounds good. PM is sent.

Sign In or Register to comment.