Client-Side Events

The Bootstrap Sparkline control provides several client-side events fired at different moments of the control's life cycle. Use the checkboxes below to specify which events should be added to the log.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapSparkline ID="SparklineCilentSideEvents" ClientInstanceName="SparklineCilentSideEvents" runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json">
    <ClientSideEvents Drawn="onDrawn" Init="onInit" TooltipHidden="onTooltipHidden" TooltipShown="onTooltipShown" />
</dx:BootstrapSparkline>
<demo:EventMonitor runat="server" EventNames="TooltipShown TooltipHidden Init Drawn"
    ControlID="SparklineCilentSideEvents" />
function onDrawn(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Drawn');
}
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
}
function onTooltipHidden(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TooltipHidden');
}
function onTooltipShown(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TooltipShown');
}

Exporting API

You can export and print the Sparkline control using the client-side ExportTo and Print methods. The following export formats are supported:

  • PNG
  • PDF
  • JPEG
  • SVG
  • GIF

The following client-side events are fired during the export process:

  • Exporting - Fires before sparkline data is exported.
  • Exported - Fires after sparkline data has been exported.
  • FileSaving - Fires before a file with exported data is saved on the user's local storage.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapButton runat="server" ClientSideEvents-Click="exportSparkline" Text="Export Sparkline" UseSubmitBehavior="false" AutoPostBack="false"></dx:BootstrapButton>
<dx:BootstrapButton runat="server" ClientSideEvents-Click="printSparkline" Text="Print Sparkline" UseSubmitBehavior="false" AutoPostBack="false"></dx:BootstrapButton>
<dx:BootstrapSparkline ID="ClientSideMethodsSparkline" ClientInstanceName="ClientSideMethodsSparkline" runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json">
    <ClientSideEvents Exported="onExported" Exporting="onExporting" FileSaving="onFileSaving" />
</dx:BootstrapSparkline>
<demo:EventMonitor runat="server" EventNames="Exporting Exported FileSaving"
    ControlID="ClientSideMethodsSparkline" />
function onExported(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Exported');
}
function onExporting(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Exporting');
}
function onFileSaving(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'FileSaving');
}
function exportSparkline() {
    ClientSideMethodsSparkline.ExportTo("Sparkline", "PNG");
}
function printSparkline() {
    ClientSideMethodsSparkline.Print();
}
Screen Size
Color Themes
Demo QR Code