Base solution for your next web application
Open Closed

Detail expanding row in Datatables #8385

User avatar
0
HCCNOV created

Looking for an example for Core w/ JQuery project to create expandable "Detail" rows for Datatables. Was easy in JTable. Would like to click an image to expand "related data" rows (1:many)

I cannot even implement the following URL inside of ASP.Net Zero.

https://datatables.net/examples/api/row_details.html

Go to accepted answer
7 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team
  • User Avatar
    0
    HCCNOV created

    Thank you for the response. To clarify a little I am not trying to nest a Datatable within a Datatable. I'm simply trying to add a simple HTML table to the "Detail button event" of the main Datatable, as in the example link I posted, within the ASP.Net Zero/ABP architecture. I cannot get the Click event to fire the function format ( d ) method in my index.js file. The index.js containing these methods is being sent to the browser but the event is not firing. The data on page load for the default filter criteria id populating the Datatable just fine.

    Using the "+" icon in the second column for the click event.

    Thank you in advance.

    My index.js: (and index.min.js)

    $(function () {
    $(function () {
        var _$customerTable = $('#CustomerTable');
        var _customerService = abp.services.app.customer; 
             
        var dataTable = _$customerTable.DataTable({
            paging: true,
            serverSide: true,
            processing: true,
            listAction: {
                ajaxFunction: _customerService.getAll,
                inputFilter: function () {
                    return {
                        filter: $('#CustomerTableFilter').val(),                    
                        accountNumberFilter: $('#AccountNumberFilterId').val(),
                        propertyAddressFilter: $('#PropertyAddressFilterId').val()                        
                    };
                }
            },
            columnDefs: [
                {
                    className: 'control responsive',
                    orderable: false,
                    render: function () {
                        return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                    },
                    targets: 0
                },
                {
                    className: 'details-control',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                    render: function () {
                        return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                    },
                    width: "15px",
                    targets: 1
                },
                {
                    targets: 2,
                    orderable: false,
                    data: "status",
                    render: function (status) {
                        var $span = $('<span/>');

                        if (status) {
                            $span.append(
                                $("<span/>")
                                    .addClass("fa fa-file-pdf")
                                    .attr("data-toggle", "kt-tooltip")
                                    .attr("title", app.localize('View PDF'))
                                    .attr("data-placement", "top")
                            );
                        } else {
                            $span.append(
                                $("<span/>")
                                    .text(app.localize('No PDF'))
                            );
                        }
                        return $span[0].outerHTML;

                    }
                },
                {
                    targets: 3,
                    data: "status",
                    render: function (status) {
                        var $span = $('<span/>');

                        if (status) {
                            $span.append(
                                $("<span/>")
                                    .addClass("kt-badge kt-badge--success kt-badge--inline")
                                    .attr("data-toggle", "kt-tooltip")
                                    .attr("title", app.localize('Approved'))
                                    .attr("data-placement", "top")
                                    .text(app.localize('Approved'))
                                    .css("margin-right", "5px")
                            );
                        }

                        if (!status && status != null) {
                            $span.append(
                                $("<span/>")
                                    .addClass("kt-badge kt-badge--danger kt-badge--inline")
                                    .attr("data-toggle", "kt-tooltip")
                                    .attr("title", app.localize('Rejected'))
                                    .attr("data-placement", "top")
                                    .text(app.localize('Rejected'))
                                    .css("margin-right", "5px")
                            );
                        }

                        if (status == null) {
                            $span.append(
                                $("<span/>")
                                    .addClass("kt-badge kt-badge--info kt-badge--inline")
                                    .attr("data-toggle", "kt-tooltip")
                                    .attr("title", app.localize('Not Reviewed'))
                                    .attr("data-placement", "top")
                                    .text(app.localize('Not Reviewed'))
                                    .css("margin-right", "5px")
                            );
                        }
                        return $span[0].outerHTML;
                    }
                },
                {
                    targets: 4,
                    data: "accountNumber"
                },
                {
                    targets: 5,
                    data: "address"
                }
            ]
        });


     **   // Array to track the ids of the details displayed rows
        var detailRows = [];

        $('#CustomerTable tbody').on('click', 'tr td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = dt.row(tr);
            var idx = $.inArray(tr.attr('id'), detailRows);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                detailRows.splice(idx, 1);
            }
            else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    detailRows.push(tr.attr('id'));
                }
            }
        });

        function format(d) {
            return 'Address: ' + d.address + '<br>' +
                '<br>' +
                'The child row can contain any data you wish, including links, images, inner tables etc.';
        }
**

        function getCustomers() {
            dataTable.ajax.reload();
        }

        $('#ShowAdvancedFiltersSpan').click(function () {
            $('#ShowAdvancedFiltersSpan').hide();
            $('#HideAdvancedFiltersSpan').show();
            $('#AdvacedAuditFiltersArea').slideDown();
        });

        $('#HideAdvancedFiltersSpan').click(function () {
            $('#HideAdvancedFiltersSpan').hide();
            $('#ShowAdvancedFiltersSpan').show();
            $('#AdvacedAuditFiltersArea').slideUp();
        });

        var getSortingFromDatatable = function () {
            if (dataTable.ajax.params().order.length > 0) {
                var columnIndex = dataTable.ajax.params().order[0].column;
                var dir = dataTable.ajax.params().order[0].dir;
                var columnName = dataTable.ajax.params().columns[columnIndex].data;

                return columnName + ' ' + dir;
            }
            else {
                return '';
            }
        };

        $('#GetCustomerButton, #RefreshCustomerListButton').click(function (e) {
            e.preventDefault();
            getCustomers();
        });

        $('#CustomerTableFilter').on('keydown', function (e) {
            if (e.keyCode !== 13) {
                return;
            }

            e.preventDefault();
            getCustomers();
        });



    });

    getCustomers();
})();
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @HCCNOV

    Did you find a solution to this ? It doens't seem to be related to AspNet Zero.

  • User Avatar
    0
    HCCNOV created

    No solution yet. I obviously have misplaced script somewhere but i'm unable to figure this out. It is related to AspNet Zero in that i'm trying to implement something in the API for DataTables.Net and it isn't working. I would think having an example of an "Expandable" row in the framework would be a great selling point. It worked beautifully in previous versions (using JTable). The url I sent above is the basis for my example: https://datatables.net/examples/api/row_details.html

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    As I can see, this sample returns entire data at first request and then shows detail information on row expand. But, in JTable, it makes request to server when you expand a row and gets anoter list of child-records. Which one is the one you want ?

    Thanks,

  • User Avatar
    0
    HCCNOV created

    A request to server would be most beneficial here since "related" data might not be in original request/dto.

  • User Avatar
    0
    ismcagdas created
    Support Team
Assignee
No one
Labels
Non yet