Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting the default grouping in Kendo Grid

I have a requirement to group a grid by default on a particular column and to not allow the user to remove the grouping on that column. Is this possible?

like image 889
Abi P Avatar asked Jun 24 '14 15:06

Abi P


People also ask

How do I group data in kendo grid?

To enable grouping, set the groupable option to true . As a result, the Grid exposes a new area in its header which enables the user to group the Grid data by a column. To group the data by multiple columns, users can drag the desired columns to the grouping header.

What is Pageable in kendo grid?

kendo:grid-pageable-messagesThe text messages displayed in pager. Use this option to customize or localize the pager messages.

What is dataItem in kendo grid?

Returns the data item to which the specified table row is bound. The data item is a Kendo UI Model instance.

What is dataBound event in kendo grid?

Fired when the widget is bound to data from its data source. The event handler function context (available via the this keyword) will be set to the widget instance.


1 Answers

You can set an initial grouping when you create the grid. You can keep the users from being able to remove or change the grouping by setting the groupable property to false or simply not including it in the configuration.

Both of the examples below group the grid based on FirstName.

Razor HTML Example:

@(Html.Kendo().Grid(Model.Person)
    .Name("grid")
    .Columns(columns =>
    {
      columns.Bound(model => model.FirstName);
      columns.Bound(item => item.LastName);
    })
    .Groupable(g => g.Enabled(false))
    .DataSource(dataSource => dataSource
        .Server()
        .Group(groups => groups.Add(p => p.FirstName))
)

JavaScript Example:

$("#grid").kendoGrid({
    dataSource: {
        data: [{FirstName: "FirstName1", LastName: "LastName1"},
              {FirstName: "FirstName1", LastName: "LastName2"},
              {FirstName: "FirstName3", LastName: "LastName3"},
              {FirstName: "FirstName1", LastName: "LastName4"}],
        group: { field: "FirstName" } // set grouping for the dataSource
    },
    groupable: false, // this will remove the group bar
    sortable: true,
    columns: ["FirstName","LastName"]
});

Link to a fiddle for the JavaScript example.

Source of the JavaScript example

like image 99
numaroth Avatar answered Oct 02 '22 15:10

numaroth