My Kendo ListView is no displaying when using a template. ListView is based on a model. PLEASE HELP

1 Answer 50 Views
Top achievements
Rank 1
Acadia asked on 11 Aug 2023, 02:44 PM | edited on 14 Aug 2023, 02:18 PM

I have reached my wits end trying to figure out why my Kendo UI ListView will not display the data when using a very simple template.  The ListView is based on a IEnumerable Model.  I'm very frustrated at this point.  No errors in f12.  The template just does not display.  Checking in debugger the data is all there and the model passed back as Json to the view is populated.  I have triple checked the field names match in the template and model.


Update:  One more bit of info...even if the template is a simple thing like this it STILL does not show:

<script type="text/x-kendo-tmpl" id="template">
    <div>TEST TEMPLATE</div>


Relevant View Code:

<script id="templateTest" type="text/x-kendo-tmpl">
    <div class="product-view k-widget">
            <dt>Bank Name</dt>

    .DataSource(dataSource => dataSource
        .Model(model => model.Id("Id"))
        .Create(create => create.Action("PayrollAccount_Create", "DirectDeposit"))
        .Read(read => read.Action("PayrollAccount_Read", "DirectDeposit"))
        .Update(update => update.Action("PayrollAccount_Update", "DirectDeposit"))
        .Destroy(destroy => destroy.Action("PayrollAccount_Destroy", "DirectDeposit"))


Relevant Controller Code:


public ActionResult PayrollAccount_Read([DataSourceRequest] DataSourceRequest request)
            //create new listView item and add some test data
            List<PayrollAccountModel> Accounts = new()
                new PayrollAccountModel { Id = 1, BankName = "Bangor Savings Bank", AccountNumber = "99999999", RoutingNumber = "123456789" },

            return Json(Accounts.ToDataSourceResult(request));



Any help would be hugely appreciated!



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 15 Aug 2023, 01:48 PM

Hello Justin,

Since the ListView is rendered empty at your end, and there are no errors in the browser console, I suspect that the issue is caused by the JSON Serialization. Basically, the ListView depends on Pascal case-formatted response from the server. However, the default casing for JSON strings in ASP.NET Core is the Camel case. When the data returned data from the server is in Camel case, the component cannot display it correctly:

Would you please configure the default serialization in the Program.cs file as per the example below?

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

    .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);

var app = builder.Build();


The server response should be formatted as follows:


Regards, Mihaela Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Top achievements
Rank 1
commented on 15 Aug 2023, 05:21 PM

Thank you Mihaela that was exactly what it was.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question