editor.dependent() to set a field value

editor.dependent() to set a field value

ThomDThomD Posts: 334Questions: 11Answers: 43

I'm trying to have a calculated field reflect user input while the modal Editor window is open.

CurrentBase Salary is read only. User enters Merit2015. CurrentBase + Merit2015 = NewSalary. Merit2015 is the only field the user should be able to edit directly.

    dtTable = $('#example').DataTable( {
        columns: [
            { data: null, className: 'details-control', orderable: false,  defaultContent: '' }, // col 0
        { data: "CurrentBase", title:"Current Base",className: "dt-right leftborder" }, // col 6
        { data: "Merit2015", title: "Merit 2015", className: "dt-right dt-edit leftborder" }, // col 14
        { data: "NewSalary", title: "New Base",className: "dt-right leftborder" },// col 18
        ]
(lots left out for brevity)
});

    dtEditor = new $.fn.dataTable.Editor( {
        fields: [   
        { label:  "Current Base", name: "CurrentBase", type: "display" }, // col 10
        { label:  "Merit 2015", name: "Merit2015", className: "dollarInput" }, // col 10
        { label:  "New Sal ", name: "NewSalary" , className: "dollarInput"},// col 16   
        ]
(lots left out for brevity)
});

When I use dependent(), I get an error when I try to set the .val() of NewSalary.

    
    dtEditor.dependent( 'Merit2015', function ( myValue, data) {
        var newSal = parseInt(data.values.Merit2015) + parseInt(data.values.CurrentBase);
        dtEditor.field('NewSalary').message( newSal );
        dtEditor.field('NewSalary').val( newSal );
    } );

.message() works fine, but .val() and .set() fail. The error is "Cannot read property 'length' of undefined" in f.Field._multiValueCheck, trying to read ids.length. In _multiValueCheck, "this" is the NewSalary field, but this.s.multiIds and this.s.multiValues are undefined. this.s.multiValue = false

What am I missing?

Editor 1.5.1

Answers

  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin

    Hi,

    Could you give me a link to the page so I can debug it please? I've just tried this locally but wasn't able to reproduce the error unfortunately.

    Thanks,
    Allan

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    At least you've been able to confirm that it should work as I've written it (with what little code I've shown.) Unfortunately this is an internal site. The live examples page doesn't support Editor does it?

    In debugging, I noticed that the _multiValueCheck() is running twice in succession for each field. I'll try to watch for the context of that.

    I'll try it with greatly simplified code base and see how it goes.

  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin

    The live examples page doesn't support Editor does it?

    Yes - you can use this file which will work at live.datatables.net.

    Allan

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    I wasn't able to get a working live example (I really need to figure out how that whole thing works), but I did discover that if I change the order in which I define the fields, it works.

    So, if a change in Merit2015 should trigger a new value in NewSalary, I needed to define the NewSalary field in the Editor before I define the Merit2015 field.

    Fields sequence matters here:

    dtEditor = new $.fn.dataTable.Editor( {     
        table: "#example",
        idSrc: "Id",
        legacyAjax: true,   //since we only update one record at a time we do not need the extra function of the new version (1.5+)
        fields: [   
            { label: "Title",name: "Title",  className:"widefield" },   // col 1
            { label:  "Current Base", name: "CurrentBase"}, // col 10
            { label:  "NewBase ", name: "NewBase" },// col 16
            { label:  "Merit 2015", name: "Merit2015", className: "dollarInput" }, // col 10
        (etc, etc)]
    } ) ;
    
This discussion has been closed.