define primary key

define primary key

montoyammontoyam Posts: 568Questions: 136Answers: 5

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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).

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited November 2020

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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' }
                ]
            }
        });
    
  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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??)

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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.

This discussion has been closed.