HOWTO: Use the ModalDialog with events

This is a step-by-step guide to implementing and using the ModalDialog that comes with OfficeExcel. It can be used as a simple "Please wait..." style dialog or, as below, it could be used as a user input request. To get it up and running is quite simple, and you don't have to use it with OfficeExcel charts - it can be used standalone as there are no dependencies on OfficeExcel libraries.

1. The basic chart without the ModalDialog

The basic chart used is shown below. The chart does not have the ModalDialog added to it yet - it's just a simple Bar chart.

<script src="OfficeExcel.bar.js" ></script>
<script src="OfficeExcel.modaldialog.js" ></script>
<script src="OfficeExcel.common.core.js" ></script>

<script>
    var bar = new OfficeExcel.Bar('cvs', [4,6,5,3,8,9]);
    bar.Set('chart.labels', ['Kev','Louise','Pete','Gary','Fliss', 'James']);
    bar.Draw();
</script>

2. The ModalDialog

This is the DIV whose content is used as the ModalDialog. It is important to remember that only the contents are used, not the DIV itself. This means that you can hide the DIV with the display: CSS property.

<script src="OfficeExcel.bar.js" ></script>
<script src="OfficeExcel.modaldialog.js" ></script>
<script src="OfficeExcel.common.core.js" ></script>

<script>
    var bar = new OfficeExcel.Bar('cvs', [4,6,5,3,8,9]);
    bar.Set('chart.labels', ['Kev','Louise','Pete','Gary','Fliss', 'James']);
    bar.Draw();
</script>

<!-- This is the popup dialog-->
    <div id="myDialog" class="modalDialog" style="display: none">
        <b>Please login</b>
        <p>
            <table border="0">
                <tr>
                    <td align="right" style="padding-top: 4px">Email</td>
                    <td><input type="text" size="20" name="email" style="width: 150px" /></td>
                </tr>
                <tr>
                    <td align="right" style="padding-top: 4px">Password</td>
                    <td><input type="password" size="20" name="password" style="width: 150px" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                        <input type="reset" value="Cancel" onclick="ModalDialog.Close()">
                        <input type="submit"
                                  name="submit"
                                  value="Login �"
                                  onclick="alert('This is just an example'); event.stopPropagation()">
                    </td>
                </tr>
            </table>
        </p>
    </div>
<!-- End of dialog -->

3. Triggering the dialog with the new pseudo-events

This function is used to show the dialog. Here, it is triggered using the new OfficeExcel event functions. Doing this means that you could also check the index of the bar that was clicked, which would allow you to show different dialogs based on the bar that was clicked.

<script src="OfficeExcel.bar.js" ></script>
<script src="OfficeExcel.modaldialog.js" ></script>
<script src="OfficeExcel.common.core.js" ></script>

<script>
    function ShowDialog (e, bar)
    {
        // Check this index if you want to show different dialogs based on the bar that was clicked.
        var index = bar[5];

        ModalDialog.Show('myDialog');
        
    }
    var bar = new OfficeExcel.Bar('cvs', [4,6,5,3,8,9]);
    bar.Set('chart.labels', ['Kev','Louise','Pete','Gary','Fliss', 'James']);
    bar.Set('chart.events.click', ShowDialog);
    bar.Set('chart.events.mousemove', function (e, bar) {e.atrget.style.cursor = 'pointer';});
    bar.Draw();
</script>

<!-- This is the popup dialog-->
    <div id="myDialog" class="modalDialog" style="display: none">
        <b>Please login</b>
        <p>
            <table border="0">
                <tr>
                    <td align="right" style="padding-top: 4px">Email</td>
                    <td><input type="text" size="20" name="email" style="width: 150px" /></td>
                </tr>
                <tr>
                    <td align="right" style="padding-top: 4px">Password</td>
                    <td><input type="password" size="20" name="password" style="width: 150px" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                        <input type="reset" value="Cancel" onclick="ModalDialog.Close()">
                        <input type="submit"
                                  name="submit"
                                  value="Login �"
                                  onclick="alert('This is just an example'); event.stopPropagation()">
                    </td>
                </tr>
            </table>
        </p>
    </div>
<!-- End of dialog -->

Email
Password