@{ var aggregate = (context as AggregateTemplateContext); Total for Day: @aggregate.Sum } @{ var aggregate = (context as AggregateTemplateContext); Total for Timesheet: @aggregate.Sum } |
This produces something liek the following:
Double clicking a row will toggle the confrimed state
Which works perfectly well in the first group. However, if I double click the first row in the second group.....
It sets the confirmed status of the second item in the group - or in some instances just does nothing.
I am matching the underlying data using a GUID as an identifier, for some reason the event dispatcher is sending the wrong record to my event handler - I have checked the data flows and this is the case - can you have a look please?
Thanks
@page "/" @using Syncfusion.EJ2.Blazor.Grids @inject IJSRuntime _ijsRuntime <h3>Grid Grouping Example</h3> <div class="row"> <div class="col"> <EjsGrid TValue="TimesheetRowItem" @ref="theGrid" AllowGrouping="true" DataSource="@TimesheetItems"> <GridEvents CommandClicked="@OnCommandClicked" OnRecordDoubleClick="OnRecordDoubleClick" TValue="TimesheetRowItem"></GridEvents> <GridGroupSettings Columns="@GroupColumns"></GridGroupSettings> <GridAggregates> <GridAggregate> <GridAggregateColumns> <GridAggregateColumn Field="@nameof(TimesheetRowItem.Units)" Type="AggregateType.Sum" Format="N3" ColumnName="Units"> <GroupFooterTemplate> @{ var aggregate = (context as AggregateTemplateContext); <div>Total for Day: @aggregate.Sum</div> } </GroupFooterTemplate> <FooterTemplate> @{ var aggregate = (context as AggregateTemplateContext); <div>Total for Timesheet: @aggregate.Sum</div> } </FooterTemplate> </GridAggregateColumn> </GridAggregateColumns> </GridAggregate> </GridAggregates> <GridColumns> <GridColumn Field=@nameof(TimesheetRowItem.Id) HeaderText="Id"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.DayOfWeek) HeaderText="Day"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.DisplayDate) HeaderText="Date" AutoFit="true" TextAlign="TextAlign.Left"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.WorkcodeName) HeaderText="Workcode" AutoFit="true" TextAlign="TextAlign.Left"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.SiteName) HeaderText="Site" AutoFit="true" TextAlign="TextAlign.Left"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.DisplayStartTime) HeaderText="Start Time" AutoFit="true" TextAlign="TextAlign.Left"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.DisplayEndTime) HeaderText="End Time" AutoFit="true" TextAlign="TextAlign.Left"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.Units) HeaderText="Units" Type="ColumnType.Number" Format="N3" TextAlign="TextAlign.Right"></GridColumn> <GridColumn Field=@nameof(TimesheetRowItem.Confirmed) HeaderText="Confirmed" AutoFit="false" DisplayAsCheckBox="true" TextAlign="TextAlign.Left"></GridColumn> <GridColumn HeaderText="Action" Width="120"> <GridCommandColumns> <GridCommandColumn Type="CommandButtonType.Edit" Title="Edit Timesheet Item" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn> </GridCommandColumns> </GridColumn> </GridColumns> </EjsGrid> </div> </div> @code{ EjsGrid<TimesheetRowItem> theGrid; private string[] GroupColumns = (new string[] { "DisplayDate" }); public List<TimesheetRowItem> TimesheetItems = new List<TimesheetRowItem>() { new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Monday", DisplayDate="09/03/2020", WorkcodeName="Surgery", SiteName="Main Practice", DisplayStartTime="09:00", DisplayEndTime="12:30", Units=3.5M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Monday", DisplayDate="09/03/2020", WorkcodeName="Surgery", SiteName="Main Practice", DisplayStartTime="13:30", DisplayEndTime="17:30", Units=4M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Tuesday", DisplayDate="10/03/2020", WorkcodeName="Surgery", SiteName="Main Practice", DisplayStartTime="09:00", DisplayEndTime="12:30", Units=3.5M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Tuesday", DisplayDate="10/03/2020", WorkcodeName="Surgery", SiteName="Main Practice", DisplayStartTime="13:30", DisplayEndTime="17:30", Units=4M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Wednesday", DisplayDate="11/03/2020", WorkcodeName="Surgery", SiteName="Annex", DisplayStartTime="09:00", DisplayEndTime="12:30", Units=3.5M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Wednesday", DisplayDate="11/03/2020", WorkcodeName="Surgery", SiteName="Annex", DisplayStartTime="13:30", DisplayEndTime="17:30", Units=4M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Thursday", DisplayDate="12/03/2020", WorkcodeName="Surgery", SiteName="Main Practice", DisplayStartTime="09:00", DisplayEndTime="12:30", Units=3.5M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Thursday", DisplayDate="12/03/2020", WorkcodeName="Surgery", SiteName="Main Practice", DisplayStartTime="13:30", DisplayEndTime="17:30", Units=4M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Friday", DisplayDate="13/03/2020", WorkcodeName="Surgery", SiteName="Annex", DisplayStartTime="09:00", DisplayEndTime="12:30", Units=3.5M, Confirmed=false }, new TimesheetRowItem(){ Id=Guid.NewGuid().ToString(), DayOfWeek="Friday", DisplayDate="13/03/2020", WorkcodeName="Surgery", SiteName="Main Practice", DisplayStartTime="13:30", DisplayEndTime="17:30", Units=4M, Confirmed=false }, }; public class TimesheetRowItem { public string Id { get; set; } public string DayOfWeek { get; set; } public string DisplayDate { get; set; } public string WorkcodeName { get; set; } public string SiteName { get; set; } public string DisplayStartTime { get; set; } public string DisplayEndTime { get; set; } public decimal Units { get; set; } public bool Confirmed { get; set; } } protected async Task OnCommandClicked(CommandClickEventArgs<TimesheetRowItem> args) { // log id to console await LogMessage("Id selected: " + args.RowData.Id); // get the item from the list var item = TimesheetItems.Where(x => x.Id == args.RowData.Id).FirstOrDefault(); if (item != null) { // toggle confirmed item.Confirmed = !item.Confirmed; // refresh the grid await theGrid.DataBind(); theGrid.Refresh(); } } protected async Task OnRecordDoubleClick(RecordDoubleClickEventA |