Problème de rafraichissement d'un graphique Visifire dans un UpdatePanel
Bonjour,
Voici mon problème. Je suis sur une page affichant un rapport (avec plusieurs tableaux). En haut de cette page, j'ai 3 DropDownLists + 1 LinkButton qui me permettent de filtrer les données affichées.
Ensuite j'ai un UpdatePanel qui contient mes différents tableaux (des gridviews et des repeaters), ainsi qu'un graphique en Silverlight (il s'agit de Visifire).
Le Click sur le LinkButton permet à l'utilisateur d'appliquer les filtres en fonction des valeurs sélectionnées dans les 3 DropDownLists, et au final il met à jour mon UpdatePanel pour afficher les données triées.
Voici le code de tout ceci :
Les controls utilisés pour filtrer (ils sont à l'extérieur de l'UpdatePanel) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div style="width:100%;clear:both;text-align:center;">
Filters:
<asp:DropDownList ID="ddlFilter_Country" runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlFilter_Industry" runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlFilter_Partner" runat="server"></asp:DropDownList>
<asp:LinkButton runat="server" ID="btnFilter" OnClick="btnFilter_Click"><img src="/_layouts/images/FILTER.GIF" alt="Apply Filters" /> Apply Filters</asp:LinkButton>
<asp:UpdateProgress ID="progress" runat="server" AssociatedUpdatePanelID="upnlReport">
<ProgressTemplate>
<img src="/_layouts/BusinessSite/img/wait.gif" alt="Applying Filters, please wait..." title="Applying Filters, please wait..." />
</ProgressTemplate>
</asp:UpdateProgress>
</div> |
Le code de mon UpdatePanel (je n'ai mis que la partie du code contenant ce qui me pose problème) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<asp:UpdatePanel ID="upnlReport" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFilter" EventName="Click" />
</Triggers>
<ContentTemplate>
...
<div id="VisifireChart" style="margin-top:20px;width:100%;float:left;position:relative;text-align:left;">
<asp:Literal ID="litJSVisifire" runat="server"></asp:Literal>
</div>
</ContentTemplate>
</asp:UpdatePanel> |
Le contrôle litJSVisifire pose problème. En effet, lorsque j'arrive sur ma page, mon graphique apparaît bien.
Voici le code appelé au chargement de la page :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
private void InitializeRankingChart()
{
VisifireHelper _vh = new VisifireHelper();
List<DataEntity> entitiesInfo = this.GetSubEntities();
List<DataPoint> dataPoints = this.ConvertEntityToDataPoint(entitiesInfo);
StringBuilder sbJS = new StringBuilder();
sbJS.Append(@"<script type=""text/javascript"">");
sbJS.AppendFormat(@"var chartRanking = new Visifire(""{0}/_layouts/BusinessSite/Report/SL.Visifire.Charts.xap"", 900, 450);", SPContext.Current.Site.Url);
sbJS.AppendFormat(@"var chartXAML = '{0}';", _vh.GetXAML("Opportunities Ranking", "Theme1", 900, 450, "Bar", "Opportunity", 100, "Compliance", null, dataPoints.OrderByDescending(i => i.YValue).ToList()));
sbJS.AppendFormat("chartRanking.setDataXml(chartXAML);");
sbJS.AppendFormat(@"chartRanking.render(""VisifireChart"")");
sbJS.Append("</script>");
this.litJSVisifire.Text = sbJS.ToString();
} |
VizifireHelper.GetXAML() est une classe 'maison', qui génère du XAML en fonction des paramètres qui lui sont transmis. Je ne rencontre pas de problème avec cette méthode vu que je l'utilise sur d'autres pages sans soucis. Voici le code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
public string GetXAML(string chartTitle, string chartTheme, int chartWidth, int chartHeight, string renderAs, string axisXTitle, object axisXMaximum, string axisYTitle, object axisYMaximum, List<DataPoint> dataSeries)
{
StringBuilder myXAML = new StringBuilder(); // String for Data xaml
int numberOfDataPoints = dataSeries.Count; //Number of data point in the DataSeries
if (string.IsNullOrEmpty(renderAs))
renderAs = "Column";
// Constructing Data XAML
myXAML.AppendFormat(@"<vc:Chart View3D=""true"" Theme=""{0}"" Width=""{1}"" Height=""{2}"" xmlns:vc=""clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"">", chartTheme, chartWidth.ToString(), chartHeight.ToString());
myXAML.Append("<vc:Chart.Titles>");
myXAML.AppendFormat(@"<vc:Title Text=""{0}"" FontSize=""{1}"" FontWeight=""{2}"" FontColor=""{3}"" />", chartTitle, 16, "Bold", "Black");
myXAML.Append("</vc:Chart.Titles>");
myXAML.Append("<vc:Chart.AxesX>");
myXAML.Append("<vc:Axis Title=\"" + axisXTitle + "\" TitleFontSize=\"14\" TitleFontWeight=\"Bold\" " + (axisYMaximum != null ? "AxisMaximum=\"" + axisYMaximum + "\" " : string.Empty) + " />");
myXAML.Append("</vc:Chart.AxesX>");
myXAML.Append("<vc:Chart.AxesY>");
myXAML.Append("<vc:Axis Title=\"" + axisYTitle + "\" TitleFontSize=\"14\" TitleFontWeight=\"Bold\" " + (axisXMaximum != null ? "AxisMaximum=\"" + axisXMaximum + "\" " : string.Empty) + " />");
myXAML.Append("</vc:Chart.AxesY>");
// Create DataSeries XAML fragment
if (dataSeries.Count > 0)
myXAML.Append(CreateDataSeriesXML(dataSeries, renderAs));
// End of chart Tag
myXAML.Append("</vc:Chart>");
// Write data xaml as response text
return myXAML.ToString();
} |
DataEntity définit un objet qui contient mes données. Voici le code :
Code:
1
2
3
4
5
6
7
8
|
public class DataEntity
{
public string Value1 { get; set; }
public decimal Value2 { get; set; }
public int Value3 { get; set; }
public long Value4 { get; set; }
} |
Pour filtrer, j'utilise un objet QueryFilter dont voici le code (FilterType est une énumération) :
Code:
1
2
3
4
5
6
|
public class QueryFilter
{
public int InputID { get; set; }
public FilterType FilterType { get; set; }
} |
Lorsque je click sur mon bouton, je rappelle donc la méthode InitializeRankingChart ci-dessous, avec des filtres passés en paramètre, afin de mettre à jour mon UpdatePanel avec les données filtrées. Voici le code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
private void InitializeRankingChart(List<QueryFilter> filters)
{
VisifireHelper _vh = new VisifireHelper();
List<DataEntity> entitiesInfo = this.GetSubEntities(filters);
List<DataPoint> dataPoints = this.ConvertEntityToDataPoint(entitiesInfo);
StringBuilder sbJS = new StringBuilder();
sbJS.Append(@"<script type=""text/javascript"">");
sbJS.AppendFormat(@"var chartRanking = new Visifire(""{0}/_layouts/BusinessSite/Report/SL.Visifire.Charts.xap"", 900, 450);", SPContext.Current.Site.Url);
sbJS.AppendFormat(@"var chartXAML = '{0}';", _vh.GetXAML("Opportunities Ranking", "Theme1", 900, 450, "Bar", "Opportunity", 100, "Compliance", null, dataPoints.OrderByDescending(i => i.YValue).ToList()));
sbJS.AppendFormat("chartRanking.setDataXml(chartXAML);");
sbJS.AppendFormat(@"chartRanking.render(""VisifireChart"")");
sbJS.Append("</script>");
this.litJSVisifire.Text = sbJS.ToString();
} |
Or, à ce moment précis, le graphique disparaît. J'ai débuggé, je passe bien dans ma méthode InitializeRankingChart(List<QueryFilter> filters) lors du PostBack et le code s'exécute sans problème. Le XAML de mon graphique Visifire est correctement généré.
Avez-vous une idée sur le pourquoi du commment mon graphique disparait ? Est-ce que c'est parce que lors du PostBack je ne suis plus abonné aux évènements JavaScript permettant de générer le graphique ?
Si vous avez besoin de plus d'informations, n'hésitez pas à demander !
Merci par avance.
