datatable as input rowGroup

datatable as input rowGroup

DralghazaliDralghazali Posts: 3Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • DralghazaliDralghazali Posts: 3Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

Sign In or Register to comment.