Duplicate button not working in parent child datatable.

chaithu7844

The duplicate button does not work in the below code, New,edit,delete work fine. Not sure if i am missing any library or what i am doing wrong. Nothing happens when i click on duplicate button.

    $(document).ready(function () {
    var editor = new $.fn.dataTable.Editor({
            ajax: {
                url: "/api/dimensiondetail"
             },
            dom: 'Bfrtip',
            table: "#example",
            fields: [
                {
                    label: "Cost Center",
                    name: "VW_Dimension.DimensionTypeDescription",
                    type: 'select'
                }
            ]

        });

     var siteTable = $('#example').DataTable({

            "fixedHeader": {
                header: true,
            },
            "colReorder": true,
            dom: "Bfrtip",
             autoWidth: true,
            "order": [[ 1, "asc" ]],
            ajax: {
                url: "/api/dimensiondetail",
                type: 'POST'
            },
            columns: [

                {
                    className: 'details-control',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                    width: '4%'
                },
                //{ data: "ProcessType.description" },
                { data: "VW_Dimension.DimensionTypeDescription" },
                { data: "VW_Dimension.DimensionKeyDescription" },
                { data: "VW_Dimension.hierarchyLevel1" },
                { data: "VW_Dimension.hierarchyLevel2" },
                { data: "VW_Dimension.hierarchyLevel3" }
            ],
            select: {
                style: 'os',
                selector: 'td:not(:first-child)'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor },
                {
                    extend: "selected",
                    text: 'Duplicate',
                    action: function ( e, dt, node, config ) {
                        // Start in edit mode, and then change to create
                        editor
                            .edit( table.rows( {selected: true} ).indexes(), {
                                title: 'Duplicate record',
                                buttons: 'Create from existing'
                            } )
                            .mode( 'create' );
                    }
                }

            ]
        });

        $('#example tbody').on('click', ' td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = siteTable.row(tr);
        //var row = dt.row( tr );

        if (row.child.isShown()) {

                // This row is already open - close it
                destroyChild(row);
                tr.removeClass('shown');
            }
            else {
                // Open this row

                createChild(row, 'child-table'); // class is for background colour
                tr.addClass('shown');
            }
        });

        function createChild(row) {


            // This is the table we'll convert into a DataTable
            var table = $('<table class="display cell-border compact stripe" width="100%"/>');

            // Display it the child row
            row.child(table).show();


            var rowData = row.data();
            var usersEditor = new $.fn.dataTable.Editor({
                ajax: {
                    url: "/api/joinrecipientaccess?idvalue="+rowData.VW_Dimension.id,

                },

            dom: 'Bfrtip',
            table: table,
            fields: [
                {
                    label: "Full Name:",
                    name: "RecipientCurrentAccess.recipientId",
                    type: 'select'

                }
                , {
                    label: "Approval Level:",
                    name: "RecipientCurrentAccess.approvalLevelsId",
                    type: 'select'
                }
                , {
                    label: "Dimension:",
                    name: "RecipientCurrentAccess.dimensionId",
                    type: 'select'
                    ,def: "RecipientCurrentAccess.dimensionId"
                }

            ]
            });

            var usersTable = table.DataTable({
            "asStripeClasses": [''],
            dom: 'Bfrtip',
            "order": [],
            pageLength: 20,
            ajax: {
                url: "/api/joinrecipientaccess?idvalue="+rowData.VW_Dimension.id,
                type: 'POST'
            },
            columns: [

                { title: 'Approval Level',data: "ApprovalLevels.description", className: 'dt-head-left  cell-border compact stripe'},

                {
                    title: 'Recipient',
                    className: 'dt-head-left  cell-border compact stripe',
                    data: null,
                    render: function (data, type, row) {
                        return data.Recipient.firstName + ' ' + data.Recipient.lastName;
                    },
                    editField: ["Recipient.firstName", "Recipient.lastName"]
                },
                { title: 'Process' , data: "ProcessType.description", className: 'dt-head-left'},
                { title: 'Dimension' , data: "DimensionKey.description", className: 'dt-head-left'}
            ],
            select: true,
            buttons: [
                { extend: 'create', editor: usersEditor },
                { extend: 'edit', editor: usersEditor },
                {
                    extend: "selected",
                    text: 'Duplicate',
                    action: function ( e, dt, node, config ) {
                        // Start in edit mode, and then change to create
                        editor: usersEditor
                            .edit( table.rows( {selected: true} ).indexes(), {
                                title: 'Duplicate record',
                                buttons: 'Create from existing'
                            } )
                            .mode( 'create' );
                    }
                },
                { extend: 'remove', editor: usersEditor },

            ]
          });

        }

        function destroyChild(row) {
            var table = $("table", row.child());
            table.detach();
            table.DataTable().destroy();

            // And then hide the row
            row.child.hide();
        }



       usersEditor.on('submitSuccess', function (e, json, data, action) {
            row.ajax.reload(function () {
                $(row.cell(row.id(true), 0).node()).click();
            });
       });

        function updateChild(row) {
            $('table', row.child()).DataTable().ajax.reload();
        } 

        editor.on('submitSuccess', function () {
            siteTable.rows().every(function () {
                if (this.child.isShown()) {
                    updateChild(this);
                }
            });
        });

 });

</script>

kthorngren

I suspect you will see an error in your browser's console about table.rows( {selected: true} in line 61. You aren't using the variable table for your Datatable but are using siteTable. Looks like you will have the same problem in line 167.

Kevin

chaithu7844

Thanks Kevin. That fixed it.