ASP.NET MVC AJAX PartialView Telerik UI not loading

[Kristian]

I have a PartialView which is updated using AJAX. The HTML elements are loaded correctly when updating the Div using AJAX, but the Telerik chart is not loaded. The datasource in the chart is not calling the Action method:

.DataSource(ds => ds.Read(read => read.Action("Movies_Read", "Movies")))

When the PartialView is initially loaded, not using AJAX, the datasource is calling the action method and the chart is loaded correctly.
According to Telerik ASP.NET PartialView AJAX there needs to be this Javascript call for the OnSuccess event:

<script type="text/javascript"> function updatePlaceholder(context) { // the HTML output of the partial view var html = context.get_data(); // the DOM element representing the placeholder var placeholder = context.get_updateTarget(); // use jQuery to update the placeholder. It will execute any JavaScript statements $(placeholder).html(html); // return false to prevent the automatic update of the placeholder return false; }

I have tried the javascript mentioned in the documentation, but the get_data() and get_updateTarget() does not exists event though I havde added the MicrosoftAjax.js and MicrosoftMvcAjax.js. I suspect that these are deprecated. I have also tried other javascript functions but without any luck.
My AJAX call is:

@using (Ajax.BeginForm("UpdateMoviesChart", "Movies", new AjaxOptions { UpdateTargetId = "MoviesDiv", InsertionMode = InsertionMode.Replace, OnSuccess = "updatePlaceholder", }))

How do I load the Telerik Chart correctly when using AJAX?

[Vladimir Iliev]

Hi Kristian,

Basically there are several ways to load the PartialViews, and which one you would choose depends entirely on you can the exact setup that you have. For example if you need to render the PartialView after the page load (using Ajax request) you can simply use the following setup:

1. Main view code: 

   <div class="chart-wrapper"></div>
   
   <script>
       $(function () {
           $.ajax({
               url: "@(Url.Action("RemotePartialView", "Donut_Charts"))",
               success: function (data) {
                   $(".chart-wrapper").html(data);
               }
           });
       })
   </script>

2. Controller code: 

   public ActionResult RemotePartialView()
   {
       return PartialView("remote_partial_view");
   }

3. Remote Partial View code: 

   @(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ScreenResolutionRemoteDataViewModel>()
       .Name("chart")
       .Title("1024x768 screen resolution trends")
       .Legend(legend => legend
           .Position(ChartLegendPosition.Top)
       )
       .DataSource(ds => ds
           .Read(read => read.Action("_WorldScreenResolution", "Donut_Charts"))
           .Group(group => group.Add(item => item.Year))
           .Sort(sort => sort.Add(item=> item.OrderNumber)))
       .Series(series => {
           series.Donut("Share", "Resolution", "Color" , visibleInLegendMemberName: "VisibleInLegend")
               .StartAngle(270);
       })
       .Tooltip(tooltip => tooltip
           .Visible(true)
           .Template("#= dataItem.resolution #: #= value #% (#= dataItem.year #)")
       )
   )

Could you please check the above solution and let us know of the result?

Regards,
Vladimir Iliev
Telerik

[Kristian]

Hi Vladimir,

The solution that you proposed gave almost the same results as before and is hence still not working. However, now the action method for the PartialView is getting called imidiatly: 

public ActionResult RemotePartialView()
{
    return PartialView("remote_partial_view");
}

The "Movies_Read" action method is still not called by the Chart:

.DataSource(ds => ds.Read(read => read.Action("Movies_Read", "Movies")))

However as before, the "Movies_Read" is called when not using AJAX and thus showing the chart correctly. 

 

 

[Vladimir Iliev]

Hi Kristian,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide runable example where the issue is reproduced? This would help us pinpoint the exact reason for current behavior.  

Regards,
Vladimir Iliev
Telerik

[Kristian]

Hi Vladimir

Here is a link to a folder containing a runable example of my problem.

Thank you for your help.

https://www.dropbox.com/sh/gqdrhjonns0j05y/AAAUrS4MGedPUNmzUb3jOu_3a?dl=0

[Vladimir Iliev]

Hi Kristian,

After inspecting the provided project it appears that the issue is related to the following invalid configurations:

• Various scripts and styles are included several times on the page which is invalid configuration. You should remove the duplicated Kendo UI and jQuery scripts. Please check the example set below: 

  Site.css
  kendo.common.min.css
  kendo.mobile.all.min.css
  kendo.dataviz.min.css
  kendo.default.min.css
  kendo.dataviz.default.min.css
  
  jquery.min.js
  jszip.min.js
  kendo.all.min.js
  kendo.aspnetmvc.min.js
  modernizr-2.6.2

• There is JavaScript error on the KPIOverview/Index page - if you open the browser console you will notice the following JavaScript error that prevents the page from working correctly:

  Uncaught TypeError: $(...).clic is not a function

  From the above error message you can see that the "click" method is mistyped.                  

After fixing the above issues the project start working as expected on our side.

Regards,
Vladimir Iliev
Telerik

[Cruz]

Este fue el error que me genero,  revisando el código efectivamente se estaba duplicando en el dom  provocando que dejara de funcionar

[Anton Mironov]

Hi Cruz,

Please note that the official communication language for the support service is English.

As from the part I understand - the issue is now resolved on your side?

If further assistance is needed, do not hesitate to contact me and the team in English.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov