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

[Acadia]

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>
</script>

 

Relevant View Code:

<script id="templateTest" type="text/x-kendo-tmpl">
    <div>Accounts:</div>
    <div class="product-view k-widget">
        <dl>
            <dt>Bank Name</dt>
            <dd>#:BankName#</dd>
        </dl>
    </div>
</script>


@(Html.Kendo().ListView<PayrollAccountModel>()
    .Name("listViewTest")
    .AutoBind(false)
    .TagName("div")
    .ClientTemplateId("templateTest")
    //.ClientTemplateHandler("templateTest")
    .DataSource(dataSource => dataSource
        .Ajax()
        .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"))
    )
    .Editable().Deferred()
    )

 

Relevant Controller Code:

DirectDepositController:

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!

 

Thanks

[Mihaela]

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.
builder.Services.AddControllersWithViews();

builder.Services.AddMvc()
    .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
builder.Services.AddKendo();

var app = builder.Build();

...

The server response should be formatted as follows:

 

Regards, Mihaela Progress Telerik

[Acadia]

Thank you Mihaela that was exactly what it was.