This is a migrated thread and some comments may be shown as answers.

Grouping event

3 Answers 524 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 23 Jun 2014, 09:59 PM
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

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 25 Jun 2014, 10:20 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jason
Top achievements
Rank 1
answered on 25 Jun 2014, 09:02 PM
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))
                        )
0
Alexander Valchev
Telerik team
answered on 27 Jun 2014, 07:31 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Jason
Top achievements
Rank 1
Share this question
or