Adding Views above Cells

Spreadsheet provides an opportunity to insert images, charts and Webix views right over the cells. Users can move inserted elements to any place on the Spreadsheet using drag-n-drop.

Adding images and charts

There are three ways to add images or/and charts to the Spreadsheet:

Clicking buttons (by end user)

Using API

You can add views by calling the add() method of Spreadsheet views module:

Adding a chart and an image

ssheet.views.add(750, 50, "chart", "B2:E7", {
    type:"line", legend:1, xAxis:1, width:550, height:400
});
 
ssheet.views.add(50,400,"image","path/to/image005.jpg");

Related sample:  Spreadsheet: Adding images and charts

The method takes the following parameters:

  • x (number) - a horizontal position;
  • y (number) - a vertical position;
  • type (string) - a type of view ("chart" or "image" or custom one);
  • data (string, array) - data for the view, namely:
    • range of cells, like "B3:C7" or a named range
    • data in a JSArray format;
    • (for image) link to an image or a base64 string for it;
  • config (object) - an object with the following properties:

    Common settings:

    • width (number) - view width;
    • height (height) - view height;

    Chart-specific settings:

    • type (string) - type of charts;
    • xAxis (boolean) - if true, uses left data column as an X axis;
    • legend (boolean) - if true, uses top data row as a legend.

Loading with initial data

You can load views right in the views array in a data set. Each element contains an array of view parameters (described in the .add() method above):

webix.ready(function(){
  webix.ui({
      view:"spreadsheet",
      data: {
        data:[ /*data array*/ ],
        ...
        views:[
            [ 750, 50, "chart", "B2:E7", {type:"line", legend:1, xAxis:1} ],
            [ 50, 400, "image", "path/to/image005.jpg" ]
        ]
      }
  });
});

Related sample:  Spreadsheet: Loading images and charts

Adding Webix views

Apart from built-in charts and images, you can add any Webix view to the Spreadsheet by registering and showing a custom type.

The process consists of two steps:

Registering view

Firstly you should register a new view by calling the register() method on Spreadsheet views module. The method takes the following parameters:

  • type (string) - type of a view;
  • render (function) - function that is called during view rendering. It has the following parameters:
    • node (object) - Webix window to render the view in;
    • config (object) - object with configuration settings for the view;
    • data (array) - JSON data ready for parse;
  • track (function) - function that is called when data is changed in Spreadsheet. It has the following parameters:
    • view (object) - view instance;
    • data (array) - JSON data ready for parse.

Register new view

ssheet.views.register("table", (node, conf, data) => {
      // provide config and render the view 
      const config = { view:"datatable", autoConfig:true, autoheight:true };
      return webix.ui(config, node);
  }, (view, data) => {
      // reload changed data
      view.clearAll();
      if(webix.isArray(data))
          view.parse(data);
  }
);

Adding view

After registering you can add the view to the Spreadsheet using the add() method:

Adding view

ssheet.views.add(50, 50, "table", "B3:E7", {width:550});

Related sample:  Spreadsheet: Adding Webix view

Editing views

Biult-in content types, such as "chart" and "image" are supplied with dialogs for data editing. In case of a custom type, you need to provide a dialog pop-up for the end user to edit a view.

It is recommended to use the ssheet-dialog view to create a dialog. To keep it simple we'll put one field inside the dialog but you can insert as many form controls as you want.

Setting a dialog

var dialog = webix.ui({
  view: "ssheet-dialog",
  head: "Edit data",
  position: "center",
  body: {
    view: "form",
    elements:[
        {view: "text", name:"data", label: "Data", placeholder: "Enter data"}
    ]
  }
});

Read more about styling dialogs.

To be able to open the dialog, you should attach a handler to Spreadsheet onCommand event:

Showing a dialog

ssheet.attachEvent("onCommand", function(obj){
  obj.data = obj.config.data;
  dialog.getBody().setValues(obj);
  dialog.show();
});

Related sample:  Spreadsheet: Adding Webix view

To apply form values, you should handle the onSaveClick event of the dialog and call the update method of Spreadsheet views module:

var dialog = webix.ui({
  view: "ssheet-dialog",
  body: {
    view: "form"
  },
  on: {
    onSaveClick: function () {
        var values = this.getBody().getValues();
        // updates data according to the new values
        ssheet.views.update(values.viewid, values.data, values.config) 
        this.hide();
    },
    // other handlers
  }
});
Back to top