ASP.NET MVC AJAX PartialView Telerik UI not loading

6 posts, 0 answers
  1. Kristian
    Kristian avatar
    3 posts
    Member since:
    Apr 2014

    Posted 02 Jan Link to this post

    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?

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 06 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kristian
    Kristian avatar
    3 posts
    Member since:
    Apr 2014

    Posted 06 Jan in reply to Vladimir Iliev Link to this post

    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. 

     

     

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 07 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Kristian
    Kristian avatar
    3 posts
    Member since:
    Apr 2014

    Posted 07 Jan in reply to Vladimir Iliev Link to this post

    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

  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 12 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready