Concatenating two fields on server side

parcival

I'm trying to have Datatables group records as per this example but need to have the grouping done based on a combination of two fields in the table. I saw another post here mentioning that this could be done with a GetFormatter but I can't make heads or tails from the documentation

I'd like to create a new field "Applications.FullName" that would consist of "Applications.Name" + " " + "Applications.Version"

Many thanks!

kthorngren

Thats an old example using drawCallback. The RowGrouphttps://datatables.net/extensions/rowgroup/ is what you want to use. It has multi level grouping, which is what I think you are asking for. See this example.

Kevin

parcival

Very cool! I almost got this working. Is there a way to hide the top level row grouping?
If I set "startrender": null then it will hide the whole header but if I return null then it shows No Group on the page which I'd like to hide.
This is my code:

var table = $('#example').DataTable({
            ajax: {
                url: "/api/applicationPackageData/",
                type: 'POST'
            },
             order: [[0, 'asc'],[1, 'asc']],
                rowGroup: {
                    startRender: function ( rows, group, level ) {
                        if (level === 0) { return null;}  

                        let data = rows.data();
                        let application = data[0].Applications.Name
                        let version = data[0].Applications.Version
                       
                        return $('<tr/>')
                            .append('<th colspan="6" scope="row">'+application+" "+version+'</th>')
                    },
                    dataSrc: [ "Applications.Name", "Applications.Version"]
                },
            columnDefs: [ {
                        targets: [ 0, 1 ],
                        visible: false
                    } ],
            serverSide: true,
            columns: [
                { data: "Applications.Name" },
                { data: "Applications.Version" },
                { data: "ApplicationPackages.Variant" },
                { data: "ApplicationPackages.Type" },
                { data: "ApplicationPackages.StatusId" },
                { data: "ApplicationPackages.IsAvailable" },
                { data: "ApplicationPackages.Modified" },
                { data: "ApplicationPackages.ModifiedBy" }
            ]
        });

This is my result:

kthorngren

Is there a way to hide the top level row grouping?

Possibly. You can use the level parameter to see which level is being processed. And if the first level add the inline style style="display:none; or just use CSS with a class to hide the top level. Inspecting the row I find this in one of the examples:

<tr class="dtrg-group dtrg-start dtrg-level-0"><th colspan="6" scope="row">Edinburgh</th></tr>

You can probably use CSS to hide the class dtrg-level-0.

Another option might be to use rowGroup.dataSrc as a function to combine the two columns into one group. There is an example at the bottom of the docs page in the comments.

Kevin

parcival

So many ways to get to the same end result! I ended up using the function to create a custom field to group on, like so:

                rowGroup: {
                    dataSrc:  function(row) {
                        return row.Applications.Name + " " + row.Applications.Version;
                    }
                },

This looks the cleanest to me, and also easily enables changes in the future.

Thank you!

kthorngren

This looks the cleanest to me, and also easily enables changes in the future.

I agree. Glad you got it working.

Kevin