|
|
     
RadGrid offers rich grouping functionality, supporting drag-to-group, predefined groups, aggregates, plus group header and footer templates. This help article
will introduce you to the main scenarios of grouping in RadGrid.
Enabling Grouping
To allow/disallow the user the ability to perform grouping in RadGrid, you just need to set the groupable property to a string
value enabling the behavior that best fits your scenario. The values recognized by RadGrid are:
Value | Meaning |
|---|
none | Grouping is disabled. This is the default value. | enabled |
The end user can drag column headers to a specifically designed grouping panel (see below) to perform grouping by the column field. Pre-defining
groups in the data source is also allowed. Group headers are scrolled together with the grid rows.
| staticHeaders |
User-defined grouping is disabled, but you can add groups in the data source. If you do so, the group header of the currently visible top group
will stay static under the grid header while this group is scrolled vertically. If the currently scrolled rows belong to a group, having parent groups,
their headers will also stay visible on top.
| enabled, staticHeaders |
User-defined grouping is allowed as well as adding groups manually in the data source. The group header of the currently visible top group
will stay static under the grid header, while this group is scrolled vertically. If the currently scrolled rows belong to a group, having parent groups,
their headers will also stay visible on top.
|
Grouping Specifics
When groupable is set to enabled, a new area will be exposed on the left side of the grid table view. You can drag a column header cell and drop it over
this area (the grouping panel) to group by that column.
It is possible to group by multiple fields simply by dragging more columns onto the grouping panel. Then, you can click the panel to view all grouped fields.
You can reorder them or remove any of them to modify the grouped view of the grid. This next image shows grouping by job position and then by last name.
You have control over the content of the group headers and footers through the groupHeaderTemplate and
groupFooterTemplate properties. For more information, see the Templates article.
The code sample below shows a grid with grouping enabled. | Enabling User-defined Grouping | Copy |
|---|
var grid = new Telerik.UI.RadGrid(document.getElementById("grid1"), {
dataSource: {
data: People.generatePeople(50),
},
groupable: "enabled",
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "Title", title: "Position" },
{ field: "City" }
],
height: 320
});
|
generatePeople is a simple function for generating a given number of records. To be able to run the above code sample, you can copy
the code below as well.
| JS | Copy |
|---|
WinJS.Namespace.define("People", {
generatePeople: WinJS.Utilities.markSupportedForProcessing(function (itemCount) {
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer"];
var data = [];
do {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)];
data.push({
Id: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title
});
} while (data.length < itemCount);
return data;
})
});
|
|