0 May 20 2013 Sample SpreadJS

How to Set Cell Styles in SpreadJS

A Cell Style is a great way to make important data stand out on a sheet, SpreadJS provides styles to customize your text to give it the exact look you want. You can add a variety of styles and colors to your text, as well as borders or gridlines of cells.

Give your text a specific color and font style by using the font method of the Cell object. SpreadJS uses syntax of css font, same as the way to set font for other DOM elements.

sheet.addSpan(1, 1, 1, 5);
sheet.setValue(1, 1, "Sale Data Analysis");
sheet.getCell(1, 1).font("bold 16px arial");
sheet.getCell(1, 1).foreColor("white");
sheet.getCell(1, 1).backColor("Purple");.

Plus, give different color or line style borders to a range of cells by using the setBorder method of the Sheet object. It provides many options to easily determine which part of the cell range to set.

sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.thin), { outline: true });
sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Blue", $.wijmo.wijspread.LineStyle.dotted), { inside: true });
sheet.setBorder(new $.wijmo.wijspread.Range(5, 1, 1, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.double), { bottom: true });

And you also can change the color of the gridline, even hide the gridline to make your data stand out on the sheet.

sheet.setGridlineOptions({showVerticalGridline: false, showHorizontalGridline: false});

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.

0 May 17 2013 Sample Tutorials Video

Wijmo 2013 v1 Webcast

Thanks to everyone that showed up for our webcast this week. It had record breaking attendance here at ComponentOne! If you missed it or want to share or watch it again, here is the recording.

Video

Join Sheela Nath and Chris Bannon as they unveil new technology from Team Wijmo. Wijmo 2013 v1 was a major release that added jQuery Mobile support, new widgets and a powerful spreadsheet component. We have been solidifying our framework and creating a platform for HTML5 development. Come take a tour through Wijmo 2013 v1.

Samples

These samples will be integrated into our download soon. But for now you can download them here.

You can also try out AppView and SpreadJS from our online demos. And don’t forget to download wijmo and start building great mobile applications.

Slides

1 May 16 2013 Sample SpreadJS

How To Merge Cells in SpreadJS

Merging is when you combine a range of cells to create a new, larger cell. This is a great way to create a label that spans several columns or several rows. You can easily create a cell span in the view port, row header, or column header area. For example, here cells A1, B1, and C1 were merged to create the label “Monthly Sales” to describe the information below. It is easy to do it with code:

sheet.addSpan(0, 0, 1, 3);
sheet.getCell(0, 0).hAlign($.wijmo.wijspread.HorizontalAlign.center)
sheet.setValue(0, 0, "Monthly Sales");
sheet.setValue(1, 0, "Jan");
sheet.setValue(1, 1, "Feb");
sheet.setValue(1, 2, "Mar");

And you can use the addSpan method to merge cells on the row header or the column header, by simply adding a SheetArea parameter.
sheet.addSpan(0, 0, 1, 3, $.wijmo.wijspread.SheetArea.colHeader);

Certainly, you can remove span from a merged cell by using the removeSpan method, this code removes the span for all merged cells in the sheet view port.

var spans = sheet.getSpans();
for(var i = 0; i < spans.length; i++) {
	sheet.removeSpan(spans.row,spans.col);
}

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.