datatable as input rowGroup

Dralghazali

is it possible to use rowGroup in a datatable input field ?

kthorngren

Haven't tried it myself but I don't see why it wouldn't work. This example shows how to apply Datatables options. The datatable docs state this:

config
A DataTables configuration object that can be used to customise the DataTable shown in the Editor modal. Any of the DataTables options can be used, although keep in mind additional CSS styling might be required to account for the table being shown in a relatively constrained space.

Kevin

Dralghazali

greetings Kevin

I have tried to add the rowGroup option to the config option in, but it is not working, neither throwing an error

$(document).ready(function() {

            let editor;
            $.fn.dataTable.ext.errMode = 'none';
            editor = new $.fn.dataTable.Editor({
                ajax: '../../Application/Radiology/RadiologyRequest',
                table: '#RadiologyRequest',
                fields: [{
                        name: 'VisitID',
                        label: 'VisitID',
                        type: 'hidden'
                    },
                    {
                        name: 'Patient',
                        label: 'Patient'
                    },
                    {
                        name: 'User',
                        label: 'Doctor'
                    },
                    {
                        name: 'Radiology',
                        label: 'Radiology',
                        type: 'datatable',
                        optionsPair: {
                            value: 'id',
                        },
                        config: {
                            columns: [{
                                    title: 'Code',
                                    data: 'CodeHyphenated'
                                },
                                {
                                    title: 'Short Description',
                                    data: 'ShortDescription'
                                },
                                {
                                    title: 'Long Description',
                                    data: 'LongDescription'
                                },
                                {
                                    title: 'Block',
                                    data: 'BlockName'
                                },
                            ],
                            paging: false,
                            scrollY: 200,
                            scrollCollapse: true,
                            rowGroup: 'BlockName'
                        }
                    },
                    {
                        name: 'Urgent',
                        label: 'Urgent',
                        type: 'radio',
                        def: 0,
                        options: [{
                            label: 'Urgent',
                            value: 1
                        }, {
                            label: 'Non-Urgent',
                            value: 0
                        }]
                    }
                ]
            })

            let table = $('#RadiologyRequest').DataTable({
                dom: 'Blfrtip',
                processing: false,
                serverSide: true,
                responsive: true,
                pagingType: "full_numbers",
                lengthMenu: [5, 10, 25],
                ajax: {
                    url: '../../Application/Radiology/RadiologyRequest',
                    type: 'POST'
                },
                columns: [{
                        data: 'id',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'Patient',
                        searchable: true,
                        orderable: false,
                        render: function(data, type, row, meta) {
                            return row.PatientFirstName + ' ' + row.PatientFamilyName;
                        }
                    },
                    {
                        data: 'User',
                        searchable: false,
                        orderable: false,
                        render: function(data, type, row, meta) {
                            return row.DoctorFirstName + ' ' + row.DoctorFamilyName;
                        }
                    },
                    {
                        data: 'RadiologyTest',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'Urgent',
                        searchable: false,
                        orderable: false,
                        render: function(data, type, row, meta) {
                            return Number(data) ? 'Yes' : 'No';
                        }
                    },
                    {
                        data: 'Status',
                        searchable: false,
                        orderable: false,
                    },
                ],
                select: true,
                buttons: [{
                        extend: 'create',
                        editor: editor,
                    },
                    {
                        extend: 'edit',
                        editor: editor
                    },
                    {
                        extend: 'remove',
                        editor: editor
                    }
                ],
            });
        });

the other config options are working and displaying fine

kthorngren

You need to use rowGroup.dataSrc to define the column you want to group. Next you need to use the order option to set the order of the table to that column. The the basic example. Also make sure you are loading the rowGroup extension code (JS and CSS).

Kevin