1. Home
  2. Forum
  3. Blazor
  4. Data Grid input groupwise screen

Data Grid input groupwise screen

I need to create an input screen in a grid that grid has group wise column that clams have an input text box .I need to directly input data into the GroupWise grid after that I need to all data need to save one time .The button will be outside grid Do you have example I have attached sample excel sheet .Your immediate response will be highly appreciable


Attachment: image_4cb807b3.rar

10 Replies
SG Suganya Gopinath Syncfusion Team September 14, 2022 12:06 PM UTC

Hi Pradeep,

Before our team could respond, this forum appears to have been closed on your end. Please let us know if it was by mistake or if the problem has been fixed.

Regards,

Suganya Gopinath.


PR pradeep September 14, 2022 12:21 PM UTC

Dear Suganya Gopinath.

I continue to have faxing issues. Please assist me. I simply looked over your document online and couldn't find one like that. I'll give you a sample of code below. I need to enter a value into a text box while also entering a group's total and the summer's footer Total need to change . I need to save the data into the database once the input process is complete. Your prompt response will be greatly appreciated.


@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" EnableLazyLoading="true" ></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="300"></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;


    }

}



SP Sarveswaran Palani Syncfusion Team September 14, 2022 08:45 PM UTC

Hi Pradeep,

Sorry for the Inconvenience.

We are currently Validating the reported query at our end, and we will update the further details within two business days. Until then we appreciate your patience.

Regards,

Sarveswaran PK


SP Sarveswaran Palani Syncfusion Team September 19, 2022 04:37 AM UTC

Hi Pradeep,


Sorry for the delay and inconvenience caused.


We examined your query and shared a code snippet based on which we found that you used a template column to display the input data. We would like to inform you that template columns are used to display the customized records to the Grid Column, and we were unable to perform CRUD operation in it. And also, it is necessary to enable IsPrimaryKey to perform CRUD operation, but you missed to include in the shared code snippet. These are the reasons you are facing an issue. Kindly refer the attached sample and shared documentation link for your reference


Reference: https://blazor.syncfusion.com/documentation/datagrid/editing

              https://blazor.syncfusion.com/documentation/datagrid/templates


Kindly get back to us if you have any further queries.


Regards,

Sarveswaran PK


Attachment: SfGridInputData_1bf18ba5.zip

PR pradeep September 19, 2022 07:37 AM UTC

I understand from the above Mail that we are not permitted to utilize a "Template" Only use the input screen's column for display purposes. If you wish to edit the data in the example below, use the

 grid column. Field=@nameof(OrderDetails.Jan) HeaderText="Jan" Format="C2" EditType="EditType.NumericEdit" TextAlign="TextAlign.Left" Width="150">

</GridColumn>


I need to show all the group coumn  sum need to show single row same way all the footer sum should display single row


SP Sarveswaran Palani Syncfusion Team September 20, 2022 06:34 PM UTC

Hi Pradeep,


Thanks for contacting Syncfusion support again.


We have analyzed your query and suggest you to use EditTemplate feature of grid to update the changed value from the CRUD operation. Kindly refer the attached link for your reference.


Reference: https://blazor.syncfusion.com/documentation/datagrid/editing#perform-crud-operation-for-complex-object-using-edittemplate


Kindly get back to us if we misunderstood your query.


Regards,

Sarveswaran PK


PR pradeep September 21, 2022 09:18 AM UTC

Dear   Sarveswaran PK

I'm grateful for your help. But I have other requirements. I need to enter a value into a text field without clicking in a grid with within grids. If we are using the Edit template, we must first click before we can enter any data into the Textbox. I also need to demonstrate Grid GroupWise. When I enter text, the system should display both the grand total  in the footer  and the group total in the Group footer . Do you have any examples of this on hand?


Attachment: image_6561013d.rar

SP Sarveswaran Palani Syncfusion Team September 22, 2022 05:12 PM UTC

Hi Pradeep,


Thanks for the update.


We have analyzed your query and suspect that you want to enter the input without click the edit textbox and group total in the footer. Currently, we have didn’t have any samples at present. We’ll create and share the sample within two business days.


Until then we appreciate your patience.


Regards,

Sarveswaran PK


PR pradeep September 26, 2022 08:12 AM UTC

Dear Team,


Waiting for your Response 


SP Sarveswaran Palani Syncfusion Team September 27, 2022 05:04 PM UTC

Hi Pradeep,


Sorry for the delay and inconvenience caused.


As per last update, We created sample based on your requirement using GroupFooter Template feature of Grid. And We would like to inform you that CRUD operation in Grid will take place only based on the unique PrimaryKey column value. So IsPrimaryKey property must be enabled to any one of the unique valued columns defined in the grid. Only based on primary key value, the CRUD will be properly performed in Grid. Kindly refer the attached sample and shared documentation link for your reference


Reference: https://blazor.syncfusion.com/documentation/datagrid/aggregates#group-and-caption-aggregate


Kindly get back to us if you have any further queries


Regards,

Sarveswaran PK



Attachment: SfGridInputData_(Modified)_b50ba86d.zip

Loader.
Up arrow icon