Hi!

The ListView is breaking my web application, and I cannot make head or tail of the reason:

An unhandled exception occurred while processing the request.

Kendo.Mvc.UI.ListView<T>.VerifySettings()

Also, you demos for the ListView are broken and the browser tab crashed after a while.

I need an urgent fix, as this is affecting the live application.

I have an editor template where i have added this list View as component while rendering on grid edit/add why am i seeing this [object object]. I'm not sure what mistake I've making here.
Editor Template:

@(Html.Kendo().Template()
    .AddHtml("<div class=\"k-edit-label\">")
    .AddHtml(Html.LabelFor(m => m.WeekDays).ToHtmlString())
    .AddHtml("</div>")
    .AddHtml("<div class=\"k-edit-field\">")
    .AddComponent(c => c.ListView<CheckboxList>()
        .Name("weekDays")
        .TagName("div")
        .ClientTemplateHandler("weekDaysTemplateHandler")
        .HtmlAttributes(new { data_bind = "source: daysDataSource"})
    )
    .AddHtml("</div>")
)

function weekDaysTemplateHandler(data){
 
    var result = '<div style="width: 33%;">';
    result += `<input class="weekDays" data-name="${kendo.htmlEncode(data.Name)}" data-id="${kendo.htmlEncode(data.ID)}" name="weekDays" type="checkbox" style="vertical-align: -2px" data-bind="checked:weekDays[${kendo.htmlEncode(data.ID)}].Selected" />`;
    result += ` <span>${kendo.htmlEncode(data.Name)}</span>`;
    result += "</div>"
    return result;
}
var viewmodel = new kendo.observable({
    dataSource: [],
    weekDaysDataSource: new kendo.data.DataSource({
        data: []
    }),
    OnEdit: function(e){
         this.weekDaysDataSource.data(e.model.WeekDays);
    }
});

WeekDays: [
    {
          ID: 1,
          Name: "Monday",
          Selected: false
    },
    {
         ID: 2,
        Name: "Tuesday",
        Selected: false
   },
   .... <rest of the days>
];

Hi There,

I have a complex model in view.  But, i sended simple example for subject.

Main View Model : 

public class ErpProductModel
{
    public string Title { get; set; }
    public string Code { get; set; }
    public string ShortCode { get; set; }
    public int MinStock { get; set; }
    public int ShelfLife { get; set; }
    public int CategoryId { get; set; }
    public int TaxCategoryId { get; set; }
    public decimal AmountInProduct { get; set; }
    public int MeasureWeightId { get; set; }
    public int CountryId { get; set; }
    public int StatusId { get; set; }
    public List<ErpProductPackageTypeModel>? PackageTypes { get; set; } = [];
}

PackageTypes Model : 

public record ErpProductPackageTypeModel 
{
    public int? ProductId { get; set; }
    public string Barcode { get; set; }
    public int Quantity { get; set; }
    public string? PackageType { get; set; }
    public int PackageTypeId { get; set; }

    public List<SelectListItem> AvailablePackageTypes { get; set; } = [];
}

View Source :

<script type="text/x-kendo-tmpl" id="packageTypeTemplate">
         <div class="card widget widget-info">
             <div class="card-body">
                 <div class="widget-info-container">
                     <div class="widget-info-image" style="background: url('@Url.Content("/Assets/Images/barcode_mock.png")')"></div>
                     <h5 class="widget-info-title">#=Barcode#</h5>
                     <p class="widget-info-text">#=PackageType# / #=Quantity# PCS</p>
                 </div>
             </div>
         </div>
</script>

@(Html.Kendo().ListView<ErpProductPackageTypeModel>()
            .Name("package-types")
            .BindTo((IEnumerable<ErpProductPackageTypeModel>)Model.PackageTypes)
            .TagName("div")
            .Bordered(false)
            .Layout("grid")
            .Grid(p=> p.Cols(4).Gutter(20))
            .ClientTemplateId("packageTypeTemplate")
            .HtmlAttributes(new { @class= "rubi-listview package-types" })
            .DataSource(dataSource => 
                dataSource.Ajax()
                .Batch(true)
                .ServerOperation(false))
            )

Controller Post Method :

[HttpPost]
public virtual async Task<IActionResult> EditAsync(ErpProductModel model)
{
    var erpProduct = await _erpProductService.GetErpProductAsync(model.Id);
    if (erpProduct == null)
        return RedirectToAction("List");
    erpProduct = model.ToEntity(erpProduct);

    await _erpProductService.UpdateErpProductAsync(erpProduct);

    return RedirectToAction("Edit", new { id = erpProduct.Id });
}

Hi,

Is there an easy way to disable the spinner when loading more content in the list view on endless scroll mode? I can set the following CSS to hide it altogether but this would affect the initial load and load after filter etc

    .k-loading-mask {
        display: none !important;
    }

Many thanks,

Dale

I have a listview that a user can click a button on and go to a new page.  I pass the current page and the id of the selected item to the new page.  When the user clicks on a link to return to the page with the listview, the page and the id are passed back.  I can change the page to the correct page and select the record in the dataBound event as shown below but, I have not been able to figure out how to scroll it into view.   Is there a way to do that?

function dataBound(e){
        var listViewDS = $("#lvDisplay").data("kendoListView").dataSource;
        var myPage = '@ViewBag.CurrentPage';
        var myId = '@ViewBag.CurrentId';

        if (myPage != 1){
            setTimeout(() => { listViewDS.page(myPage); }, 1000);

            var listView = $("#lvDisplay").data("kendoListView");
            var dataItems = listView.dataSource.view();
            var index = 0;
            for (var j = 0; j < dataItems.length; j++) {
                if (dataItems[j].Id == myId) {
                    index = j;
                    listView.select(index);

                    var row = e.sender.element.find("[data-uid='" + dataItems[j].uid + "']");
                    row.addClass("k-state-selected");
                };
            };
        }       
    }

I have tried the code below but always get an error for top.

$("#lvDisplay").scrollTop($("#lvDisplay").find(".k-state-selected").position().top);

__PRESENT__PRESENT__PRESENT__PRESENT__PRESENT__PRESENT__PRESENT

Hi there,

I'd like to trigger the virtualization scroll event programatically. My idea is to use a global body scroller to register the scroll down, and completely turn off the scroller on the listview container.

When I use the following code it will only replace my existing rows.

$("#allProductsListView").data("kendoListView").dataSource.read({ page: 2, pageSize: 36 })

I need a way to append in order to make virtualization work programatically.

Thank you.

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:

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:

Any help would be hugely appreciated!

Thanks

Hello,

I've searched forums and documentation and can't seem to find an example of how to do what I need.  What I am trying to do is I need an editable List View on my page where I want to use my model as the data source (in memory only).  Each time I save a record in the list view I want to add it to the model, then pass the contents of that same model to my server.

The List View will need to display all entries (update with each entry)

I need the data to persist in the model during the session.

Can anybody please point me to an example that does this in MVC C# .NET 6?

Thanks!