asp.net chart inside of a jquery dialog

Question

trying to build a page of charts (asp control objects) that are smallish and then when we click on the image, a styled jquery modal/dialog pops up that displays a larger version of the chart. i'm trying to accomplish this by doing the following, but my modal is appearing blank.

My code behind 'Enlarge' function is getting called (and when i debug, Popup is getting set with Chart1's values). I'm guessing my update panel is wrong? I'm going to move the charts over to a custom control when this is done, but is there maybe a better way of doing this without returning 'ok' to 'myhide'?

.aspx

<div class="chart-div" onclick="JScript_EnlargeChart('Chart1')">
    <asp:chart id="Chart1" runat="server"></asp:chart>
</div>

<div id="PopUp">
   <form runat="server" id="form1">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>                
            <asp:Chart runat="server" ID="PopUpChart"></asp:Chart>
        </ContentTemplate>
       </asp:UpdatePanel>
   </form>
    <span id="myhide" style="display:none"></span>
</div>

javascript

<script type="text/jscript">
    $(document).ready(function () {
        $('#PopUp').hide();  //hide on startup
    });

    function JScript_EnlargeChart(x) { //ajax call to create a dialog box to enlarge a given chart
        $('#myhide').load('mypage.aspx?Enlarge=' + x); //refresh

        $('#PopUp').modal({  //do popup
            title: 'Enlarged Chart',
            height: 400,
            width: 700,
            buttons: {
                'Close': function (win) { win.closeModal(); }
            }
        });
    };
</script>

code behind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load        

    If Not IsNothing(Request.QueryString("Enlarge")) Then
        Response.Write(Enlarge(Request.QueryString("Enlarge")))
        Response.Flush()
        Response.End()
    Else
        GenerateCharts()
    End If

End Sub

Function Enlarge(ByVal chartid As String) As String
    If chartid = "Chart1" Then
        PopUpChart = Chart1
        PopUpChart.Width = 412
        PopUpChart.Height = 296
        UpdatePanel1.Update()
    ElseIf chartid = "Chart2" Then
        PopUpChart = Chart2
        UpdatePanel1.Update()
    End If
    Return "OK"
End Function

score 0 · Answer 1 · answered Mar 15 '12 at 21:02

0

Looks like you load the enlarged chart to a hidden span (#myhide). So it won't get visible simply by showing the modal.

You can try to add a callback that shows #myhide

$('#myhide').load('mypage.aspx?Enlarge=' + x, function(){ $('#myhide').show(); });

I can't read the asp-part, but I assume, that if you call the url for the chart direct (via browser) 'mypage.aspx?Enlarge=1', you get the enlarged chart.

answered Mar 15 '12 at 21:02

StilgarBF

1,060
8
17

if i unhide 'myhide', after the ajax call it will just display 'OK' because thats what is being flushed out by 'Enlarge()' in the code behind. i think the problem is that 'PopUpChart' is getting updated but that updated object is not being shown in the dialog despite being in an update panel – user1272386 Mar 15 '12 at 21:15

score 0 · Accepted Answer · edited May 23 '17 at 12:27

I suspect the issue is the round trip from the jQuery AJAX call to the server isn't working the way you're expecting it to. The AJAX call via jQuery likely isn't sending the view state that a normal update panel call would send.

Try adding your thumbnail chart div to the update panel, making it a server control, and having the click be a server-side event. Something like this, possibly:

<form runat="server" id="form1">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
     <ContentTemplate>                
        <div class="chart-div" runat="server" onclick="EnlargeChart('Chart1')">
            <asp:chart id="Chart1" runat="server"></asp:chart>
        </div> 
        <div id="PopUp">
            <asp:Chart runat="server" ID="PopUpChart"></asp:Chart>
            <span id="myhide" style="display:none"></span>
        </div>
     </ContentTemplate>
    </asp:UpdatePanel>
</form>

My apologies for not being able to test, but I think you need something similar to that. The key point being that you need to let ASP.Net handle the AJAX so that it properly sends the state and can keep tabs on the server side controls.

To open the pop-up after the update panel is done try the technique from this question: How can I run some javascript after an update panel refreshes?

The only other way I could think to pull it off is to keep things the way you have it, but create the chart on the server and just send back the chart image source as part of the AJAX response. An article on how to do that

i was thinking about doing an image source ajax response as you said in the latter portion of the post but thought i would lose things like drill down options and tooltips over data points. i'll definitely give your first suggestion a go this evening. thanks! — user1272386, Mar 15 '12 at 22:13

asp.net chart inside of a jquery dialog

2 Answers2