I have columns Teach%, Sch%, Cit%. My end column is Total%. My client does not want to add up the number manually and enter it as data. They want a row by row total of Teach%, Sch%,CIt% to be summed up in calculated Field Total%.
How can this be accomplished?
Thank you.
I have attached pic of my grid:
7 Answers, 1 is accepted
0
Hello Steven,
There are several ways to achieve the desired behavior and the exact approach depends on what exactly you are trying to achieve. Could you please clarify if the "Total" field should be displayed only on the client side or it's a regular field that you just need to fill automatically? Also please clarify if the field should be calculated / filled immediately after change in the depending fields or after for example pressing a custom button?
Regards,
Vladimir Iliev
Telerik
There are several ways to achieve the desired behavior and the exact approach depends on what exactly you are trying to achieve. Could you please clarify if the "Total" field should be displayed only on the client side or it's a regular field that you just need to fill automatically? Also please clarify if the field should be calculated / filled immediately after change in the depending fields or after for example pressing a custom button?
Regards,
Vladimir Iliev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Steven
Top achievements
Rank 1
answered on 10 Mar 2015, 04:37 PM
Its a regular field that I just need to calculated/filled automatically. It needs to be calculated after change in the Teach%, Sch%, Cit% columns.
0
Hi Steven,
You can use the "Change" event of the Grid DataSource to track for changes in Teach%, Sch%, Cit% columns. When the event is triggered you can recalculate the Total% column as demonstrated in the following example:
Regards,
Vladimir Iliev
Telerik
You can use the "Change" event of the Grid DataSource to track for changes in Teach%, Sch%, Cit% columns. When the event is triggered you can recalculate the Total% column as demonstrated in the following example:
function
onChange(e) {
if
(e.action ===
"itemchange"
) {
if
(e.field ===
"OrderTotal"
|| e.field ===
"TransactionFee"
) {
var
model = e.items[0];
model.set(
"CalculatedTotal"
, model.OrderTotal + model.TransactionFee);
}
}
}
Regards,
Vladimir Iliev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Steven
Top achievements
Rank 1
answered on 12 Mar 2015, 03:51 PM
This exactly what I want! :)
How do you "You can use the "Change" event of the Grid DataSource to track for changes" ?
I put here and I can't get it to fire.
@(Html.Kendo().Grid<DanceSupport.Models.LoadingViewModel>()
// @(Html.Kendo().Grid(Model)
.Name("FacultyLoading")
.Events(e => e.Edit("onEdit").Change("onChange"))
.Columns(c =>
{
c.Command(command => { command.Edit(); command.Destroy(); });
c.Bound(p => p.YearTerm).Visible(false);
c.Bound(p => p.RouteID).Visible(false);
c.Bound(p => p.Responsibility).Width(350).EditorTemplateName("ResponsibilityEditor").FooterTemplate(@<text>Totals</text>);
c.Bound(p => p.Notes).Width(300);
c.Bound(p => p.LoadFactor).Visible(false);
c.Bound(p => p.LoadPrcnt).Format("{0:p1}").Title("Teach %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
c.Bound(p => p.ScholarshipPrcnt).Format("{0:p1}").Title("Sch. %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
c.Bound(p => p.CitizenshipPrcnt).Format("{0:p1}").Title("Cit. %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
c.Bound(p => p.TotalLoad).Format("{0:p1}").Title("Total %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
})
.AutoBind(false)
.Editable(e => e.Mode(GridEditMode.InLine))
.ToolBar(t => t.Create())
.DataSource(dataSource => dataSource
.Ajax()
// .ServerOperation(false)
.Aggregates(ag => { ag.Add(p => p.LoadPrcnt).Sum(); ag.Add(p => p.ScholarshipPrcnt).Sum(); ag.Add(p => p.CitizenshipPrcnt).Sum();ag.Add(p => p.TotalLoad).Sum();})
//
.Model(m => { m.Id(p => p.LID); })
.Read(read => read.Action("Loading_Read", "FacultyLoadings"))
.Update(u => u.Action("Loading_Update", "FacultyLoadings"))
.Create(c => c.Action("Loading_Create", "FacultyLoadings"))
.Destroy(x => x.Action("Loading_Destroy", "FacultyLoadings"))
)
)
Here's the change script:
function onChange(e) {
alert('e.action = ' + e.action);
if (e.action === "itemchange") {
alert('e.action equals itemchange');
if (e.field === "LoadPrcnt" || e.field === "ScholarshipPrcnt" || e.field === "CitizenshipPrcnt"){
var model = e.items[0];
model.set("TotalLoad", model.LoadPrcnt + model.ScholarshipPrcnt + model.CitizenshipPrcnt);
}
}
}
How do you "You can use the "Change" event of the Grid DataSource to track for changes" ?
I put here and I can't get it to fire.
@(Html.Kendo().Grid<DanceSupport.Models.LoadingViewModel>()
// @(Html.Kendo().Grid(Model)
.Name("FacultyLoading")
.Events(e => e.Edit("onEdit").Change("onChange"))
.Columns(c =>
{
c.Command(command => { command.Edit(); command.Destroy(); });
c.Bound(p => p.YearTerm).Visible(false);
c.Bound(p => p.RouteID).Visible(false);
c.Bound(p => p.Responsibility).Width(350).EditorTemplateName("ResponsibilityEditor").FooterTemplate(@<text>Totals</text>);
c.Bound(p => p.Notes).Width(300);
c.Bound(p => p.LoadFactor).Visible(false);
c.Bound(p => p.LoadPrcnt).Format("{0:p1}").Title("Teach %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
c.Bound(p => p.ScholarshipPrcnt).Format("{0:p1}").Title("Sch. %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
c.Bound(p => p.CitizenshipPrcnt).Format("{0:p1}").Title("Cit. %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
c.Bound(p => p.TotalLoad).Format("{0:p1}").Title("Total %")
.ClientFooterTemplate("#=kendo.format('{0:p1}', sum)#");
})
.AutoBind(false)
.Editable(e => e.Mode(GridEditMode.InLine))
.ToolBar(t => t.Create())
.DataSource(dataSource => dataSource
.Ajax()
// .ServerOperation(false)
.Aggregates(ag => { ag.Add(p => p.LoadPrcnt).Sum(); ag.Add(p => p.ScholarshipPrcnt).Sum(); ag.Add(p => p.CitizenshipPrcnt).Sum();ag.Add(p => p.TotalLoad).Sum();})
//
.Model(m => { m.Id(p => p.LID); })
.Read(read => read.Action("Loading_Read", "FacultyLoadings"))
.Update(u => u.Action("Loading_Update", "FacultyLoadings"))
.Create(c => c.Action("Loading_Create", "FacultyLoadings"))
.Destroy(x => x.Action("Loading_Destroy", "FacultyLoadings"))
)
)
Here's the change script:
function onChange(e) {
alert('e.action = ' + e.action);
if (e.action === "itemchange") {
alert('e.action equals itemchange');
if (e.field === "LoadPrcnt" || e.field === "ScholarshipPrcnt" || e.field === "CitizenshipPrcnt"){
var model = e.items[0];
model.set("TotalLoad", model.LoadPrcnt + model.ScholarshipPrcnt + model.CitizenshipPrcnt);
}
}
}
0
Hi Steven,
The events of the DataSource are available under the DataSource option as demonstrated below:
Regards,
Vladimir Iliev
Telerik
The events of the DataSource are available under the DataSource option as demonstrated below:
@(Html.Kendo().Grid<DanceSupport.Models.LoadingViewModel>()
.Name(
"FacultyLoading"
)
//...
.DataSource(dataSource => dataSource
.Ajax()
//the events of the dataSource are available in the dataSource builder:
.Events(e => e.Change(
"onChange"
))
Regards,
Vladimir Iliev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Steven
Top achievements
Rank 1
answered on 16 Mar 2015, 05:24 PM
Could you attach a sample project that performs this function. I cannot get the code snippet to work.
Thank you.
Thank you.
0
Accepted
Hello Steven,
Please check the attached example which shows how to use the DataSource "Change" event.
Regards,
Vladimir Iliev
Telerik
Please check the attached example which shows how to use the DataSource "Change" event.
Regards,
Vladimir Iliev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.