How-tos

Check also the File Manager How-to guides, because Document Manager is built upon this widget and can be customized in the same way.

Editing Excel files using Spreadsheet

You can edit Excel files using Spreadsheet.

Files to include

First of all you need to include Spreadsheet in your page:

<!-- spreadsheet js file -->
<script src="codebase/spreadsheet.js" type="text/javascript"></script>
<!-- spreadsheet css file -->
<link rel="stylesheet" type="text/css" href="codebase/spreadsheet.css">

Adding editor to UI

After that you need to define a new custom class and inherit it from the default one (docManager.views.excel). Inside the config() method we set the configuration for Spreadsheet and add it to the UI.

Adding Spreadsheet to UI

class Editor extends docManager.views.excel {
  config() {
    const ui = super.config();
    ui.rows[1] = {
      view: "spreadsheet",
      localId: "editor",
      //...
    };
    return ui;
  }
}

To be able to track changes made by users we need to listen to the onChange event of Spreadsheet and call the ChangeTextState() method with true as the argument:

Tracking changes

class Editor extends docManager.views.excel {
  //...
    init() {
    // default logic
    super.init();
    // Spreadsheet has a different event to track changes
    this.on(this.$$("editor"), "onChange", () =>
      this.ChangeTextState(true)
    );
  }
}

After that don't forget to override the default class with the new one:

Overriding default class

webix.ui({
  view: "docmanager",
  url: "https://master--docmanager-go--dev.webix.io/",
  // overriding the default editor with the new one
  override: new Map([[docManager.views.excel, Editor]])
});

Saving files

To be able to save edited files you need to define a method to put all the saving logic in.

Custom method for saving

Save() {
  const editor = this.$$("editor");
  // stop editing and close the editor
  editor.$$("cells").editStop();
  webix
  .toExcel(editor, {/* optional excel settings*/})
  .then(data => {
    this.app
      .getService("operations")
      // replace old values with new ones
      .writeBinary(this.File.id, this.File.value, data);
    this.ChangeTextState(false);
  });
}

Related sample:  Document Manager: Working with Excel via Spreadsheet

Back to top