How to init height of cell?

Webix JS
1

I just wanna format design with own UX, and I have to resize cell’s height, I can’t find any solution. In the Menu, I find a method named ‘resizeRow’, that’s what am I need, but I don’t know how to use this method in the code, could you please tell me how to do this?

2

Hey @felix, resizeRow is a property that allows you to manually resize the rows of the datatable part of your spreadsheet, by default it is set to true for spreadsheets.

What you are looking for is probably something in the realms of this:

https://snippet.webix.com/94wj7jor.

Please take a look, there are 2 cases covered here:

  1. You can set the rowHeight of every element in your current skin by setting your webix.skin.$active.rowHeight value to whatever height you need. Note that this will resize every element that has a rowHeight property as well.

  2. Alternatively you can set the height for a specific range of rows via $$("ss").setRowHeight([1,50],26), where your first argument is the range of your rows you want to resize, and the second argument is the height.

3

Thanks, Dzmitry, that two opinions are super useful, especially webix.skin.$active, I don’t know this excellent method before, maybe cause I just use spreadsheets.js, and why this method can’t set columnWidth?

4

columnWidth property can only be defined in the datatable config, you can’t adjust the width by referencing this property specifically, use setColumnWidth() instead: https://snippet.webix.com/kumo4hxs

5

OK, I use setColumnWidth() method, and I have 4 sheets, so I will use setColumnWidth() method 4times to set columnwidth, but I can’t listener switch sheets, “onChange” event can’t worked, what should I do to listener switch sheets?

6

How about an onAfterSheetShow event? https://snippet.webix.com/bknzwq3s

7

Thanks a lot!!!

8

@felix

Starting from Webix 6.4.2 you can use rowHeight and columnWidth properties:

https://snippet.webix.com/01j2fe63

webix.ui({
  view:"spreadsheet",
  toolbar:"full",
  data:spreadsheet_data,
  rowHeight:100,
  columnWidth:250
});