Is there a way for Editor to omit fields that are blank/null when editing?

evhoeung12

My company has purchased Editor licenses and we are currently implementing it in one of our applications. I've run into a behavior when editing and submitting data, all fields are submitted as "changed" even though they haven't. This behavior occurs when the fields are blank/null.

i.e. Field A is blank, Field B is blank, and Field C is blank. If I change Field A, Editor the request will send field a,b, and c values. If I change Field A but B and C are not blank it only sends Field A in the request. I've had to write extra code on the server side to check for those null/blank fields.

Is there a way in Editor to omit those blank/null values from the request completely?

allan

Are you able to give me a link to a page showing the issue so I can trace it through please?

It should be that if it is a null value for a field, that will be retained and not submitted to the server if there was no change in the user input value.

Allan

evhoeung12

Hi Allen,

I can't link to a page as the application requires authentication and authorization but here's some code that I hope can help. One thing I did notice was that I set defaultContent = "" if there is a null value returned from in my server response when retrieving data. If I remove that line of code I get an error "Requested unknown parameter <name of column>".

//The Editor

    editor = new $.fn.dataTable.Editor( {
        ajax: {
            "url": "/test/editor",
            //"contentType": "application/json",
            "type": "POST"/*,
            "data": function ( d ) {
                //d.test = "hello";
              return JSON.stringify( d );
            }*/
        },
        table: "#poisr_table",
        idSrc: 'poisr_id',
        fields: [ {
            label: "Promise Date:",
            name: "promise_date"
            },{
                label: "Requirement Text:",
                name: "requirement_text"
            },{
                label: "RMA Number:",
                name: "rma_number"
            },{
                label: "Waybill: ",
                name: "waybill"
            },{
                label: "Carrier:",
                name: "carrier"
            },{
                label: "Transport Mode:",
                name: "transport_mode"
            },{
                label: "Stickout:",
                name: "stickout"
            }
        ]
    } );
    
       // Activate an inline edit on click of a table cell
    $('#poisr_table').on( 'dblclick', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            submit: 'changed'
        } );
        
    } );
    
    //The Datatable
    var poisr_table = $('#poisr_table').DataTable({
        dom: 'ZBr<t><"col-md-4" i><"col-md-2" l><"col-md-6" p>"',
        serverSide: true,
        processing: true,
        scrollY: "500px",
        scrollX: "true",
        "colResize": {
            "tableWidthFixed": false
        },
        language: {
            processing: "<img src='resources/images/loading.gif'> Please Wait..."
        },
        lengthMenu:[10,25,50,100,250,500,1000],
        stateSave: true, //Save the state of the table in localStorage/Session, default 2 hours
        stateDuration: 60*60*999999999, //Save the state for a week 60*60*168
        sPaginationType: "listbox",
        autoWidth: false,
        rowId: 'poisr_id',
        ajax: {
            type: 'POST',
            url: '/test/searchData'
        },
        autoFill: {
            //columns: ':not(:first-child)',
            editor:  editor
        },
        keys: {
            columns: ':not(:first-child)',
            editor:  editor
        },
        columns:[
            {data: "poisr_id", "defaultContent": ""}
            ,{ data: "plant", "defaultContent": ""}
            ,{ data: "part_number", "defaultContent": ""}
            ,{ data: "part_configuration", "defaultContent": ""}
            ,{ data: "part_number_desc", "defaultContent": ""}
            ,{ data: "vendor_name", "defaultContent": ""}
            ,{ data: "po_number", "defaultContent": ""}
            ,{ data: "po_line_number", "defaultContent": ""}
            ,{ data: "poisr_sequence","defaultContent" : ""}
            ,{ data: "delv_date", "render": function(data){
                return (moment(data).isValid()) ? moment(data).format("MM/DD/YYYY") : "Invalid"; //Moment looks for a specific format in order to format date correctly
            },"defaultContent": ""}
            ,{ data: "promise_date", "render": function(data){
                if(data != undefined){
                    return (moment(data).isValid()) ? moment(data).format("MM/DD/YYYY"): ""; //Moment looks for a specific format in order to format date correctly
                }else{
                    return "";
                }
            }, "defaultContent": "", name: 'promise_date'}
            ,{ data: "statistical_date","defaultContent" : "" , visible: true, "render": function(data){
                return (moment(data).isValid()) ? moment(data).format("MM/DD/YYYY") : "Invalid"; //Moment looks for a specific format in order to format date correctly
            }}
            ,{ data: "requirement_text", "defaultContent": "", name: 'requirement_text'}
            ,{ data: "qty_expected", "defaultContent": ""}
            ,{ data: "qty_received", "defaultContent": ""}
            ,{ data: "unit_price","defaultContent" : "" , visible: true}
            ,{ data: "app_last_modified_by","defaultContent" : "" , visible: true}
            ,{ data: "app_last_modified_on","defaultContent" : "" , visible: true, "render": function(data){
                return (moment(data).isValid()) ? moment(data).format("MM/DD/YYYY") : "Invalid"; //Moment looks for a specific format in order to format date correctly
            }}
            ,{ data: "opened_date","defaultContent" : "" , visible: true, "render": function(data){
                return (moment(data).isValid()) ? moment(data).format("MM/DD/YYYY") : "Invalid"; //Moment looks for a specific format in order to format date correctly
            }}
            ,{ data: "amend_date","defaultContent" : "" , visible: true, "render": function(data){
                return (moment(data).isValid()) ? moment(data).format("MM/DD/YYYY") : "Invalid"; //Moment looks for a specific format in order to format date correctly
            }}
            ,{ data: "confirm_date", "render": function(data){
                return (moment(data).isValid()) ? moment(data).format("MM/DD/YYYY") : "Invalid"; //Moment looks for a specific format in order to format date correctly
            },"defaultContent": ""}
            ,{ data: "storage_location", "defaultContent": "", visible: false}
            ,{ data: "storage_location_desc", "defaultContent": ""}
            ,{ data: "origdept", "defaultContent": "", visible: false}
            ,{ data: "destdept", "defaultContent": "", visible: false}
            ,{ data: "ac_serial_number", "defaultContent": "", visible: false}
            ,{ data: "buyer_code", "defaultContent": "", visible: false}
            ,{ data: "buyer_name", "defaultContent": "", visible: false}
            ,{ data: "dmt_number", "defaultContent": "", visible: false}
            ,{ data: "rma_number", "defaultContent": "", visible: false, name: 'rma_number', type: 'string'}
            ,{ data: "waybill", "defaultContent": "", visible: false, name: 'waybill', type: 'string'}
            ,{ data: "carrier", "defaultContent": "", visible: false, name: 'carrier', type: 'string'}
            ,{ data: "transport_mode", "defaultContent": "", visible: false, name: 'transport_mode', type: 'string'}
            ,{ data: "stickout",  visible: false, name: 'stickout', type: 'string'}
            ,{ data: "promiseDateSlippage", "defaultContent": "", visible: false}
            ,{ data: "promiseDateFromDeliveryDate", "defaultContent": "", visible: false}
            ,{ data: "pastFutureDue", "defaultContent": "", visible: false}
            ,{ data: "header_status","defaultContent" : "" , visible: false}
            ],
        colReorder: true,
        buttons : [
        { extend: 'print',
            className: 'red'
        },
        {
            text: 'Upload Spreadsheet',
            action: function(e,dt,node,config){
                $("#uploadModal").modal("show");
            },
            className: 'green'
        },
        {
            text: 'Export to Excel',
            action: function(e,dt,node,config){
                
                $.ajax({
                    type : "POST",
                    url : "/poisrsp/exportSearch",
                    beforeSend: function(){
                        $('#myModalLoad').modal('show');
                    },
                    success : function(result) {
                        if (result.indexOf("ERROR") > -1) {
                            console.log(result);
                        } else {
                            window.location.href = "/poisrsp/download";
                        }
                    },
                    error : function(textStatus, errorThrown) {
                        console.log(textStatus + " ; " + errorThrown);
                    },
                    complete: function(){
                        $('#myModalLoad').modal('hide');
                    }
                });
            },
            className: 'green'
        },
        {
            text: 'Refresh',
            action: function(e,dt,node,config){
                poisr_table.ajax.reload(null,false);
            },
            className: 'blue'
        },
        {
            extend: 'colvis',
            text: 'Show/Hide',
            columns: ':gt(0)',
            collectionLayout: 'three-column',
            className: 'red'
        }
        ]
    
    });

allan

One thing I did notice was that I set defaultContent = "" if there is a null value returned from in my server response when retrieving data. If I remove that line of code I get an error "Requested unknown parameter <name of column>".

Yes, that is expected. null is the absence of data, so rather than just displaying an empty cell DataTables needs you to tell it what it should use instead. Usually that will be an empty string, but it could be <i>No data</i> or anything else.

Could you show me a sample of the two data sets that are causing the difference in behaviour (i.e. the JSON for those rows)?

Thanks,
Allan

allan

There is another thread about a similar issue (if not identical - not sure yet!) and while answering that I though of a little more debug information that would be useful.

editor.on( 'initEdit', function ( e, node, data, items, type ) {
  console.log( 'initEdit', JSON.stringify( data ) );
} );
editor.on( 'preSubmit', function ( e, data, action ) {
  console.log( 'preSubmit', JSON.stringify( data ) );
} );

to your page please and let me know what the console shows when you edit a row with this issue and then submit it?

Thanks,
Allan

evhoeung12

Hi Allan,

Your suggestion of add <i>No data</i> helped me find a solution. When I retrieve data back from my database I do a null check and set the appropriate field to "No Data". That now displays in my dataTable and when I perform an edit, it no longer sends those extra parameters.

Thanks for that!