Updating RadChart from an AJAX callback - Not working?

[ssawchenko]

I have been fighting with this problem for awhile now, and I can't solve it. I have created a wrapper Silverlight application which contains a RadChart and exposes some functions via the HTML bridge so that I can set the collections from javascript after an AJAX call to our server to get data.

If I set the data outside of the AJAX callback (ie. hardcode it), the chart is updated correctly.  If I move the update inside the AJAX callback, then the chart is NOT updated (it sits in a NO DATA state).  I have set breakpoints in my bridge functions and I know that those functions ARE being called with the correct data in the AJAX call, however, the chart state appears to remain unchanged.

Is there a way to manually force the chart to update?

Thank you!

Below is some pseudo code of what I mean...

var myControl = // Pointer to the Silverlight Control

function getData()

{

var fakedata = "...";

// If I put the update here, the chart refreshes

myControl.myBridgeFunctionUpdate(fakedata); // This will work.

$.ajax(...

function()

{

// Even if all I do is use the same fake data here.

var samefakedata = "...";

myControl.myBridgeFunctionUpdate(samefakedata); // This will NOT work.

}

);

//...

} getData();

[Vladimir Milev]

Hello shayla sawchenko,

The RadChart control is automatically redrawn/updated whenever some critical property or method are changed/called. Can you please be more specific and tell us which property/method part of the API is not causing RadChart to be refreshed when changed/called?

Best wishes,
Vladimir Milev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[ssawchenko]

Sure thing.

The main scripatable function I am calling simply clears and then resets a collection item. Because this is an observable collection, the change should be automatically shown on the chart.  If calling this function outside of an AJAX callback, the update DOES work as intended.  When calling this update function from within an AJAX callback the update does not happen automatically and I have to force the update using the rebind function of the chart.


Relevant C# code:

// Note, the below are snippets of the relevant code.

// My data class contains two values which I use to map the items; this works fine.
public class TrendSample
{
  public DateTime Date { get; set; }
  public double Value { get; set; }
}

// This class is really just a shorthand way to indicate a list of samples; it contains some helper functions, but they are not relevant to my issue.
public class TrendSampleList : List<TrendSample>
{
}

//In my init code I store an overall collection, which is a list of these lists; I set the itemsource to point to this collection.
private List<TrendSampleList> TrendCollection = new List<TrendSampleList>();
_RadChart.ItemsSource = this.TrendCollection;

//When I create a new series I create a new item in this collection and set the collection index.
int SeriesIndex = TrendCollection.Count();
TrendCollection.Add(new TrendSampleList());
TrendSeriesMapping.CollectionIndex = SeriesIndex;

// When I want to update the series with new values I clear the existing collection, generate a new one and then set the it in the collection. Because this is an observable collection the values SHOULD be updated in the chart. When calling this function outside of an AJAX callback the update works correctly.  When called inside an ajax callback I have to add the rebind call at the end to force the update of the chart.  This seems incorrect to me.
[ScriptableMemberAttribute]
public void UpdateSeries(int seriesIndex, String SamplesString)
{
  // Clear and repopulate collection
  this.TrendCollection[seriesIndex].Clear();
  this.TrendCollection[seriesIndex] = null;

  String[] Samples = SamplesString.Split("|".ToCharArray());
  String[] Split;

  TrendSampleList temp = new TrendSampleList();

  foreach (String Sample in Samples)
  {
    Split = Sample.Split("=".ToCharArray());
    temp.AddSample(Split[0], Double.Parse(Split[1]));
  }

  this.TrendCollection[seriesIndex] = temp;
  _RadChart.Rebind();  // Need to force this due to issues with updating from AJAX callbacks.

}

Javascript code which calls the update functionality:

function getData()
{
   var fakedata = "...";
   // Here, silverlightContent is my HTML bridge object; I can place a breakpoint in my
   // silverlight application in the UpdateSeries function and the breakpoint is hit, and the chart is updated
   // correctly even without the forced rebind call.
   silverlightContent.UpdateSeries(0,fakedata);

   $.ajax(...
     function()
     {
       var fakedata = "...";
       // Here I am simulating an AJAX call to our server, which will actually get the data I need to display.
       // I can place a breakpoint in my silverlight application in the UpdateSeries function and the breakpoint
       // is hit, the fakedata is being passed correctly, however, the chart is NOT updated with this new data unless
       // I force it with the rebind call.
       silverlightContent.UpdateSeries(0,fakedata);
     }
   );

  //...
}

getData();

Thank you for your time!

[Velin]

Hi shayla sawchenko,

I can see from your code that the ItemsSource you are using is not an ObservableCollection but rather a List<T>.
Could this be the reason for this issue?

Please, find attached a working example of RadChart updated on ajax callback. You just need to reference the proper assemblies in the SL project.

Hope this will help.

Greetings,
Velin
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[ssawchenko]

I'm not certain that is the issue since in the non-AJAX case the chart is being updated correctly using changes to the List. 

Although, perhaps this is my inexperience with C#; I thought that Lists implemented the ICollection interface, which I assumed gave it the ability to be an observable collection, but perhaps not.  I'll try changing this up, but it still doesn't totally explain why my function works outside of the AJAX callback.

I will take a look at the sample you provided (although I probably can't get around to it for a week or so).  Thank you very much for your time and have a great weekend!