define primary key

montoyam

I am almost sure in the past I had to define the primary key for a Button. I am getting an error on another project and I believe that is what is going on again here. But, I can't find the syntax that I had used before (i don't remember what previous project it was in

Doesn't it go somewhere in here:

        buttons: {
            buttons: [
                { extend: 'create', editor: EquipmentOnLoan_DeptFundOrgEditor, text: 'Assign Fund/Org' },
                { extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditorStandalone, text: 'Assign Rate' }
            ]
        }

I hope my question makes sense.

kthorngren

What is the error you are getting?

You probably just want this:

    buttons: [
        { extend: 'create', editor: EquipmentOnLoan_DeptFundOrgEditor, text: 'Assign Fund/Org' },
        { extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditorStandalone, text: 'Assign Rate' }
    ]

Similar to this example.

Kevin

montoyam

oh, that extra 'buttons' is from when I was doing extra stuff but I ended up not doing that for this set of buttons. However, that is not what is causing the error. The first create button, which is tied to a different editor, works fine. When I click on the second I get:
Uncaught TypeError: Cannot read property 'one' of null

However, I have two other dataTables that uses the same editor and they work fine (well, one is almost fine and that is a question for another post).

kthorngren

Uncaught TypeError: Cannot read property 'one' of null

Can you post a link to your page or a test case showing the issue?

Its not obvious what the problem is with just the buttons config. The problem is somewhere else on your page.

Kevin

montoyam

Sorry, I can't post a link as this is on an intranet.

However, I added the following:

        buttons: [
            {
                extend: 'create', editor: EquipmentOnLoan_DeptFundOrgEditor, text: 'Assign Fund/Org'
                    ,action: function (event, data,node, config) {
                        console.log('config:', config);
                    }
            },
            {
                extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditorStandalone, text: 'Assign Rate'
                    ,action: function (event, data,node, config) {
                        console.log('config:', config);
                    }
            }
        ]

When I click the first button (the one that works) I see data under the 'editor' property. For the button that does not work, I see:
editor: null

here is the editor I am trying to call:

    var EquipmentOnLoan_LoanRateLinkEditorStandalone = new $.fn.dataTable.Editor({
        ajax: {
            url: 'api/EquipmentOnLoan_LoanRateLink',
            data: function (d) {

                d.LoanIDFilter = 0;
                /*
                var selected = EquipmentOnLoan_AlertsTable.row({ selected: true });

                if (selected.any()) {
                    console.log(selected.data().LOANRESOURCEID)
                    d.LoanIDFilter = selected.data().LOANRESOURCEID;
                }
            */
            }
        },
        table: EquipmentOnLoan_LoanRateLinkTableStandalone,
        fields: [
            {
                label: "id:", name: "EquipmentOnLoan_LoanRateLink.LoanResourceID", type: "readonly"
                //, def: rowID
            },
            {
                label: "Rate:", name: "EquipmentOnLoan_LoanRateLink.RateID", type: "select",
                placeholder: "<Select Rate>",
                placeholderValue: 0,
                placeholderDisabled: false
            },
            {
                label: "Effective Date:"
                , name: "EquipmentOnLoan_LoanRateLink.EffectiveDate"
                , type: 'datetime'
                //, def: startDate
                , format: "M/D/YYYY"
            },
            {
                label: "Expire Date:"
                , name: "EquipmentOnLoan_LoanRateLink.ExpireDate"
                , type: 'datetime'
                , format: "M/D/YYYY"
            }
        ]
    });

    EquipmentOnLoan_LoanRateLinkEditorStandalone.on('submitComplete', function () {
        EquipmentOnLoanTable.ajax.reload();
        EquipmentOnLoan_AlertsTable.ajax.reload();
        //EquipmentOnLoan_LoanRateLinkTable.ajax.reload();
    });

    var EquipmentOnLoan_LoanRateLinkTableStandalone = $('#EquipmentOnLoan_LoanRateLinkStandalone').DataTable({
        dom: 'Bt',
        ajax: {
            url: 'api/EquipmentOnLoan_LoanRateLink',
            type: 'post',
            data: function (d) {
                d.LoanIDFilter = 0;
                /*
                var selected = EquipmentOnLoan_AlertsTable.row({ selected: true });
                if (selected.any()) {
                    d.LoanIDFilter = selected.data().LOANRESOURCEID;
                }
                */
            }
        },
        select: { style: 'single' },
        columns: [
            { data: "EquipmentOnLoan_Rates.RateName", title: "Rate" },
            { data: "EquipmentOnLoan_LoanRateLink.EffectiveDate", title: "Effective Date" },
            { data: "EquipmentOnLoan_LoanRateLink.ExpireDate", title: "Expire Date" }
        ],

        buttons: {
            buttons: [
                { extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditorStandalone, text: 'Assign Rate' }
            ]
        }
    });

montoyam

here is the complete "alerts" dataTable which has the button that is not working:

    var EquipmentOnLoan_AlertsTable = $('#EquipmentOnLoan_Alerts').DataTable({
        dom: 'Bfrtip',
        ajax: 'api/EquipmentOnLoan_Alerts',
        columns: [
            { data: "LOANRESOURCEID", title: "Loan ID" },
            { data: "LOANID", title: "Loan ID" },
            { data: "RESOURCENAME", title: "Resource Name" },
            { data: "DEPTNAME", title: "Department" },
            { data: "LoanStartDate", title: "Loan Start Date" },
            { data: "LoanEndDate", title: "Date Returned" },
            { data: "COMPONENTTYPENAME", title: "Equipment Type" },
            { data: "AlertType", title: "Issue" },
        ],
        select: { style: 'single' },
        lengthChange: false,
        buttons: [
            {
                extend: 'create', editor: EquipmentOnLoan_DeptFundOrgEditor, text: 'Assign Fund/Org'
                    ,action: function (event, data,node, config) {
                        console.log('config:', config);
                    }
            },
            {
                extend: 'create', editor: EquipmentOnLoan_LoanRateLinkEditorStandalone, text: 'Assign Rate'
                    ,action: function (event, data,node, config) {
                        console.log('config:', config);
                    }
            }
        ]
    });

In the alerts datatable the primary key is LOANRESOURCEID, while in the editor, the primary key is "EquipmentOnLoan_LoanRateLink.LoanResourceID".

I remember once having to add the primary key to the button because they were different, but I can't find that code in my projects or in any dataTables documentation (but, perhaps this is a different issue altogether??)

kthorngren

Guessing the null is coming from this, on line 17 of the Editor config:

table: EquipmentOnLoan_LoanRateLinkTableStandalone,

Maybe it should be the ID of your HTML table, like this:

table: '#EquipmentOnLoan_LoanRateLinkStandalone'

According to the table docs you could use the Datatable API as it looks like you are trying to do. The problem is that you are defining the variable EquipmentOnLoan_LoanRateLinkTableStandalone after the Editor initialization.

Kevin

montoyam

oh my goodness... that was so stupid of me

The Alerts dataTable was before the standalone as well, so the editor was not even defined yet there!!

Thank you so much.