How Can I create a custom binding for a SpreadJs datagrid to align a defined column?

Question

When I am creating a new column for my SPreadJs grid, I don't see any property to align my columns. For example:

var nameColInfo = { name: "Name", displayName: "Name", size: "150", resizable: true };

I would like to add a new custom binding to my grid called align. Something like this

var nameColInfo = { name: "Name", displayName: "Name", size: "150", resizable: true, **align: right** };

I don't know if this is already done by someone else. If not I will appreciate your help. I don't want to loop over my datagrid, row by row to align every cell that I need.

GrapeCity Team · Answer 1 · 2017-10-19T20:57:22.153

0

Column alignment is done through CSS.

  [data-column="Name"] {
      text-align: right;
  }

another option is to use the cssClass property, we already have a classname called align-right. cssClass: "align-right" or you can use your reference your own CSS class that sets the alignment such as: cssClass: "myStyle";

Hope this helps.

edited Oct 19 '17 at 20:57

answered Oct 19 '17 at 19:31

GrapeCity Team

837
1
5
8

I think this is not possible on a canvas object – Luis Mi Oct 19 '17 at 20:50
@LuisMi Not sure what you mean. The question is about Spread.Views product not Spread.Sheets (which uses canvas rendering) – GrapeCity Team Oct 19 '17 at 20:58
I am using Spread.Sheets which is rendering as a canvas on the html. I forgot to write that sorry. That was the reason I was not able to use the data-column tag. I tried to use cssClass: "align-right" but nothing happened. I am not sure if I am doing something wrong – Luis Mi Oct 19 '17 at 21:20
your code does not seem related to SJS.Sheets. Can you please email our tech support with a more complete sample of what you're experiencing. In SJS.Sheets you can apply cell formatting to whole range which can be the whole column, so you do not have to loop over the cells one-by-one. – GrapeCity Team Nov 04 '17 at 04:23

score 0 · Answer 2 · edited May 15 '19 at 16:59

0

This is how I fixed my problem

        // setting horizontal alignment of Col B to left
        sheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
        // setting vertical alignment of Col B to top
        sheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).vAlign(GC.Spread.Sheets.VerticalAlign.top);

edited May 15 '19 at 16:59

Giulio Caccin

2,962
6
36
57

answered May 15 '19 at 15:47

Luis Mi

13
8

How Can I create a custom binding for a SpreadJs datagrid to align a defined column?

2 Answers2