jQuery Grid Grouping

The shieldui grid has build in grouping. It can be enabled by adding a group to the underlying datasource component:

$("#grid").shieldGrid({
    dataSource: {
        schema: {
            fields: {
                ProductID: { path: "ProductID", type: Number },
                UnitPrice: { path: "UnitPrice", type: Number },
                UnitsInStock: { path: "UnitsInStock", type: String },
                            
                Discontinued: { path: "Discontinued", type: Boolean }
            }
        },
        data: products,
        group: [
            { field: "ProductID", order: "asc" }
        ]
    },
    columns: [
    { field: "ProductID", title: "ProductID", width: "330px", groupFooterTemplate: "Count: {count}" },
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "230px", groupFooterTemplate: "Count: {count}" },
    { field: "UnitsInStock", title: "Units In Stock", width: "230px" },
    { field: "Discontinued", width: "230px", groupFooterTemplate: "Count: {count}" }
    ]
});

More information about DataSource widget grouping you can find here: DataSource Grouping
If you want to show group aggregates you need to add aggregate in the datasource group definition and then to add groupFooterTemplate with aggregate expression:

$("#grid").shieldGrid({
    dataSource: {
        schema: {
            fields: {
                ProductID: { path: "ProductID", type: Number },
                UnitPrice: { path: "UnitPrice", type: Number },
                UnitsInStock: { path: "UnitsInStock", type: String },
                            
                Discontinued: { path: "Discontinued", type: Boolean }
            }
        },
        data: products,
        group: [
            { field: "ProductID", order: "asc", aggregate: [{ field: "ProductID", aggregate: "count", type: Number }, { field: "UnitPrice", aggregate: "count", type: Number }] },
            { field: "Discontinued", order: "asc", aggregate: [{ field: "ProductID", aggregate: "count", type: Number }] }
        ]
    },
    columns: [
    { field: "ProductID", title: "ProductID", width: "330px", groupFooterTemplate: "Count: {count}" },
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "230px", groupFooterTemplate: "Count: {count}" },
    { field: "UnitsInStock", title: "Units In Stock", width: "230px" },
    { field: "Discontinued", width: "230px", groupFooterTemplate: "Count: {count}" }
    ]
});

Live example of grouping with group aggregates functionlity can be found here: grid grouping with aggregates

The grid control supports dragging column header and group by it. To enable drag to group functionality you need to set grouping.showGroupHeader to true and grouping.allowDragToGroup to true:

$("#grid").shieldGrid({
    dataSource: {
        schema: {
            fields: {
                ProductID: { path: "ProductID", type: Number },
                UnitPrice: { path: "UnitPrice", type: Number },
                UnitsInStock: { path: "UnitsInStock", type: String },
                            
                Discontinued: { path: "Discontinued", type: Boolean }
            }
        },
        data: products,
        group: [
            { field: "ProductID", order: "asc", aggregate: [{ field: "ProductID", aggregate: "count", type: Number }, { field: "UnitPrice", aggregate: "count", type: Number }] },
            { field: "Discontinued", order: "asc", aggregate: [{ field: "ProductID", aggregate: "count", type: Number }] }
        ]
    },
    grouping: {
        showGroupHeader: true,
        allowDragToGroup: true,
        message: "Test"
    },
    columns: [
    { field: "ProductID", title: "ProductID", width: "330px", groupFooterTemplate: "Count: {count}" },
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "230px", groupFooterTemplate: "Count: {count}" },
    { field: "UnitsInStock", title: "Units In Stock", width: "230px" },
    { field: "Discontinued", width: "230px", groupFooterTemplate: "Count: {count}" }
    ]
});

Live example of grouping with enabled drag to group functionlity can be found here: grid grouping