Grid Group input edit show

[pradeep]

@page "/counter"

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.DropDowns

<div class="row">

    <div style="width: calc(100vw - 20rem); height: calc(100vw - 58rem);">

        <SfGrid @ref="GridDtls" DataSource="@order" Width="auto" AllowGrouping="true" >

                <GridEvents OnActionComplete="ActionCompleteHandler" OnActionBegin="BeginHandler" TValue="OrderDetails"></GridEvents>

            <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowEditOnDblClick="false" Mode="EditMode.Batch"></GridEditSettings>

            <GridGroupSettings Columns="@GroupedColumns" ShowDropArea="false"></GridGroupSettings>

                 <GridAggregates>

        <GridAggregate>

            <GridAggregateColumns>

                <GridAggregateColumn Field=@nameof(OrderDetails.Jan) Type="AggregateType.Sum" >

                    <GroupFooterTemplate>

                        @{

                            var aggregate = (context as AggregateTemplateContext);

                            <div>

                                <p>Sum: @aggregate.Sum</p>

                            </div>

                        }

                    </GroupFooterTemplate>

                </GridAggregateColumn>

                <GridAggregateColumn Field=@nameof(OrderDetails.Jan) Type="AggregateType.Sum">

                    <FooterTemplate>

                        @{

                            var aggregate = (context as AggregateTemplateContext);

                            <div>

                                <p>Sum: @aggregate.Sum</p>

                            </div>

                        }

                    </FooterTemplate>

                </GridAggregateColumn>

                <GridAggregateColumn Field=@nameof(OrderDetails.Jan) Type="AggregateType.Average" >

                    <GroupCaptionTemplate>

                        @{

                            var aggregate = (context as AggregateTemplateContext);

                            <div>

                                <p>Average: @aggregate.Average</p>

                            </div>

                        }

                    </GroupCaptionTemplate>

                </GridAggregateColumn>

            </GridAggregateColumns>

        </GridAggregate>

    </GridAggregates>

         <GridColumns>

                <GridColumn Field=@nameof(OrderDetails.CostHead) HeaderText="CostHead" TextAlign="TextAlign.Left" Width="150"></GridColumn>

                <GridColumn Field=@nameof(OrderDetails.ItemData) HeaderText="ItemData" TextAlign="TextAlign.Left" Width="150"></GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Jan) HeaderText="Jan" Format="C2" TextAlign="TextAlign.Left" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected] @ref="NumericBox" ></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Feb) HeaderText="Feb" Format="C2" TextAlign="TextAlign.Left" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Mar) HeaderText="Mar" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.NumericEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Appril) HeaderText="Appril" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.NumericEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.May) HeaderText="Appril" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.NumericEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Jun) HeaderText="Jun" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.NumericEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Jul) HeaderText="Jul" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.NumericEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Aug) HeaderText="Aug" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.NumericEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Sep) HeaderText="Sep" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.NumericEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Oct) HeaderText="Oct" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.DefaultEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Nov) HeaderText="Nov" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.DefaultEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(OrderDetails.Dec) HeaderText="Dec" Format="C2" TextAlign="TextAlign.Left" EditType="EditType.DefaultEdit" Width="150">

                    <Template>

                        @{

                            var con = context as OrderDetails;

                            <SfNumericTextBox TValue="decimal?" @[email protected]></SfNumericTextBox>

                        }

                    </Template>

                </GridColumn>

            </GridColumns>

        </SfGrid>

    </div>

</div>

@code {

    SfGrid<OrderDetails> GridDtls { get; set; }

    public List<OrderDetails> order = new List<OrderDetails>();

    public string[] GroupedColumns = new string[] { "CostHead" };

    decimal? TotalFromSaveEvent { get; set; } = 0;

     SfNumericTextBox<decimal?> NumericBox { get; set; }

    protected override void OnInitialized()

    {

        order.Add(new OrderDetails { CostHead = "Administrator", ItemData = "Licence1", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0});

        order.Add(new OrderDetails { CostHead = "Administrator", ItemData = "Licence2", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0 });

        order.Add(new OrderDetails { CostHead = "Administrator", ItemData = "Licence3", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0 ,Total=0 });

        order.Add(new OrderDetails { CostHead = "Location Office", ItemData = "Location1", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0 });

        order.Add(new OrderDetails { CostHead = "Location Office", ItemData = "Location2", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0 ,Total=0});

        order.Add(new OrderDetails { CostHead = "Location Office", ItemData = "Location3", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0 });

        order.Add(new OrderDetails { CostHead = "Location Office", ItemData = "Location4", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0 });

        order.Add(new OrderDetails { CostHead = "Location Office", ItemData = "Location5", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0 });

        order.Add(new OrderDetails { CostHead = "Location Office", ItemData = "Location6", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0});

        order.Add(new OrderDetails { CostHead = "Location Office", ItemData = "Location7", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0 ,Total=0});

        //order.Add(new OrderDetails { CostHead = "Marketting", ItemData = "Marketting1", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0 });

        //order.Add(new OrderDetails { CostHead = "Marketting", ItemData = "Marketting2", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0 ,Total=0});

        //order.Add(new OrderDetails { CostHead = "Marketting", ItemData = "Marketting3", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0,Total=0});

        //order.Add(new OrderDetails { CostHead = "Marketting", ItemData = "Marketting4", BudgetYear = "2022", Jan = 0, Feb = 0, Mar = 0, Appril = 0, May = 0, Jun = 0, Jul = 0, Aug = 0, Sep = 0, Oct = 0, Nov = 0, Dec = 0 ,Total=0});

    }

    public void BeginHandler(ActionEventArgs<OrderDetails> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

        {

           args.Data.Total = NumericBox.Value;

        }

    }

    public void ActionCompleteHandler(ActionEventArgs<OrderDetails> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

        {

            TotalFromSaveEvent = args.Data.Jan;

        }

    }

    public class OrderDetails

    {

        public string CostHead { get; set; } = "";

        public string ItemData { get; set; } = "";

        public string BudgetYear { get; set; } = "2022";

        public decimal? Jan { get; set; } = 0;

        public decimal? Feb { get; set; } = 0;

        public decimal? Mar { get; set; } = 0;

        public decimal? Appril { get; set; } = 0;

        public decimal? May { get; set; } = 0;

        public decimal? Jun { get; set; } = 0;

        public decimal? Jul { get; set; } = 0;

        public decimal? Aug { get; set; } = 0;

        public decimal? Sep { get; set; } = 0;

        public decimal? Oct { get; set; } = 0;

        public decimal? Nov { get; set; } = 0;

        public decimal? Dec { get; set; } = 0;

        public decimal? Total { get; set; } = 0;

    }

}

[Sarveswaran Palani]

Hi Pradeep,

We'll close this duplicate forum. Kindly follow the Forum-177439 for the further update.

Regards,

Sarveswaran PK