Grouping event

[Jason]

Using a Grid, what is the event that is fired when something is "grouped".  I want to run a function but only when someone drops a column header into the "group by" area.

Furthermore, is there an event that fires when you remove the grouping.  Meaning you click on the little "x" of the last grouped element.

Thanks,
Jason

[Alexander Valchev]

Hi Jason,

Change event of the DataSource fires every time when the data changes e.g. when grouping, sorting, filtering, paging or editing operation occurs. You can hook up to this event and determine if the dataSource is in groped state by:

change: finction() {
  if (this.group().length > 0) {
    //dataSource is grouped
  }
}

The same event will fire when a group is removed from the group by area.

I hope the information will help.

Regards,
Alexander Valchev
Telerik

 

 

[Jason]

I'm actually using the MVC helpers... that said, when I wire up a  change event, that change event is NOT called when I group a column...  here is my current code...

<script>
function onChange(arg) {

                                console.log("blah");

                            }

                        </script>                      

 

                        @(Html.Kendo().Grid<ReportListViewModel>()

                            .Name("ReportList")

                            .HtmlAttributes(new { @class = "cursorLink" })

                            .DataSource(ds => ds.Ajax()

                                .Aggregates(aggregates =>

                                    {

                                        aggregates.Add(f => f.ReportName).Count();

                                        aggregates.Add(f => f.ReportCategoryName).Count();

                                        aggregates.Add(f => f.User_CreatedBy).Count();

                                        aggregates.Add(f => f.CreatedDate).Count();

                                        aggregates.Add(f => f.ReportDescription).Count(); 

                                    })

                                .Read("ReportListData", "Reports", new { ProductName = ViewBag.SelectedProduct.ProductName })

                                .PageSize(500))

                            .ToolBar(toolbar =>

                                {

                                    toolbar.Template(@<text>

                                       <div class="toolbar">

                                       <span class="">

                                           <a class="btn btn-small printGridButton"><i class="icon-print"></i>Print</a>

                                           <a class="btn btn-small saveGridButton" id="SaveReportList" data-mcpagename="ReportList" data-mcuserconfigsettingid="@reportListGridUserConfigId" data-mcuserconfigsettingname="ReportList" data-mcuserconfigshowpagemessage="true"><i class="icon-hdd"></i>Save View</a>

                                           <a class="btn btn-small resetGridButton" data-mcuserconfigsettingname="ReportList" data-mcuserconfigshowpagemessage="false"><i class="icon-repeat"></i>Reset View</a>

                                       </span>

                                       </div>

                                    </text>);

                                })

                            .Columns(c =>

                            {

                                c.Bound(f => f.ReportName).Title("Report Name").ClientTemplate("<input type='hidden' id='GridRowURL' value='" + Url.Action("ReportView") + "/#=ReportId#' />#:data.ReportName#").Width(300).ClientGroupFooterTemplate("Count");

                                c.Bound(f => f.ReportCategoryName).Title("Category").Width(125).ClientGroupFooterTemplate("Count");

                                c.Bound(f => f.User_CreatedBy).Title("Created By").Width(150).ClientGroupFooterTemplate("Count");

                                c.Bound(f => f.CreatedDate).Title("Date Created").Width(120).Format("{0:d}").HtmlAttributes(new { @class = "kendoGridDate" }).ClientGroupFooterTemplate("Count");

                                c.Bound(f => f.ReportDescription).Title("Description").ClientGroupFooterTemplate("Count");

                                c.Template(f => { }).ClientTemplate("#if (data.ReportSubscriptionId > 0) {# <a class='btn btn-mini' href='javascript:void(0)' onclick='updateReportSubscription(#=ReportSubscriptionId#, \"#=ReportId#\")'><i class=\"icon-pencil\"></i>Edit</a> #} else {# <a class='btn btn-mini' href='javascript:void(0)' onclick='addReportSubscription(\"#=ReportId#\")'><i class=\"icon-plus\"></i>Add</a> #}#").Title("Subscribe").HtmlAttributes(new { @class = "mc_reportSubscriptionCell" }).Width(90);

                            })

                            .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))

                            .Groupable(g =>

                            {

                                g.Messages(m =>

                                {

                                    m.Empty("Drag Column Header Here to Group");

                                }

                                );

                            }

                            )

                            .Pageable(p =>

                            {

                                p.Input(true).Numeric(false);

                                p.PageSizes(new int[] { 250, 500, 1000, 2500, 5000 });

                            })

                            .Filterable(filterable =>

                                filterable.Operators(operators => operators

                                    .ForString(str => str.Clear()

                                        .Contains("Contains")

                                        .DoesNotContain("Does not contain")

                                        .IsEqualTo("Is equal to")

                                        .IsNotEqualTo("Is not equal to")

                                        .StartsWith("Starts with")

                                        .EndsWith("Ends with ")                               

                                    )

                                )

                            )

                            .AutoBind(false)

                            .ColumnMenu()

                            .Events(e =>

                            {

                                e.DataBound("OnDataBoundReportList").Change("onChange");

                            })

                            .Scrollable(builder => builder.Enabled(true).Height("500px"))

                            .Reorderable(r => r.Columns(true))

                        )

[Alexander Valchev]

Hello Jason,

You have set a handler for the change event of the Grid which fires when a row is selected. My recommendation was to hook up to the change event of the DataSource which is different from change event of the Grid.

Regards,
Alexander Valchev
Telerik