0

ZK Charts + Export

asked 2016-03-17 14:42:28 +0800

IngoB gravatar image IngoB flag of Germany
256 6

updated 2016-03-17 15:05:35 +0800

Hi,

I want to add a CSV Export MenuItem to the existing Export Menu in ZK Charts 2.1.1

Since the standard export menu has already some MenuItems ("Download PNG/JPEG/PDF/SVG ...") I want to add "Download CSV".

So i tried following code

ExportingButton exportingButton = charts.getExporting().getButtons();
List<MenuItem> menuItems = exportingButton.getMenuItems();

to get the MenuItem list and add my new MenuItem.

MenuItem menuItem = new MenuItem();
menuItem.setText("Download CSV");
menuItems.add(menuItem);

My problem is, that the MenuItems are always null. So how do I add an extra MenuItem to the existing ones?

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2016-03-18 02:08:57 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

updated 2016-03-18 02:16:02 +0800

The default menuitems are automatically added at client side. They don't initially exist on the server side. They have to be recreated manually if the default menu items need to be preserved:

zul file:

<zk>
    <div apply="zk.support.ChartsComposer">
        <charts id="mychart" type="pie"/>
    </div>
</zk>

composer replacing the menu:

package zk.support;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Exporting;
import org.zkoss.chart.ExportingButton;
import org.zkoss.chart.MenuItem;
import org.zkoss.chart.util.AnyVal;
import org.zkoss.json.JavaScriptValue;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.Clients;

public class ChartsComposer extends SelectorComposer<Component> {
    private static final String ON_MY_CUSTOM_ITEM = "onMyCustomItem";

    private static final long serialVersionUID = 1L;

    @Wire("#mychart")
    private Charts mychart;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        Exporting exporting = mychart.getExporting();
        ExportingButton buttons = exporting.getButtons();
        List<MenuItem> menuItems = new ArrayList<>();

        //optional rebuild the default menu items, otherwise they are replaced
        menuItems.add(defaultMenuItem("printChart", "this.print();"));
        menuItems.add(separator());
        menuItems.add(defaultMenuItem("downloadPNG", "this.exportChart();"));
        menuItems.add(defaultMenuItem("downloadJPEG", 
                        "this.exportChart({type: \"image/jpeg\"});"));
        menuItems.add(defaultMenuItem("downloadPDF", 
                        "this.exportChart({type: \"application/pdf\"});"));
        menuItems.add(defaultMenuItem("downloadSVG", 
                        "this.exportChart({type: \"image/svg+xml\"});"));
        menuItems.add(separator());
        //add custom menu items (possible at any position in the list)
        menuItems.add(customMenuItem("My Custom Item (at Client)", 
                        "alert('custem menu item clicked, handled in browser')"));
        menuItems.add(customMenuItem("My Custom Item (to Server)",
                        fireServerEventScript(ON_MY_CUSTOM_ITEM)));
        buttons.setMenuItems(menuItems);
    }

    private String fireServerEventScript(String eventName) {
        return  "var chartsWidget = zk(evt.target).$(); " +
                "chartsWidget.fire('" + eventName + "', null, {toServer: true});";
    }

    @Listen(ON_MY_CUSTOM_ITEM + " = #mychart")
    public void handleMyCustomItem() {
        Clients.showNotification("custem menu item clicked, handled on server");
    }

    private MenuItem customMenuItem(String text, String onclickJS) {
        MenuItem menuItem = new MenuItem();
        menuItem.setText(text);
        menuItem.setOnclick(new JavaScriptValue("function(evt) {" + onclickJS + "}"));
        return menuItem;
    }

    private MenuItem defaultMenuItem(String textKey, String onclickJS) {
        MenuItem menuItem = new MenuItem();
        menuItem.addExtraAttr("textKey", new AnyVal<String>(textKey));
        menuItem.setOnclick(new JavaScriptValue("function(evt) {" + onclickJS + "}"));
        return menuItem;
    }

    private MenuItem separator() {
        MenuItem menuItem = new MenuItem();
        menuItem.addExtraAttr("separator", new AnyVal<Boolean>(true));
        return menuItem;
    }
}

As you can see I created a few helper methods to make this easier. I hope this helps.

link publish delete flag offensive edit

Comments

Wow! That is exactly I was looking for. Thanks :)

IngoB ( 2016-03-18 08:40:23 +0800 )edit

you're welcome

cor3000 ( 2016-03-18 09:42:55 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2016-03-17 14:42:28 +0800

Seen: 29 times

Last updated: Mar 18 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More