MVC Core Kendo Widgets

[Gaysorn]

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.

[Stoyan]

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

 

[Gaysorn]

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]

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.