row data with leftjoin data

montoyam

I have posted a question with this topic once, but this is a different issue:

I have a page that has three datatables. The second one is a child to the first and the third is a child to the second. I can get the second to filter based off the first. This works:

    var lineItemTable = $('#LineItems').DataTable({
        dom: 'Bfrtip',
        ajax: {
            url: '/api/LineItems',
            type: 'post',
            data: function (d) {
                var selected = categoryTable.row({ selected: true });
                if (selected.any()) {
                    d['LineItems.CategoryID'] = selected.data().CategoryID;
                    alert(selected.data()['CategoryID']);
                }
            }
        },
        columns: [
            { "data": "LineItems.LineItemID" },
            { "data": "LineItems.LineItem" },
            { "data": "Categories.category"},
            { "data": "LineItems.sortby"}
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: lineItemEditor },
            { extend: 'edit', editor: lineItemEditor },
            { extend: 'remove', editor: lineItemEditor }
        ]
        });

however, i can not get the third to filter. the alerts that I added return 'undefined' for both of the lines i tried:

    var unitRateTable = $('#unitrates').DataTable({
        dom: 'Bfrtip',
        ajax: {
            url: '/api/unitrates',
            type: 'post',
            data: function (d) {
                var selected = lineItemTable.row({ selected: true });
                if (selected.any()) {
                    d['unitrates.LineItemID'] = 16;// selected.data()['LineItems.LineItemID'];
                    alert(selected.data()['LineItems.LineItemID']);
                    alert(selected.data()['LineItemID']);
                }
            }
        },
        columns: [
            { "data": "unitrates.LineItemID"},
            { "data": "unitrates.effectivedate"},
            { "data": "unitrates.expiredate"},
            { "data": "unitrates.unitrate"}
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: unitRateEditor },
            { extend: 'edit', editor: unitRateEditor },
            { extend: 'remove', editor: unitRateEditor }
        ]
    });

here is the console dump for selected.data():

DT_RowId: "row_16"
LineItems: {LineItemID: 16, LineItem: "GIS Direct", CategoryID: "3", sortby: "5"}
LineItemID: 16
LineItem: "GIS Direct"
CategoryID: "3"
sortby: "5"
Categories: {CategoryID: 3, category: "Direct Charges (Variable Costs)", sortby: "3"}
CategoryID: 3
category: "Direct Charges (Variable Costs)"
sortby: "3"

colin

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

montoyam

Sorry, not sure how to create a test case. This is Editor and ASP.Net. Not sure how to share since I can't provide a link to our network.

The "child of a child" (unitrates) was working fine until I added a left join on the second table (LineItems). Line Items is a child of a Category table, and that one, with assistance from the forum members, I was able to get working. It is just unitrates is not working. The alerts I added (alert(selected.data()['LineItems.LineItemID']);) are returning 'undefined.

please let me know if there is more data I can provide in a comment.

allan

alert(selected.data()['LineItems.LineItemID']);

Should be:

alert(selected.data().LineItems.LineItemID);

or if you prefer array notation:

alert(selected.data()['LineItems']['LineItemID']);

The key to remember here is that its nested JSON data. We parse the data string in DataTables which is how it works for nested data.

Allan

allan

Oh - one other thing, you could add:

console.log(selected.data());

and look in your browser's console if you want to see the entire data structure for the selected row.

Allan

montoyam

yes, that was it. Thank you very much.

montoyam

it is interesting that line 9 in my first block of code works, but the same syntax did not work for the other data grid.