MVC Core Kendo Widgets

1 Answer 29 Views
Grid
Gaysorn
Top achievements
Rank 1
Iron
Gaysorn asked on 10 Sep 2021, 05:02 PM

Hi,

I'm working on develop web application using MVC Core. One of the view will contain around 90 accounts that allow users to enter the number in the 2 years columns of Labor and other (total of 4 columns) when users enter the number in one of column, it should add the labor and other amount to total for that year and update the sub category group (may contain up to 10 groups) plus sum of footer for grand total for all groups.

I try to use Kendo Grid (GridEditMode.InCell) to do the job and write some codes to save to database. The users want to have Total and sub total change as soon as they are changed the number plus have the  all text box display when they load the page. Do you have any recommendation what is the better tools or widgets to use to handle all these requirement? I attached the sample of view layout below.

Thank you for your help.

1 Answer, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 15 Sep 2021, 04:39 PM | edited on 15 Sep 2021, 04:40 PM

Hi Gaysorn,

To display a Group footer in the Grid Component:

  1. Configure the Aggregates property of the Grid's DataSource
  2. Disable the .ServerOperations of the DataSource to allow the calculation to be automatically on the client-side
  3. Add a ClientGroupFooterTemplate to the desired column
    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .ServerOperation(false)
                        .Read(read => read.Action("Orders_Read", "Grid"))
                        .Create(create => create.Action("Orders_Create", "Grid"))
                        .Update(update => update.Action("Orders_Update", "Grid"))
                        .Destroy(destroy => destroy.Action("Orders_Destroy", "Grid"))
                        .PageSize(10)
                        .Aggregates(aggregate =>
                        {
                            aggregate.Add(p => p.Freight).Count().Sum();
                        })
                        .Group(groups => groups.Add(p => p.OrderDate))
                    )

 

columns.Bound(p => p.Freight).ClientGroupFooterTemplate(" Sum of Freight: #: sum # ");

 

Then to programmatically change a value of the column in the same row that has been edited apply the following approach:

  1. Handle the Edit event of the Grid
  2. Get the e.model which represents the DataItem and handle its change event to determine which is the edited cell.
  3. To set the value of the DataItem use the set method of the e.model object

 

.Events(e => e.Edit("onEdit"))

 

 

 function onEdit(e) {
        e.model.one("change", function (ev) {
            if (ev.field == "Freight") {
                e.model.set("ShipCity","Rotterdam")
            }
        });
    }
Please review the following screen capture that showcases the behavior of the above.

I remain open, if further questions arise.

Regards,
Stoyan
Progress Telerik

 

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Gaysorn
Top achievements
Rank 1
Iron
commented on 16 Sep 2021, 06:31 PM

Hi Stoyan,

Thank you for your answer. Can it be done without hitting save?

We will have more than 50 rows to allow the users to make changes and we do not want users to hit save every time they make changes. Thanks.

 

Stoyan
Telerik team
commented on 17 Sep 2021, 01:39 PM

Hi Gaysorn,

Autosaving upon changes in the Grid can be achieved with the AutoSync configuration property of the DataSource.
 .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .AutoSync(true)
                    .ServerOperation(false)
                    .Model( model => {
                        model.Id(p => p.OrderID);
                    })
                    .Read(read => read.Action("Orders_Read", "Grid"))
                    .Create(create => create.Action("Orders_Create", "Grid"))
                    .Update(update => update.Action("Orders_Update", "Grid"))
                    .Destroy(destroy => destroy.Action("Orders_Destroy", "Grid"))
                    .PageSize(10)
                )
I hope this information is useful.
Tags
Grid
Asked by
Gaysorn
Top achievements
Rank 1
Iron
Answers by
Stoyan
Telerik team
Share this question
or