Don't understant the difference between using editor.edit() and using a button with editor:

MustangProgrammer

Is there a difference between using the datatable editor button, i.e

{
extend: 'edit',
text: 'Revise',
editor: editorRevise,
}

and calling an editor on the onclick of a field using <editor>.edit()?

Reason I ask, when using as datatable as an input and I use the extended button I get my values selected in my table.
When I use editor .edit() I get a message in my editor about multiple values. Is there something I'm missing? Do I need to set the values manually or do something more when using editor.edit()? I have included images as examples.

allan

Effectively no - the edit button will call the edit() method. However, it does so passing in title, buttons, etc to the form-options.

The multiple values message suggests that multiple rows might be selected - which could be the case if you just call editor.edit() without passing in a suitable row selector. Perhaps you can show me the code you are using?

Allan

MustangProgrammer

This is the code cut down from the original.
I'm also including a json file for the table and the data for the revise column the structure can be viewed. In the code, they are the return of the ajax calls for the data sources.

Sorry it's so long, I don't think I can cut it down much more, without losing the intent of the code.

Guess, I also must have missed something in the formatting of the code.

MustangProgrammer

 {
    "sess_year": 2023,
    "lco_num": 9864,
    "summary": "a",
    "event_code": "SPB",
    "track_date": "2023-07-21T00:00:00",
    "requestdocuserid": "AleksonN",
    "user_id": "eigog",
    "title": "1",
    "lname": "Barry",
    "sort_order": 1,
    "into_code": "031",
    "bill_num": "",
    "leg_user_id": "BarryJi",
    "chamber": "House",
    "party": "D",
    "doc_type": "PB",
    "reqLogUser": "",
    "req_sop": "a",
    "prior_bill": "",
    "bill_year": 0,
    "filed_date": "",
    "type_code": "PB",
    "caucus": "HD",
    "approved": false,
    "max_event_code": "SPB",
    "Introducers": [
      {
        "lco_num": 9864,
        "sess_year": 2023,
        "intro_code": "031",
        "intro_type": "I",
        "sort_order": 1
      },
      {
        "lco_num": 9864,
        "sess_year": 2023,
        "intro_code": "002",
        "intro_type": "I",
        "sort_order": 2
      },
      {
        "lco_num": 9864,
        "sess_year": 2023,
        "intro_code": "008",
        "intro_type": "I",
        "sort_order": 3
      },
      {
        "lco_num": 9864,
        "sess_year": 2023,
        "intro_code": "035",
        "intro_type": "I",
        "sort_order": 4
      },
      {
        "lco_num": 9864,
        "sess_year": 2023,
        "intro_code": "151",
        "intro_type": "I",
        "sort_order": 5
      }
    ]
  }

MustangProgrammer

[
  {
    "label": "Ackert, Tim, ,  (008)",
    "value": "008"
  },
.
.
.
{
    "label": "Zupkus, Lezlye, ,  (089)",
    "value": "089"
  }
]

GerryE

Allen, I think I got banned accidently by attempting to edit and save my code too many times in a row.

MustangProgrammer

