Hello,
in C# I've got 2 ViewModels:
```
public class TestListViewModel
{
public string Param { get; set; }
public IEnumerable<TestViewModel> Counts { get; set; }
}
```
```
public class TestViewModel
{
public string Name { get; set; }
public int Count { get; set; }
}
```
now I will pass IEnumerable<TestListViewModel> as model to grid. How can I get the result like this: https://demos.telerik.com/aspnet-mvc/grid/aggregates?
I don't need to aggregate any data because it's already done. I just need to fill this grid somehow.
It's my local data, so the Grid will starts with:
```
@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns => (?))
(...)
)
```

Another 'Invalid Template' error ... there are tons out there, and I thought I'd find my answer, but no.
The hierarchy (nested) grid below works great until I uncomment line 58 or 67. Then I get the invalid template error.
I've escaped my hash symbols on line 52 as I read in a ton of other posts.
Does anyone spot anything amiss???
TIA
001.@(Html.Kendo().Grid<OrgViewModel>()002. .Name("Grid")003. .Columns(columns =>004. {005. columns.Bound(e => e.OrgType).Hidden(true);006. columns.Bound(e => e.OrgId).Hidden(true);007. columns.Bound(e => e.OrganizationType).Title("Partner or Charter");008. columns.Bound(e => e.OrgName).Title("Name");009. })010. .Filterable(filterable => filterable011. .Extra(false)012. .Operators(operators => operators013. .ForString(str => str.Clear()014. .StartsWith("Starts with")015. .IsEqualTo("Is equal to")016. .IsNotEqualTo("Is not equal to")017. ))018. )019. .Groupable()020. .Pageable(m => m.PageSizes(new[] { "20", "50", "100", "All" }))021. .Resizable(resizable => resizable.Columns(true))022. .Sortable()023. .Scrollable(s => s.Enabled(true))024. .ClientDetailTemplateId("template")025. .HtmlAttributes(new { style = "height:850px;" })026. .DataSource(dataSource => dataSource027. .Ajax()028. .PageSize(20)029. .Read(read => read.Action("Orgs_Read", "FiscalContacts"))030. .Sort(sort =>031. {032. sort.Add(x => x.OrgName);033. sort.Add(x => x.OrgType);034. })035. )036. .Events(events => events.DataBound("dataBound"))037. )038. 039.@section scripts {040.<script id="template" type="text/kendo-tmpl">041. @(Html.Kendo().Grid<FiscalContactViewModel>()042. .Name("Grid_#=OrgType#_#=OrgId#") // template expression, to be evaluated in the master context043. .Columns(columns =>044. {045. //columns.Command(command => { command.Edit(); }).Width(250);046. columns.Bound(o => o.Id).Hidden(true);047. columns.Bound(o => o.SalesforceId).Hidden(true);048. columns.Bound(o => o.LastName);049. columns.Bound(o => o.FirstName);050. columns.Bound(o => o.Title);051. columns.Bound(o => o.Email);052. columns.Bound(x => x.ExecComm).Title("Exec").Width(75).Filterable(true).ClientTemplate("\\#=ExecComm ? 'Yes': ''\\#").HtmlAttributes(new { style = "text-align:center" });053. columns.Bound(o => o.Roles);054. columns.Bound(o => o.FiscalPermissions).Title("Perms").Width(75);055. })056. .ToolBar(tools =>057. {058. //tools.Create();059. tools.Excel();060. })061. .Excel(excel => excel062. .FileName("Fiscal Contacts.xlsx")063. .Filterable(true)064. .AllPages(true)065. .ProxyURL(Url.Action("Excel_Export_Save", "FiscalContacts"))066. )067.
001.@(Html.Kendo().Grid<OrgViewModel>()002. .Name("Grid")003. .Columns(columns =>004. {005. columns.Bound(e => e.OrgType).Hidden(true);006. columns.Bound(e => e.OrgId).Hidden(true);007. columns.Bound(e => e.OrganizationType).Title("Partner or Charter");008. columns.Bound(e => e.OrgName).Title("Name");009. })010. .Filterable(filterable => filterable011. .Extra(false)012. .Operators(operators => operators013. .ForString(str => str.Clear()014. .StartsWith("Starts with")015. .IsEqualTo("Is equal to")016. .IsNotEqualTo("Is not equal to")017. ))018. )019. .Groupable()020. .Pageable(m => m.PageSizes(new[] { "20", "50", "100", "All" }))021. .Resizable(resizable => resizable.Columns(true))022. .Sortable()023. .Scrollable(s => s.Enabled(true))024. .ClientDetailTemplateId("template")025. .HtmlAttributes(new { style = "height:850px;" })026. .DataSource(dataSource => dataSource027. .Ajax()028. .PageSize(20)029. .Read(read => read.Action("Orgs_Read", "FiscalContacts"))030. .Sort(sort =>031. {032. sort.Add(x => x.OrgName);033. sort.Add(x => x.OrgType);034. })035. )036. .Events(events => events.DataBound("dataBound"))037. )038. 039.@section scripts {040.<script id="template" type="text/kendo-tmpl">041. @(Html.Kendo().Grid<FiscalContactViewModel>()042. .Name("Grid_#=OrgType#_#=OrgId#") // template expression, to be evaluated in the master context043. .Columns(columns =>044. {045. //columns.Command(command => { command.Edit(); }).Width(250);046. columns.Bound(o => o.Id).Hidden(true);047. columns.Bound(o => o.SalesforceId).Hidden(true);048. columns.Bound(o => o.LastName);049. columns.Bound(o => o.FirstName);050. columns.Bound(o => o.Title);051. columns.Bound(o => o.Email);052. columns.Bound(x => x.ExecComm).Title("Exec").Width(75).Filterable(true).ClientTemplate("\\#=ExecComm ? 'Yes': ''\\#").HtmlAttributes(new { style = "text-align:center" });053. columns.Bound(o => o.Roles);054. columns.Bound(o => o.FiscalPermissions).Title("Perms").Width(75);055. })056. .ToolBar(tools =>057. {058. //tools.Create();059. tools.Excel();060. })061. .Excel(excel => excel062. .FileName("Fiscal Contacts.xlsx")063. .Filterable(true)064. .AllPages(true)065. .ProxyURL(Url.Action("Excel_Export_Save", "FiscalContacts"))066. )067. //.Editable(editable => editable.Mode(GridEditMode.InCell))068. .DataSource(dataSource => dataSource069. .Ajax()070. .PageSize(10)071. .Read(x => x.Action("ListContacts", "FiscalContacts", new { orgType = "#=OrgType#", orgId = "#=OrgId#" }))072. .Create(x => x.Action("FiscalContacts_Create", "FiscalContacts", new { orgType = "#=OrgType#", orgId = "#=OrgId#" }))073. .Update(x => x.Action("FiscalContacts_Update", "FiscalContacts"))074. .Model(model =>075. {076. model.Id(x => x.Id);077. model.Field(x => x.Id).Editable(false);078. model.Field(x => x.FiscalPermissions).Editable(false);079. }).Sort(sort =>080. {081. sort.Add(x => x.LastName);082. sort.Add(x => x.FirstName);083. })084. )085. .Filterable(filterable => filterable086. .Extra(false)087. .Operators(operators => operators088. .ForString(str => str.Clear()089. .StartsWith("Starts with")090. .IsEqualTo("Is equal to")091. .IsNotEqualTo("Is not equal to")092. ))093. )094. .Groupable()095. .HtmlAttributes(new { style = "height:600px;" })096. .Pageable(m => m.PageSizes(new[] { "20", "50", "100", "All" }))097. .Resizable(resizable => resizable.Columns(true))098. .Sortable()099. .Scrollable(s => s.Enabled(true))100. .ToClientTemplate()101. )102.</script>103. <script>104. function dataBound() {105. this.expandRow(this.tbody.find('tr.k-master-row').first());106. }107.</script>108.}.Editable(editable => editable.Mode(GridEditMode.InCell))068. .DataSource(dataSource => dataSource069. .Ajax()070. .PageSize(10)071. .Read(x => x.Action("ListContacts", "FiscalContacts", new { orgType = "#=OrgType#", orgId = "#=OrgId#" }))072. .Create(x => x.Action("FiscalContacts_Create", "FiscalContacts", new { orgType = "#=OrgType#", orgId = "#=OrgId#" }))073. .Update(x => x.Action("FiscalContacts_Update", "FiscalContacts"))074. .Model(model =>075. {076. model.Id(x => x.Id);077. model.Field(x => x.Id).Editable(false);078. model.Field(x => x.FiscalPermissions).Editable(false);079. }).Sort(sort =>080. {081. sort.Add(x => x.LastName);082. sort.Add(x => x.FirstName);083. })084. )085. .Filterable(filterable => filterable086. .Extra(false)087. .Operators(operators => operators088. .ForString(str => str.Clear()089. .StartsWith("Starts with")090. .IsEqualTo("Is equal to")091. .IsNotEqualTo("Is not equal to")092. ))093. )094. .Groupable()095. .HtmlAttributes(new { style = "height:600px;" })096. .Pageable(m => m.PageSizes(new[] { "20", "50", "100", "All" }))097. .Resizable(resizable => resizable.Columns(true))098. .Sortable()099. .Scrollable(s => s.Enabled(true))100. .ToClientTemplate()101. )102.</script>103. <script>104. function dataBound() {105. this.expandRow(this.tbody.find('tr.k-master-row').first());106. }107.</script>108.}I am experiencing an issue where, using Internet Explorer 11, the animation containers on certain components do not appear in alignment with the component they are originating from. For the most part, what this means is the animations appear off to the left, but sometimes, animations also open above where they would open below on Edge or Chrome. Affected components are dropdown list in a grid's popup editor and filter menus appearing after a filter icon on a grid column is pressed.
Identical issue: https://stackoverflow.com/questions/60257190/alignment-issue-with-kendo-ui-dropdown-list-in-ie11
It seems like resolution has some influence on this because in some cases, the issue goes away when the page is very zoomed out (though it isn't very comfortable for the user at this point).

Hello
I am trying to implement kendo grid,
I see all the data in grid but when i move to next page all the data is deseapers.
This is my controller code
public async Task<ActionResult> TodaysSalesList([DataSourceRequest] DataSourceRequest request, DateTime? fileDate, int? pageSize, int? pageNo, int? loanCustomerId)
{
PagedResults<VmpLoanSalesVM> resultloans;
try
{
var startDate = fileDate.GetValueOrDefault().Date;
var dic = new DualControlDictionary
{
{ "date", startDate.Date.ToString() },
{ "loanCustomerId", loanCustomerId.ToString() }
};
resultloans = await _dualControlService.GetData(dic);
var jsonRes = Json(resultloans.Results.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
jsonRes.MaxJsonLength = int.MaxValue;
return jsonRes;
}
catch (Exception e)
{
Log.Error(e);
return Json(new
{
success = false
}, JsonRequestBehavior.AllowGet);
}
}
I have also tried return the data like this
var jsonRes = Json( new {Data=resultloans.Results.ToDataSourceResult(request),Total=esultloans.ResultsCount()}, JsonRequestBehavior.AllowGet);
jsonRes.MaxJsonLength = int.MaxValue;
return jsonRes;
But it doesn't help
See attched file my grid cshtml
Hello ,
I'm trying to filter a grid column having DateTime value , for eg - 12/21/2020 12:01:47 PM . and below my implementation .
This works for the first time only and if we open the filter menu again, the filter operator shows as blank (It should have the operator as Equals) and upon selecting a new value from operator list ,it throws JS error at d.filters[0].operator as d.filters[0] is coming as undefined.
Grid filter settings-
.Events(x => x.FilterMenuInit("filterDateWithoutTimeTest"))
.Filterable(f => f.Operators(operators => operators.ForDate(dt => dt.Clear()
.IsEqualTo("Equals")
.IsLessThan("EarlierThan")
.IsGreaterThan("LaterThan")
)))
function filterDateWithoutTimeTest(e) {
var grid = e.sender;
if (e.sender.dataSource.options.schema.model.fields[e.field].type === "date") {
e.preventDefault();
var columnTobeFiltered = e.field;
e.container.find('button[type="submit"]').click(function (e) {
var existingFilters = grid.dataSource.filter();
var newFilter = [];
var filterType = $(this.form).find($("select[data-role=dropdownlist]")).eq(0).val();
if (filterType == "eq") {
//gets the datePicker input date
var selectedDate = $(this.form).find($("input[data-role=datepicker]")).eq(0).val();
// //create a filter
grid.dataSource.filter({
field: columnTobeFiltered,
//create custom filter operator
operator: function (fieldDate) {
var fieldDate2 = new Date(fieldDate);
var parsedSelectedDate = kendo.parseDate(selectedDate);
//parse the field date in order to ignore the time
var parsedFieldDate = new Date(fieldDate2.getFullYear(), fieldDate2.getMonth(), fieldDate2.getDate());
var result = (parsedFieldDate.getTime() == parsedSelectedDate.getTime());
return result;
},
value: selectedDate
});
//close filter window
$(gridElement).find("th[data-field=" + columnTobeFiltered + "]").data("kendoFilterMenu").popup.close();
}
})
}
}
Any help around this is appreciated.
Thanks
I need to change the date format in the grid filter context menu. After choosing a date from calendar, it gets displayed in the text box. The default format is 'm/dd/yyyy' which I want to change to a dynamically defined format. We allow user to set date format preferences in our website. It works fine for data. I need to do the same for grid search filter.
This is a server side grid.

I have created a custom editor template for my scheduler, and it works fine except for one glaring issue. When I update the list of attendees for a given meeting, the model fails to validate on post back because the attendee list that is returned consists of all 0s.Here is the control's code:
<div data-container-for="Attendees" class="k-edit-field"> @(Html.Kendo().MultiSelectFor(model => model.Attendees) .HtmlAttributes(new { data_bind = "value:Attendees" }) .DataTextField("Text") .DataValueField("Value") .DataSource(source => { source.Read(read => { read.Action("RemoteDataSource_GetUserList", "Calendar"); }) .ServerFiltering(true); }) )</div>I have a grid, with inline editing enabled, with a user entered value for the primary key. Obviously, for row edits, this value can't be updated. Unfortunately the Kendo Grid doesn't differentiate between edits and inserts.
I can set the field to non editable using :-
.Model(m=>{ m.Id(p => p.OPCS); m.Field(p => p.OPCS).Editable(false); })And this works for edits, as the key column remains as text, not a text box. However, this breaks inserts.
Alternatively I can set the field to read only using the grid edit event:-
function gridEdit(args) { if (args.model.isNew() == false) { // textbox $("#OPCS").attr("readonly", true); } }This stops the value in the field from being changed, but still displays it in a textbox, giving the user the impression it can be changed.
How can I stop the field being shown in a textbox for edits, but allow inserting new values for new records?
I want to call a js in my read action, and so far I can do it without problems, but now I need to pass the function several parameters. Is it posible?
I want to achieve something like this:
@(Html.Kendo().Grid<SGMTrade.DAL.ViewModels.OperacionesOCTPorFecha>()
.Name("grid2_#=row#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones").Data(MyFunction( #=fecha_venc#,#=espe_codigo#,#=clas_codigo# ))))
)
.Columns(columns =>
{
columns.Bound(o => o.oper_numero).Title(Global.NumeroOperacion)
.ClientTemplate("<a href='\\\\\\#' onclick=\"showDetails('\\#=oper_numero\\#')\">\\#=oper_numero\\#</a>").HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.oper_forigen).Title(Global.FechaOrigen).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "grillaFecha" });
columns.Bound(o => o.espe_codigo).Title(Global.Especie).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.clas_codigo).Title(Global.Clase).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.clie_nombre).Title(Global.Cliente).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.tope_suma).Title(Global.CompraOVenta).HtmlAttributes(new { @class = "grillaTexto" });
columns.Bound(o => o.oper_monto).Title(Global.Capital).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.oper_plazo).Title(Global.Plazo).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.Fecha_Vence).Title(Global.FechaVence).Format("{0:dd/MM/yyyy}").Hidden(true).HtmlAttributes(new { @class = "grillaFecha" });
columns.Bound(o => o.precio_transf).Title(Global.PrecioTransferencia).HtmlAttributes(new { @class = "grillaNumero" });
columns.Bound(o => o.spread).Title(Global.Spread).HtmlAttributes(new { @class = "grillaNumero" });
})
This is actual code from a child grid that I'm using. The standard method for passing parameters is not working due to date format:
.Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))
Thanks in advance