Concatenating two fields on server side

Concatenating two fields on server side

parcivalparcival Posts: 28Questions: 8Answers: 0

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!

This question has accepted answers - jump to:

Answers

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

    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

  • parcivalparcival Posts: 28Questions: 8Answers: 0

    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:

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

    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

  • parcivalparcival Posts: 28Questions: 8Answers: 0

    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!

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

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

    I agree. Glad you got it working.

    Kevin

Sign In or Register to comment.