Telerik controls inside asynchronous View Components

[Adam]

I've got a really strange issue happening.

I've got a DropDownList binding to a remote action in one of my controllers.

When rendering my drop down inside of a asynchronous View Component, the control fails to intialize. No javascript errors, nothing.

I know that the binding is working properly, because as soon as I move the control to a view instead of a view component view, the control initializes fine.

I do not have Deferred() on the control because I know that for partial views the scripts need to be inlined. I am also fairly certain it is not an issue with Deferred, because I have other controls within partial views (not view components) within the app, and the controls load fine.

This issue is specific to asynchronous view components. 

 

This is the control code inside my view component view:

@(Html.Kendo().DropDownList()
    .Name("company-selector")
    .DataTextField("Text")
    .DataValueField("Value")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCompanies", "SuperAdmin");
        });
    })
    .HtmlAttributes(new { style = "width: 100%" })
    )

And this is my controller data binding (again which works fine when control is not inside a view. Also hits a break point even with the control in a view component, but the control isn't initialized)

 

public List<SelectListItem> GetCompanies()
        {
            var companies = _companyRepository.GetCompanies().ToList();
            var companiesSelectList = companies.Select(m => new SelectListItem
            {
                Text = m.Name,
                Value = m.Id.ToString()
            }).ToList();
            return companiesSelectList;
        }

[Dimitar]

Hello Adam,

I am attaching an ASP.NET Core project, where a similar scenario to the one described is demonstrated (Kendo UI DropDownList in a async view component).

With it, you will notice that the Kendo UI DropDownList is properly initialized when the view component is loaded. I have used the InvokeAsync() method to return the component in the Index view.

You can review the implementation, modify it according to your application requirements and try to incorporate it in your project. Please do check that you do not have any script errors in the view component, as these might be the cause of the widget not being rendered correctly on your end.

I hope this helps you to resolve the issue. In case you have any other related questions, please do not hesitate to contact us. 

Regards,
Dimitar
Progress Telerik

[BitShift]

@Dimitar - just looked ver the example.  Im trying to sort out a similar issue.  Would like to put 2 cascading DropDownList controls within a ViewComponent.  The 'primary' DDL would need to get selected first, before the 2nd DDL could go fetch its data.  My question is - where would this happen - with a method in the ViewComponent?

In my case, im using a RazorPages app, no mvc

In other words, the ViewComponent typically has its InvokeAsync method, where a model is passed in and a view returned.  What if this view then includes the two DropDownLists and as mentioned above, the 2nd DDL would need to make a call to a page's helper.  I cant call a helper in a ViewComponent can I, how then can I contain the code within the ViewComponent given that the 2nd DDL needs to make a helper method call AFTER the ViewComponent has been rendered?

 

[Dimitar]

Hello,

If the two DropDownLists are bound to model data through the BindTo() method similar to the previously attached example, you could try to manually implement cascading instead of using the built-in option as follows:

1) Attach a change event to the parent DropDownList and filter the DataSource of the child DropDownList through the filter() method:

function onChange(e) {
  var item = e.sender.dataItem();
  var childDDL= $("#size").data("kendoDropDownList");
                    
  childDDL.value("");
  childDDL.dataSource.filter({ field: "text", operator: "contains", value: item.text });
}

Regards,
Dimitar
Progress Telerik

[BitShift]

Now that I have come to grips with how ViewComponents actually work, I have figured out an approach.  Things are simpler if you just read the documentation FIRST :)

As for my approach:
Using model binding with the primary DDL, attach an onchange event handler to feed the 2nd DDL.
This change handler calls an an api endpoint via ajax to fill the DDL

For days I was missing the fact that ViewComponents are simply not going to respond to a request as an http endpoint

From the docs
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.0
Are not reachable directly as an HTTP endpoint. They're invoked from your code (usually in a view). A view component never handles a request.

[Dimitar]

Hello,

Thank you for sharing this alternative solution for ViewComponents. I believe it will be of great help for others who struggle with the same scenario.

Regards,
Dimitar
Progress Telerik