when datatable is in window size _xTableItem.row(RowIndex).data() can get data in console but when datatable is in responsive the _xTableItem.row(RowIndex).data() get undefined value. i does not know what causes it, please help.

    $(document).ready(function () {
        var _dataresult = {
            xError: "0",
            xErrorMessage: [],
            xItemRecords: [{
                xItemDescription: "this is item a",
                xItemId: "IM1",
                xItemName: "item a",
                xItemPrice: 0
            }],
            xResult: "1"
        };

        var _xTableItem = $('table[data-role="xTableItem"]').DataTable({
            select: true,
            scrollY: 550,
            scrollCollapse: true,
            autoWidth: false,
            responsive: true,
            processing: true,
            retrieve: true,
            pageLength: 5,
            pagingType: 'listbox',
            buttons: [],
            data: _dataresult.xItemRecords,
            rowId: 'xItemId',
            responsive: {
                details: {
                    display: $.fn.dataTable.Responsive.display.childRowImmediate,
                    type: 'column',
                    target: '.expandable'
                },
                breakpoints: [
                    { name: 'desktop', width: Infinity },
                    { name: 'tablet', width: 1024 },
                    { name: 'fablet', width: 768 },
                    { name: 'phone', width: 480 }
                ]
            },
            language: {
                emptyTable: "No Records"
            },
            columnDefs: [],
            select: {
                style: 'multi',
                selector: 'td:first-child'
            },
            columns: [
                { data: null, defaultContent: '', className: 'select-checkbox table-control', orderable: false },
                { data: null, className: 'control expandable table-control', orderable: false, defaultContent: "", searchable: false },
                { "data": "xItemId", "title": "Id", className: "never" },
                { "data": "xItemName", "title": "Item Name ", className: "all expandable" },
                { "data": "xItemPrice", "title": "Price ", className: "desktop" },
                { "data": "xItemDescription", "title": "Description", className: "desktop" },
                { "data": null, "title": "Action", className: "desktop", "defaultContent": "<button class='btn-primary btn-block btn btn-xs' data-role='btn_ViewAction'>View</button>", "targets": -1 }
            ],
            dom: '<"row"<"col-md-12"f>>t<"row col-md-12 pull-left mt-2"l>i',
            order: [[2, 'asc']]
        });

        $('table[data-role="xTableItem"]').on('click', 'button[data-role="btn_ViewAction"]', function () {
            //Method 1
            var RowIndex = $(this).closest('tr');
            var data = _xTableItem.row(RowIndex).data();
            console.log(data);

            //Method 2
            var tr = $(this).closest('tr');
            var row = _xTableItem.row(tr);
            console.log(row.data());
        });
    });