function createTrackTable() {
    //File
    var editorFile = new $.fn.dataTable.Editor({
        ajax: function (method, url, d, successCallback, errorCallback) {
            if (d.action == 'edit') {
                var data = trackTable.rows(['.selected']).data()[0];
                var irecInserted = fileReleasedLco(data.lco_num, data.sess_year);
                if (parseInt(irecInserted) > 0) {
                    getRowData(data.lco_num);
                    successCallback(myRowData);
                }
            }
        },
        table: '#TrackTable',
        idSrc: "lco_num",
        fields: [
            { label: 'lco ', name: 'lco_num', type: "hidden" },
            { label: 'sess year ', name: 'sess_year', type: "hidden" },
        ]
    });
    //Cancel
    var editorCancel = new $.fn.dataTable.Editor({
        ajax: function (method, url, d, successCallback, errorCallback) {
            if (d.action == 'edit') {
                var data = trackTable.rows(['.selected']).data()[0];
                var irecInserted = cancelReleasedLco(data.lco_num, data.sess_year);
                if (parseInt(irecInserted) > 0) {
                    getRowData(data.lco_num);
                    successCallback(myRowData);
                }
            }
        },
        table: '#TrackTable',
        idSrc: "lco_num",
        fields: [
            { label: 'lco ', name: 'lco_num', type: "hidden" },
            { label: 'sess year ', name: 'sess_year', type: "hidden" },
        ]
    });
    //Revise
    var editorRevise = new $.fn.dataTable.Editor({
        ajax: function (method, url, d, successCallback, errorCallback) {
            //if (d.action == 'create') {
            //    var data = trackTable.rows(['.selected']).data()[0];
            //    var iNewLCONum = reviseReleasedLco(data.lco_num, data.sess_year, d.data[0].revision_notes, data.summary);
            //    var newLco = parseInt(iNewLCONum);
            //    if (newLco > 0) {
            //        getData();
            //        successCallback(myData);
            //    }
            //}
        },
        table: '#TrackTable',
        idSrc: "lco_num",
        fields: [
            {
                label: "Add Introducers:",
                name: "Introducers[].intro_code",
                type: "datatable",
                multiple: true,
                options: allRepAndSen,
                config: {
                    paging: true,
                    columns: [{
                        title: 'Legislator',
                        data: 'label',
                        width: '20%'
                    }],
                    lengthMenu: [20],
                    select: {
                        info: true
                    }
                }
            },
        ]
    });

    //create table
    trackTable = $('#TrackTable').DataTable(
        {
            ajax: {
                url: 'trackreq.aspx/getInitReportInfo',
                type: 'post',
                dataType: 'json',
                async: false,
                data: function (d) {
                    var d = {};
                    d.user_id = sloginuser;
                    d.sess_year = curYear;
                    d.sUserSecurity = currUserInfo.security;
                    d.sOffice = currUserInfo.office_code;
                    d.iLCONum = 0;
                    return JSON.stringify(d);
                },
                contentType: "application/json; charset=utf-8",
                dataSrc: function (json) {
                    if (json.d == '') {
                        return [];
                    }
                    else {
                        return JSON.parse(json.d);
                    }
                },
            },
            "dom": "<'row'<'col-md-6'B><'col-md-6 addtm'f><'col-md-12 addtm'i>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-md-8'>>",
            "idSrc": "lco_num",
            "responsive": true,
            "processing": true,
            "autoWidth": false,
            "paging": true,
            "pageLength": 25,
            "order": [[0, 'desc']],
            "columns": [
                {
                    title: 'LCO#',
                    data: 'lco_num',
                    class: "dt-center all",
                    render: function (data, type, row, meta) {
                        if (type === 'display') {
                            data = '<a href="default.aspx?LCONum=' + data + '">' + data + '</a>';
                        }
                        return data;
                    }
                },
                {
                    title: '1st Intro',
                    data: 'lname',
                    class: "desktop tablet-l tablet-p",
                    render: function (data, type, row, meta) {
                        if (type === 'display' && row.title != null) {
                            data = row.title.substring(0, 3) + '. ' + data;
                        }
                        return data;
                    }
                },
                {
                    data: null,
                    title: "Cancel",
                    orderable: false,
                    render: function (data, type, row, meta) {
                        if (!isDate(row.filed_date) && (row.event_code.trim().toLowerCase() == 'rbl' || row.event_code.trim().toLowerCase() == 'spb' || row.event_code.trim().toLowerCase() == 'log')) {
                            return '<a><i class="fa fa-remove  fa-lg" style="color: Red" title="Cancel"/></a>';
                        }
                        return "";
                    },
                    createdCell: function (td, cellData, rowData, row, col) {
                        if (!isDate(rowData.filed_date) && (rowData.event_code.trim().toLowerCase() == 'rbl' || rowData.event_code.trim().toLowerCase() == 'spb' || rowData.event_code.trim().toLowerCase() == 'log')) {
                            $(td).addClass('dt-center editor-cancel');
                        }
                    }
                },
                {
                    data: null,
                    title: "Revise",
                    orderable: false,
                    render: function (data, type, row, meta) {
                        if (!isDate(row.filed_date) && (row.event_code.trim().toLowerCase() == 'rbl' || row.event_code.trim().toLowerCase() == 'spb' || row.event_code.trim().toLowerCase() == 'log' && mypbDeadline >= moment(new Date()).format("YYYY-MM-DD[T]HH:mm:ss"))) {
                            return '<a><i class="fa fa-history  fa-lg" style="color: darkblue" title="Revise"/></a>';
                        }
                        return "";
                    },
                    createdCell: function (td, cellData, rowData, row, col) {
                        if (!isDate(rowData.filed_date) && (rowData.event_code.trim().toLowerCase() == 'rbl' || rowData.event_code.trim().toLowerCase() == 'spb' || rowData.event_code.trim().toLowerCase() == 'log')) {
                            $(td).addClass('dt-center editor-revise');
                        }
                    }

                },
                {
                    data: "Introducers",
                    title: "Revise",
                    orderable: false,
                    render: function (data, type, row, meta) {
                        var retVal = "";
                        for (i = 0; i < row.Introducers.length; i++) {
                            retVal = retVal + row.Introducers[i].intro_code + ', ';
                        }
                        retVal = retVal.substring(0, retVal.length - 2);
                        return retVal;
                    }
                }
            ],
            "select": {
                style: "single",
                //toggleable: false
            },
            "language": {
                search: "Filter:",
                searchPlaceholder: "e.g LCO 5000",
                lengthMenu: "&nbsp;Show: _MENU_"
            },
            "buttons": [
                {
                    extend: 'edit',
                    text: 'Edit Introducers',
                    className: 'btn btn-default',
                    editor: editorRevise,
                }
            ],
            "initComplete": function () {

            } //End initComplete
        });

    $('#TrackTable').on('click', 'td.editor-cancel', function (e) {
        e.preventDefault();
        var data = trackTable.row($(this).parents('tr')).data();
        var strrequest = "";
        if (data.summary.length > 200) {
            strrequest = data.summary.substring(0, 200) + "...";
        }
        else {
            strrequest = data.summary.substring(0, 200);
        }
        editorCancel.edit($(this).closest('tr'), {
            title: 'Are you sure you wish to cancel this request?',
            message: 'LCO#: ' + data.lco_num + "<br/>" + strrequest,
            buttons: [
                'Yes',
                {
                    label: 'No',
                    fn: function () {
                        this.close();
                    }
                }
            ]
        });
    });

    $('#TrackTable').on('click', 'td.editor-revise', function (e) {
        //e.preventDefault();
        //var data = trackTable.row($(this).parents('tr')).data();
        editorRevise.edit();
    });
}

allan

editorCancel.edit($(this).closest('tr'), {

That will select edit only a single row.

editorRevise.edit();

This however will edit all rows (no specific row is selected - the selector is undefined). Is that really want you want - or should it use $(this).closest('tr') as well?

Thanks,
Allan

p.s. The formatting for code uses backticks, not single quotes. I've updated the posts above.

MustangProgrammer

I really needed the closest row as shown on the first part of your post. Thank you. Lastly, is there a callback I can use in the edit that allows for the update of the table after the edit? Let me know if you would like me to start as a new thread on this..

allan

Of the host table? As long as the JSON returned from the edit follows what Editor expects in return, then it should update the host table automatically. Is your server returning JSON in that format for the edit action?

Allan

MustangProgrammer

Yes, of the host table. It currently is not returning the expected information, however a minor adjustment to the stored procedure will fix that. So unlike an ajax function, which has a successCallback, as long as the editor gets what it expects, it has it's own callback? As always, thank you for your help.

allan

If you use ajax as a function, then you need to pass the JSON structure expected to the successCallback function. If you don't use it as a function, but just as a string or object, then it will automatically add its own callback to watch for the response from the server.

Allan