change group header dynamically in kendo ui mvc - asp.net-mvc

Question

I am using kendo ui with asp.net mvc. I want to change the group header coloumn dynamically. Please suggest solution.My code is shown below.
<div id="dvPayrollReportGrid" class="kendo-responsive-grid-content">
#(Html.Kendo().Grid<CyberPayBO.Models.PayrollReportModel>()
.Name("gridpayrollreport")
.Columns(columns =>
{
columns.Bound(payroll => payroll.CompanyCode).Title("").Hidden(true).Filterable(false).ClientTemplate("<input type='hidden' id='hdnCompanyCode' value='#=CompanyCode#'>");
columns.Bound(payroll => payroll.CompanyCode).Title("Action").Filterable(false).ClientTemplate("View || <span class='CompanyNameLink DeleteLink' onclick='DeletePayrollReport(this.id)' id='#=ID#'>Del</span> | <img src='../Images/pdf.gif' id='PayrollImage'/>").Sortable(false);
columns.Bound(payroll => payroll.CheckDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.FromDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.ToDate).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.StoredFile).ClientTemplate("#if (StoredFile.toLowerCase().indexOf('.pdf')>-1) {#"
+ " "
+ "#} else { #" + ""
+ "# } #" + "#=StoredFile#");
columns.Bound(payroll => payroll.CheckDate).Title("Payroll Reports").Hidden(Convert.ToBoolean(PayrollReportColumn)).ClientTemplate("<span style='color:red'>Payroll Report</span>");
columns.Bound(payroll => payroll.CreatedDate).Title("Created At").Format("{0:dd/MM/yyyy HH:mm tt}");
})
.Pageable(pageable => pageable
.Messages(messages => messages.Display("Payroll Reports {0} - {1} of {2}"))
)
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(PageSize)
.Read(read => read.Action("PayrollReport_Read", "PayrollReport"))
.Group(groups =>
{
groups.Add(payroll => payroll.CompanyName);
})
)
)
</div>
i am grouping by the company name, and by default it is giving me company name as header in result. I want the header to be dynamic and display the company code instead.I am getting ouput as CompanyName: AAA TEST 1 in header, but i want ouput as 004:AAA Test 1., where 004 is company code.

Answer 1

I found the solution to it by using ClientGroupHeader Template
columns.Bound(payroll => payroll.Company).ClientGroupHeaderTemplate("#=value#").Hidden(true);
Here company is combination of CompanyCode and CompanyName and which i bind from repository. Finally grouping on Company gives me the desired result.

Answer 2

To Achieve this you need to return a new column in your backend With the class of the data you want to group by since Kendo doesn't let you group by anonymous type yet. the End the end of your Action will look something like this
...
var query = db.PayrollReportModel.Select(payroll=> new PayrollReportModel()
{
payroll.CompanyCode
...
grouper = new GrouperClass()
{
CompanyCode = payroll.CompanyCode,
CompanyName = payroll.CompanyName
}
});
DataSourceResult result = await query.ToDataSourceResultAsync(request);
}
For your View
<div id="dvPayrollReportGrid" class="kendo-responsive-grid-content">
#(Html.Kendo().Grid<CyberPayBO.Models.PayrollReportModel>()
.Name("gridpayrollreport")
.Columns(columns =>
{
columns.Bound(payroll => payroll.grouper).Hidden(true).ClientGroupHeaderTemplate("#=value.CompanyCode#-#=value.CompanyName#");
columns.Bound(payroll => payroll.CompanyCode).Title("Action").Filterable(false).ClientTemplate("View || <span class='CompanyNameLink DeleteLink' onclick='DeletePayrollReport(this.id)' id='#=ID#'>Del</span> | <img src='../Images/pdf.gif' id='PayrollImage'/>").Sortable(false);
columns.Bound(payroll => payroll.CheckDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.FromDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.ToDate).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.StoredFile).ClientTemplate("#if (StoredFile.toLowerCase().indexOf('.pdf')>-1) {#"
+ " " + "#} else { #" + "" + "# } #" + "#=StoredFile#");
columns.Bound(payroll => payroll.CheckDate).Title("Payroll Reports").Hidden(Convert.ToBoolean(PayrollReportColumn)).ClientTemplate("<span style='color:red'>Payroll Report</span>");
columns.Bound(payroll => payroll.CreatedDate).Title("Created At").Format("{0:dd/MM/yyyy HH:mm tt}");
})
.Pageable(pageable => pageable
.Messages(messages => messages.Display("Payroll Reports {0} - {1} of{2}"))
)
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(PageSize)
.Read(read => read.Action("PayrollReport_Read", "PayrollReport"))
.Group(groups =>
{
groups.Add(payroll => payroll.grouper);
})
)
)
</div>
Hope this helps