Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82755

Edit data not associated with row, prevent row update

$
0
0

I'm having trouble searching the forums for a similar issue. I feel like this would be more common than I'm finding.
But I have a row of data, and based on a bool, I'm popping up an editor on click to edit some unrelated data. This works, however, after I submit, Editor/Datatables attempts to redraw the row with the data coming back from from the unrelated Editor. I get the row mismatch error obviously. I have a super simple .NET Editor for /ComponentEditors/Approval/Editor

Preferably, I'd like it to only refresh the ONE column that I trigger the editor off of... or prevent the row updated entirely at the very least.

Editor

   const editor = new DataTable.Editor({
        ajax: '/ComponentEditors/Approval/Editor',
        idSrc: 'id',
        fields: [
            {
                label: 'Approval Date:',
                name: 'ApproveDate',
                type: 'datetime',
                keyInput: false
            },
            {
                label: 'Approval Comment:',
                name: 'ApprovalComments'
            }
        ],
        table: '#ProjectsDatatable'
    });

Datatable

  const datatable = new DataTable("#ProjectsDatatable", {
        ajax : {
            url: "/Projects/GetProjects",
            type: "GET",
            dataType: "JSON"
        },
        idSrc: 'id',
        columns: [ 
            {
                className: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            {
                data: "id",
                title: "ProjectId",
                searchable: false,
                visible: false
            },
            {
                data: "approveDate",
                orderable: false,
                render :function (data, type, row, meta) {
                    if(type === 'display'){
                        if(data !== null) {
                            let date = new Date(data);
                            return '<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" ' +
                                'data-bs-title="'+ date.toLocaleDateString() +' '+ date.toLocaleTimeString() +'" data-bs-content="'+row.approvalComments+'">' +
                                    '<i class="bi bi-check-circle-fill"></i>' +
                                    '</span>';
                        } else {
                            return '<span class="d-inline-block editor-edit"><button><i class="bi bi-circle"></i></button></span>';
                        }
                    }else{
                        //we are just checking for true or false
                        return data !== null;
                    }
                },
                searchable: true
            },
...a bunch more columns

On click method

    datatable.on('click', 'span.editor-edit button', function (e) {
        editor.edit(e.target.closest('tr'), {
            title: 'Approve Project',
            buttons: [
            {
                text: 'Cancel',
                action: function () {
                    this.close();
                }
            },
            'Update'
        ]
        });
    });


Viewing all articles
Browse latest Browse all 82755

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>