Quantcast
Channel: Spread Help » Spread
Viewing all 105 articles
Browse latest View live

Spread Windows Forms and Drag and Drop

$
0
0

You can drag and drop data from a Spread control to another Spread control using drag events such as DragEnter, DragOver, and DragDrop. Drag and drop requires fewer steps than copy and paste.

The following example demonstrates using drag and drop with two Spread controls and a list box control.

1. Set the AllowDrop property to true to specify that you can drop data on a control. Set the AllowDragDrop property for Spread as well as the AllowDrop property to allow data to be dropped on the Spread control. For example:

listBox1.AllowDrop = true;
fpSpread2.AllowDrop = true;
fpSpread2.AllowDragDrop = true;

This Spread example uses data from a database as the source data. For example:

cr = new FarPoint.Win.Spread.Model.CellRange(0, 0, 1, 1);
s = fpSpread1.ActiveSheet.GetClip(0, 0, 1, 1);

string pathname;
pathname = Environment.GetFolderPath(Environment.SpecialFolder.ProgramFiles) + "\\GrapeCity\\Spread Studio 8\\Common\\";
string conStr = "Provider=Microsoft.JET.OLEDB.4.0;data source= " + pathname + "Patients2000.mdb";
string sqlStr = "SELECT * FROM Patients";
System.Data.OleDb.OleDbConnection conn = new System.Data.OleDb.OleDbConnection(conStr);
DataSet ds = new DataSet();
System.Data.OleDb.OleDbDataAdapter da = new System.Data.OleDb.OleDbDataAdapter(sqlStr, conn);
fpSpread1.ActiveSheet.DataAutoSizeColumns = true;
da.Fill(ds);
fpSpread1.DataSource = ds;

2. The DragOver event occurs when the control is being dragged over another object. You can use this event to specify what happens after dragging starts and before the control is dropped. The Spread example uses this event to get the column and row indexes, to clear the previous selection, and to add a new selection based on the selected data.

private void fpSpread2_DragOver(object sender, DragEventArgs e)
        {
            int r, c, rc, cc;
            r = cr.Row;
            c = cr.Column;
            rc = cr.RowCount;
            cc = cr.ColumnCount;
            Point p = fpSpread2.PointToClient(new Point(e.X, e.Y));
            FarPoint.Win.Spread.Model.CellRange range = fpSpread2.GetCellFromPixel(0, 0, p.X, p.Y);
            if (range.ColumnCount == -1 && range.RowCount == -1)
                return;
            FarPoint.Win.Spread.Model.CellRange sel = fpSpread2.ActiveSheet.GetSelection(0);
            if (sel != null)
            fpSpread2.ActiveSheet.RemoveSelection(sel.Row, sel.Column, sel.RowCount, sel.ColumnCount);

            if (cc == -1)
            {
                fpSpread2.ActiveSheet.AddSelection(range.Row, -1, rc, -1);
            }
            else if (rc == -1)
            {
                fpSpread2.ActiveSheet.AddSelection(-1, range.Column, -1, cc);
            }
            else
            {
                fpSpread2.ActiveSheet.AddSelection(range.Row, range.Column, rc, cc);
            }                       
        }

3. The DragEnter event occurs when the control is dragged into the target drop area. You can use this event to get data and set drag effects. Drag effects in this event will be overwritten if they are also set in the DragOver event. If you want to add effect code to DragOver instead, you could add code similar to the following. This code changes the effect if you also use the Ctrl key. For example:
(VB) e.Effect = IIf((ModifierKeys And Keys.Control) = Keys.Control, DragDropEffects.Copy, DragDropEffects.Move) or (C#) e.Effect = ((ModifierKeys & Keys.Control) == Keys.Control ? DragDropEffects.Copy : DragDropEffects.Move);

private void fpSpread2_DragEnter(object sender, DragEventArgs e)
        {
            if (e.Data.GetDataPresent(DataFormats.Text))
            {
                e.Effect = DragDropEffects.Move;
            }            
        }

4. The DragDrop event occurs when the mouse is released during the drag and drop operation. Use this event to handle the data you wish to put on the target control. The Spread example uses this event to get the current selection and place the data in the Spread control with the SetClip method.

private void fpSpread2_DragDrop(object sender, DragEventArgs e)
        {
            int r, c, rc, cc;
            r = cr.Row;
            c = cr.Column;
            rc = cr.RowCount;
            cc = cr.ColumnCount;
            FarPoint.Win.Spread.Model.CellRange sel = fpSpread2.ActiveSheet.GetSelection(0);
            if (sel != null)
                fpSpread2.ActiveSheet.SetClip(sel.Row, sel.Column, sel.RowCount, sel.ColumnCount, s);            
        }

5. This example uses the MouseDown event to specify drag drop effects for the right mouse button when getting the data from fpSpread1.

private void fpSpread1_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Right)
            {
                fpSpread1.DoDragDrop(s, DragDropEffects.Copy | DragDropEffects.Move);
            }            
        }

6. This example uses the MouseUp event to get data from fpSpread1.

private void fpSpread1_MouseUp(object sender, MouseEventArgs e)
        {
            try
            {
                cr = fpSpread1.ActiveSheet.GetSelection(0);
                s = fpSpread1.ActiveSheet.GetClip(cr.Row, cr.Column, cr.RowCount, cr.ColumnCount);
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.ToString() + "You did not make a selection!");
                return;
            }           
        }

You can get the complete sample from: DragAndDropCSharp or DragAndDropVB. You will need to add the Spread references to the project. They are not included in the zip file.

Run the example and select the data from fpSpread1 that you wish to drag, right-click on the selection, then drag it to fpSpread2 or the list box. Release the mouse to drop the data. The mouse pointer must be over a cell in the Spread control (not a header). The list box only displays the data from the active cell in this example.

Drag-drop usually uses the left mouse button. This example uses the right mouse button for drag because the left mouse button is used for the selection in Spread.


Spread ASP.NET and Custom Cell Types

$
0
0

Spread ASP.NET allows you to create your own custom cell types. This can be useful if a default cell type does not have the feature you need.

You can implement your own types of cells by creating a subclass that inherits an existing cell type (that is, override methods in that class). The custom cell type class should be marked as serializable so it works for the view state.

The BaseCellType class is a class from which the built-in text based cell types (for example, general, text, number, data-time, and so on.) are derived. The class can also be used to derive custom cell types that are text based. The data model can hold any value, including colors. The cell type is always passed the raw value from the data model.

You can override any of the following methods to create a custom cell.

BaseCellType methods:

Clone Creates a new copy of the object using the MemberwiseClone method.
Format When deriving a cell type based on this type, override this to change what gets passed back and formatted as a string into the cell on the sheet from the object in the data model.
GetEditorControl Gets the control used to edit the cell.
GetEditorValue Gets the value from the editing control used for the cell.
GetPreferredSize Gets the preferred (maximum required) size of the cell for the renderer control when printing to PDF.
GetValidators Gets the validator collection, overwrite this method to allow customizing the returned result from the Validators property.
PaintCell Gets a control and renders it in the cell based on the specified appearance, margin, and value.
Parse When deriving a cell type based on this type, override this to change what gets parsed from the cell on the sheet and put in the data model.
RendererClientScriptUrl2 Gets the URL of the client script file for the renderer for the specified Spread component, if the renderer supports client-side scripting.
SetTabIndex Sets TabIndex for the editor.
ToString Gets the name of the cell type.
ValidateEditorValue Validates the given value.

The Format method is used to get the string value to put in the clipboard text for the cell. The Parse method is used to convert that clipboard text back into a value when pasting. The methods are also generally used for converting the raw value to a string and back when editing, but that depends on the implementation of the cell type (most built-in cell types operate that way but a custom cell type does not need to). For example, the custom cell type might allow the user to edit the value as a URL string, and render it with an image tag, if the custom cell type displays an image. In that case, Format or Parse might not actually be needed since it would just copy or paste the raw URL value and also use that in the data model.

You can override any of the following properties in the BaseCellType class:

EditorClientScriptUrl Gets the URL of the client script file for the editor, if the editor supports client-side scripting.
RendererClientScriptUrl Gets the URL of the client script file for the renderer, if the renderer supports client-side scripting.
Validators Gets the validator collection.

The RenderClientScriptUrl2 method and the RenderClientScriptUrl and EditorClientScriptUrl properties do not take effect with Internet Explorer 10 or higher or with other browsers such as Firefox or Chrome. They are provided for the older style HTC model.

This example creates a custom cell from a combo cell and overrides the GetEditorControl method to disable a specific item in the drop-down list.

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using FarPoint.Web.Spread;

namespace SpreadASPNET8CSharp
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            customCombo ComboCell = new customCombo();
            ComboCell.Items = new String[] { "Jan", "Feb", "March", "April" };
            ComboCell.BackColor = System.Drawing.Color.Aqua;
            FpSpread1.Sheets[0].Cells[0, 0].CellType = ComboCell;
        }
    }

    [Serializable()]
    public class customCombo : FarPoint.Web.Spread.ComboBoxCellType
    {
        public override Control GetEditorControl(string id, TableCell parent, Appearance style, Inset margin, object value, bool upperLevel)
        {
            DropDownList ddl = (System.Web.UI.WebControls.DropDownList)base.GetEditorControl(id, parent, style, margin, value, upperLevel);

            if (ddl != null)
            {
                foreach (System.Web.UI.WebControls.ListItem item in ddl.Items)
                {
                    if (item.Value == "Feb")
                    {
                        item.Attributes.Add("disabled", "disabled");
                    }
                }
            }
            return ddl;
        }

    }
}

VB

Imports FarPoint.Web.Spread

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim ComboCell As New customCombo
        ComboCell.Items = New String() {"Jan", "Feb", "March", "April"}
        ComboCell.BackColor = Drawing.Color.Aqua
        FpSpread1.Sheets(0).Cells(0, 0).CellType = ComboCell
    End Sub
End Class

<Serializable()> Public Class customCombo
    Inherits FarPoint.Web.Spread.ComboBoxCellType

    Public Overrides Function GetEditorControl(id As String, parent As TableCell, style As Appearance, margin As Inset, value As Object, upperLevel As Boolean) As Control
        Dim ddl As DropDownList = CType(MyBase.GetEditorControl(id, parent, style, margin, value, upperLevel), System.Web.UI.WebControls.DropDownList)
        If IsNothing(ddl) Then Exit Function
        For Each item As System.Web.UI.WebControls.ListItem In ddl.Items
            If item.Value = "Feb" Then
                item.Attributes.Add("disabled", "disabled")
            End If
        Next
        Return ddl
    End Function   
End Class

You can download a larger example that demonstrates custom cells and renderers from this link: EditorRendererCS. The zip file does not contain the Spread ASP.NET assemblies.

Getting the Most Out of Your Spread Experience

$
0
0

If you own a Spread license, you probably already know a lot about the product, but did you know everything that comes with it? Use this article as a guide to getting the most out of your partnership with us.

Register Your Key

Registering your key with us helps identify your account should problems arise, helps you manage your licenses online, and ensures that you get timely updates. Go to My Account to do so. It only takes a minute.

Free Support and Other Resources

Our number one goal is to make you sucessful. In pursuit of that goal, we provide a few ways to get help.

  • Online Support: Any Spread user can submit a ticket. Fill out the form and a Spread expert will be in touch shortly. 
  • Forums: We have a set of very active forums that have been visited by over 300,000 developers. We monitor them and help solve problems.
  • Online Documentation: You may have downloaded documentation with the product, but you can also visit the library online.
  • Blogs: Our experts regularly post technical articles.

Maintenance Contracts

Maintenance is avaiable for a very low cost and gets you unlimited phone support and any of your product releases for one year. If you didn’t add maintenance at time of purchase, you can do so by contacting spread.sales@grapecity.com.

Need More Time to Try Spread? No Problem.

$
0
0

Spread installs as a fully functional 30-day trial to give you time to evaluate it and see if it meets your needs. That 30-day period starts when you install it. Sometimes, you install and get distracted or you simply need more time to see if it fits your projects. No problem. We understand. If you need more time, email spread.sales@grapecity.com and we will send you a new key that will extend your trial period.

Using Charts in SpreadJS V9

$
0
0

Using Custom Floating Objects in SpreadJS can be useful to display large graphs inside of the widget. However, large amounts of data can be hard to display in the widget with the graph. In this blog, I will describe the steps for creating a D3-based chart using data from a SpreadJS widget used a fixed-position div element.

This is an updated version of the V8 blog here: http://sphelp.grapecity.com/2015/09/14/using-charts-in-spreadjs/

To download the sample used in this blog, click here: SpreadJS Charts V9

To start off, sample data is needed to display in the chart. In this example, I loaded the data from a Spread-formatted JSON file into the SpreadJS widget:

$(document).ready(function () {
    var spread = new GcSpread.Sheets.Spread($(“#ss”).get(0));
    spread.fromJSON(data);
    activeSheet = spread.getSheet(1);
    var rowNum = 366;
    var colNum = 
}

The data in this example is a series of Max Temperatures, Minimum Temperatures, and Precipitation levels over the course of a year. A line graph best fits this data, so create a C3 line chart with the “x” data being the “Month” column in the JSON and the other series being the individual lines:

chart = c3.generate({
    bindto: ‘#chart’,
    data: {
        type: ‘line’,
        x: ‘Month’,
        rows: activeSheet.getArray(0, 0, rowNum, colNum),
    },
    axis: {
        x: {
            type: ‘timeseries’
        }
    }
});

The c3.generate code is bound to whatever div has the ID of “chart”, which is the reason for the “bindto: ‘#chart’” attribute.
When the page is loaded, this will generate the chart with the lines corresponding to the specified columns in the sheet. To ensure that the graph is updated when the values in those columns change, then put the same code from above in the ValueChanged event on the sheet:

activeSheet.bind(GcSpread.Sheets.Events.ValueChanged, function (sender, args) {  (code above goes here) }

To keep the chart in the same position in the Spread widget (regardless of scrolling), a custom floating object can’t be used to contain the graph. Instead, a div element with an absolute position can be placed on top of the Spread, to give the illusion that it is inside of it.
To do this, create a parent div on the page to contain both the Spread and the graph with a “relative” position attribute:

<div style=”position:relative; width:1200px; height:550px;”></div>

Place the SpreadJS widget and a DIV element with the ID of “Chart” inside of that parent DIV element with “absolute” position attributes:


<div style=”position:relative; width:1200px; height:550px;”>
    <div id=”ss” style=”position:absolute; left:0; top:0; width:1200px; height:550px; border:1px solid gray”></div>
    <div id=”chart” style=”position:absolute; left:450px; top:50px; width:700px; height:425px; background:white; border:1px solid gray”></div>
</div>

The outcome of these settings is that the chart is on top of the Spread widget, but appears to be inside of it. However, it is not affected by scrolling in the widget, so large amounts of data can scrolled through while also showing the graph.
More information on using C3 can be found here: http://c3js.org/gettingstarted.html.

The HTML page with SpreadJS and a C3 chart.

The HTML page with SpreadJS and a C3 chart.

What Was Added to SpreadJS in v8

$
0
0

SpreadJS was introduced in Spread Studio in April 2015 as SpreadJS v8. The prevrious version was part of the Wijmo product family. Below are the features that were added to SpreadJS in v8.

 Formula Enhancements

  • Volatile functions: Volatile functions such as RAND, RANDBETWEEN, NOW, TODAY update once the SpreadJS calculation engine recalculates.
  • SUBTOTAL function ignores hidden rows: The SUBTOTAL function behaves similar to Excel. When the function_num is 1 to 11, the evaluator includes the hidden values; when the function_num is 101 to 111, the evaluator ignores the hidden values.
  • INDIRECT function support: Returns the reference specified by a text string. References are immediately evaluated to display their contents. Use INDIRECT when you want to change the reference to a cell within a formula without changing the formula itself.
  • Async Functions Support: A new AsyncFunction class which is used to make an async custom function, it is possible to asynchronously calculate or load data during function evaluation and the result is shown in the cell asynchronously. For example, get data from the server side by using an ajax call in the function evaluation, the result is shown in the cell asynchronously without blocking UI operation.

Cell and Table-Level Binding Enhancements

Spread Designer reads the data schema and makes fields available in the UI. Those fields can then be dragged to cells for easy cell-level binding. Table level binding can also be performed by dragging an array type data field into the cell.

Cell binding in the SpreadJS Designer

Cell binding in the SpreadJS Designer

Serialization Enhancements

  • Data Source Serialization:SpreadJS now provides an option that indicates whether to serialize bound cell values into JSON.
  • Custom type Serialization: SpreadJS has types that can be customized. These include CellType, Function, Formatter, SparklineEx, Tag, and RowFilter. Now these customized types can be serialized into JSON so that they are initialized automatically during deserialization.

Filter Enhancements

Added two override methods to the RowFilter class so you can have actions for filtering and un-filtering. It is also possible to hide the filter button for a specific column.

Customize Header Interaction

Provides ability to process mouse events for header celltype which allows you to customize mouse behaviors for row or column headers.

Interactive headers

Interactive headers

More Enhancements

  • ExcelIO Service: Comments can now be imported from or exported to an Excel file. It is also possible to specify the download file name when exporting to an Excel file.
  • Tag property: Tag properties for cell, row, column and sheet object allow you to store any value with these objects.
  • FormulaTextBox: Wwhen editing a formula in the FormulaTextBox,it is possible to select a cell range in another sheet using the mouse.
  • Watermark: Shows gray watermark string for the cell when the value is empty.
  • Hide Selection: Seelection indicator can be hidden when the control does not have focus.
  • Process Tab: Supports entering or leaving the control using tab navigation and provides three new sets of actions for responding to tab navigation in a web page.
  • RangeChanged Event: Provides event arguments in RangeChanged event, such as drag drop, drag fill, clear, paste, or sort.
  • Designer UI Enhancements: The designer has been updated to mimic Excel 2013.

What’s New in Spread 9

$
0
0

In this article, you will find new features and enhancements added to Spread v8 categorized by platform.

All Platforms

Windows 10, Visual Studio 15, and Excel 2016 Support

  • Spread will work in Visual Studio 15.
  • Applications you create with Spread will work in Windows 10 and Edge.
  • Spread will import/export Excel 2016 files and includes Office 2016 themes.
Spread Studio running in Windows 10 and Visual Studio 15 with an Excel 2016 theme.

Spread Studio running in Windows 10 and Visual Studio 15 with an Excel 2016 theme.

JavaScript-HTML5

SpreadJS

Preview and Print Data Views

Include a print button on your page that opens the standard browser print window. SpreadJS supports all the printing options you will need including best fit, gridlines, borders, header, footer, margins, page fit, page size, and page breaks. Print settings are also preserved when importing and exporting Excel files.

Table Slicer

Filter and analyze data with SpreadJS’s Excel-like table slicer. You can use the slicer in two ways. Use a standard Excel-like button slicer that gives a convenient set of button filters. Alternately, use the slicer widget to add convenient controls, such as buttons, checkboxes, and sliders, that allow you to slice data by values, date ranges, and number ranges. The first gives a classic Excel experience while the second provides a more interactive experience you expect from a robust data grid. You can even use bar charts as slicer controls to provide drill-down functionality. SpreadJS’s slicer can be even be used independently.

Variations of the SpeadJS Table Slicer

Variations of the SpeadJS Table Slicer.

Chinese Localization

SpreadJS supports Chinese character sets.

Excel Import/Export Component

Until now, SpreadJS’s Excel Import/Export features required an installed web service. ExcelIO is now a component that enables you to distribute it without license worry and exposes a public API making it easier to work with.

Fixed Position Floating Objects

The floating obect now has a property to fix its position so you can add a chart, image, or other obect that won’t scroll off the screen as users navigate your spreadsheet.

Designer Improvements

  • Enhanced Paste: Choose to paste all, values, formatting, or formulas.
  • Tab Color: Change tab color in the designer UI.

Excel-like Behavoir Enhancements

  • Hidden row and column indicator
  • Disable sheet navigation
  • Ignore hidden rows and columns when scrolling
  • Disable copy for locked cells
  • Protect sheets and cells

WinForms

Smoother, More Accurate Scrolling

Rather than scroll by row or column, which can provide a choppy scrolling experience, the view now scrolls by pixel, which provides a smooth experience. Pixel based scrolling also enables the user to leave the view scrolled to a part of a cell. Previously, the view would always snap to a row or column border. This is especially beneficial in touch scenarios.

Diagonal Line Borders

Enjoy more control over design with diagonal borders that draw lines inside of cells. This is useful for crossing out cells or drawing borders around rotated text.

Example of diagonal borders in Spread.

Example of diagonal borders in Spread.

Enhanced High DPI Support

Spread and applications created with spread are DPI aware and will automatically scale. Spread also includes two icon sets for interface buttons and other indicators, one for normal DPI and one for high (200% DPI). This ensures interface buttons, such as filter drop downs, and other icons, such as indicators used in conditional formatting, always look the best they can. The screen shot below shows what a conditional formatting scenario looks like before and after this enhancement.

Comparison of icons with and without high DPI support.

Comparison of icons with and without high DPI support.

Enhanced Numerical Cell Types

Spread has a new number cell type (GcNumberCellType) that adds many features and properties to numerical cells. Features include:

  • Alternate text
  • Display fields
  • Fields
  • Context menu
  • Negative color
  • Recommended value
  • Drop-down window
  • Drop-down calculator
  • Popup window
  • Side buttons
  • Toggle sign with minus key
  • Japanese keyboard support
  • Delete with delete and backspace
  • Percentage support
  • Improved paste behavior
New numeric cell type properties.

New numeric cell type properties.

New Chart Line Styles (with Excel I/O Support)

Spread now allows you to set the style of the series in line charts, much like Excel does. You can set these properties in code or using the designer. Supported properties are also preserved when importing Excel files with line charts. Options include:

  • Color
  • Transparency
  • Width
  • Compound type
  • Dash type
  • Arrows (cap type, cap size, arrow size, arrow type)
  • Join type
Spread's new line chart.

Spread’s new line chart.

Touch-friendly Date Picker

Spread now includes a date picker that supports touch interaction.

New Selection Style Options

Spread behaves the same as Excel in order to give users a familiar experience, but sometimes developers want to alter certain behaviors. In this case, we have added optional style properties related to cell selection.

  • Choose to highlight the active cell in a selected range or to have the same background as the others. In Excel, that cell would not have a selection background.
  • Choose to not highlight the selected row and cloumn header. In Excel, they would be highlighted.
  • Show row editing selector.

More Enhancements

  • Enhanced Selection Border: When selecting a range, Spread will draw a border around the entire selection by default.
  • Optional Filtering Behavior: When row filters are set, Spread automatically applies filter rules to any new data or styles entered or edited. This is not the case in Excel. The filter needs to be explicitly executed. Spread now has the option to use Excel-like behavior.
  • Editing Cell Keeps Vertical Alignment: When editing a cell, its vertical alignment will be preserved. Previously the alignement would change to top when editing.
  • Remote Desktop Support: Spread fully supports the use of remote desktop in runtime.
  • Improved PDF Export Performance: PDFs are creates approximately 10% faster.
  • Shape Text Alignment: Spread now supports alignment of text inside a shape.
  • Row/Column Move Performance Improvement: When you move, rows and columns in Spread, it shows a clone of your selection while you drag them. Sometimes, that causes a performance issue. You can now disable that indicator or create your own behavior.

ASP.NET

Touch Support for Edge and Chrome

Spread’s web apps will support touch interaction in Microsoft Edge and Google Chrome. In the image below, notice the touch handles on the selected cell range.

Range selection with touch handles.

Range selection with touch handles.

Support for AJAX Control Kit v15.1

Spread now supports these AJAX Control kit v15.1 extender Cell Types:

  • Autocomplete
  • Calendar
  • Combo box
  • Filtered text
  • Masked edit
  • Mutually exclusive checkbox
  • Numeric spinner
  • Rating
  • Silder
  • Slide Show
  • Text box with watermark

 

 

Spread Windows Forms and GcNumber Cell

$
0
0

Number cells can be used to only allow number values in a cell. This saves time by requiring less validation. Spread for Windows Forms has two number cells. The original number cell supports fractions as well as a calculator or incremental side buttons.

The GcNumber cell was added to the version 9 release and supports a drop-down calculator, side buttons, pop-up calculator, and display fields. The GcNumberCellType class that is used to create a GcNumber cell is part of the GrapeCity.Win.PluginInputMan assembly. The following information explains how to use a GcNumber cell.

Select the side button to display the drop-down calculator as shown in the following image. Select OK to close the calculator and update the cell with the calculator value.

gcnumcalc

Calculator

The following code creates a default GcNumber cell. You can also use the designer to create cell types.

C#

GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType ncell1 = new GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType();
fpSpread1.ActiveSheet.Cells[2, 1].CellType = ncell1;

VB

Dim ncell1 As New GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType()
FpSpread1.ActiveSheet.Cells(2, 1).CellType = ncell1

You can display the pop-up calculator using the Ctrl key and the add, subtract, multiply, or divide key on the number pad while the cell is in edit mode. This displays the edit box which allows you to calculate a value. Press Enter to finish the calculation.

gcnumctrl

Pop-up Calculator

You can use spin buttons, the mouse wheel, or up and down arrow keys to change the value. Use the SideButtons.Add method, SpinOnWheel property, or SpinOnKeys property to specify the options for changing the value.

This example creates a GcNumber cell that allows you to use the up and down arrow keys to change the value.

C#

GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType ncell1 = new GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType();
ncell1.Spin.AllowSpin = true;
ncell1.Spin.IncrementValue = 2;
ncell1.Spin.SpinMode = GrapeCity.Win.Spread.InputMan.CellType.NumberSpinMode.Value;
//Use up or down arrow keys to change the value
ncell1.Spin.SpinOnKeys = true;
fpSpread1.Sheets[0].Cells[1, 1].CellType = ncell1;
fpSpread1.ActiveSheet.Cells[1, 1].Value = 12.3189;

VB

Dim ncell1 = New GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType()
ncell1.Spin.AllowSpin = True
ncell1.Spin.IncrementValue = 2
ncell1.Spin.SpinMode = GrapeCity.Win.Spread.InputMan.CellType.NumberSpinMode.Value
'Use up or down arrow keys to change the value
ncell1.Spin.SpinOnKeys = True
FpSpread1.Sheets(0).Cells(1, 1).CellType = ncell1
FpSpread1.ActiveSheet.Cells(1, 1).Value = 12.3189

This example creates a GcNumber cell that allows you to use the mouse wheel to change the value.

C#

GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType ncell1 = new GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType();
ncell1.Spin.AllowSpin = true;
ncell1.Spin.IncrementValue = 2;
//Put the edit cursor to the left of the digit, then use the mouse wheel
ncell1.Spin.SpinMode = GrapeCity.Win.Spread.InputMan.CellType.NumberSpinMode.Digits;
ncell1.Spin.SpinOnWheel = true;
fpSpread1.Sheets[0].Cells[1, 1].CellType = ncell1;
fpSpread1.ActiveSheet.Cells[1, 1].Value = 12.3189;

VB

Dim ncell1 As New GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType()
ncell1.Spin.AllowSpin = True
ncell1.Spin.IncrementValue = 2
'Put the edit cursor to the left of the digit, then use the mouse wheel
ncell1.Spin.SpinMode = GrapeCity.Win.Spread.InputMan.CellType.NumberSpinMode.Digits
ncell1.Spin.SpinOnWheel = True
FpSpread1.Sheets(0).Cells(1, 1).CellType = ncell1
FpSpread1.ActiveSheet.Cells(1, 1).Value = 12.3189

The following example creates side buttons for the GcNumber cell.

GcNum

Side Buttons

C#

GrapeCity.Win.Spread.InputMan.CellType.SideButtonInfo testbutton = new GrapeCity.Win.Spread.InputMan.CellType.SideButtonInfo();
testbutton.Behavior = GrapeCity.Win.Spread.InputMan.CellType.SideButtonBehavior.SpinDown;
testbutton.BackColor = Color.Red;
testbutton.UseVisualStyleBackColor = false;
GrapeCity.Win.Spread.InputMan.CellType.SideButtonInfo testbutton1 = new GrapeCity.Win.Spread.InputMan.CellType.SideButtonInfo();
testbutton1.BackColor = Color.Green;
testbutton1.UseVisualStyleBackColor = false;
testbutton1.Behavior = GrapeCity.Win.Spread.InputMan.CellType.SideButtonBehavior.SpinUp;
GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType ncell1 = new GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType();
//Clears other buttons including the calculator button
ncell1.SideButtons.Clear();
ncell1.SideButtons.Add(testbutton);
ncell1.SideButtons.Add(testbutton1);
ncell1.Spin.AllowSpin = true;
ncell1.Spin.IncrementValue = 1;           
ncell1.Spin.SpinMode = GrapeCity.Win.Spread.InputMan.CellType.NumberSpinMode.Value;          
fpSpread1.Sheets[0].Cells[1, 1].CellType = ncell1;
fpSpread1.ActiveSheet.Cells[1, 1].Value = 12.31;

VB

Dim testbutton As New GrapeCity.Win.Spread.InputMan.CellType.SideButtonInfo()
testbutton.Behavior = GrapeCity.Win.Spread.InputMan.CellType.SideButtonBehavior.SpinDown
testbutton.BackColor = Color.Red
testbutton.UseVisualStyleBackColor = False
Dim testbutton1 As New GrapeCity.Win.Spread.InputMan.CellType.SideButtonInfo()
testbutton1.BackColor = Color.Green
testbutton1.UseVisualStyleBackColor = False
testbutton1.Behavior = GrapeCity.Win.Spread.InputMan.CellType.SideButtonBehavior.SpinUp
Dim ncell1 As New GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType()
'Clears other buttons including the calculator button
ncell1.SideButtons.Clear()
ncell1.SideButtons.Add(testbutton)
ncell1.SideButtons.Add(testbutton1)
ncell1.Spin.AllowSpin = True
ncell1.Spin.IncrementValue = 1
ncell1.Spin.SpinMode = GrapeCity.Win.Spread.InputMan.CellType.NumberSpinMode.Value
FpSpread1.Sheets(0).Cells(1, 1).CellType = ncell1
FpSpread1.ActiveSheet.Cells(1, 1).Value = 12.31

You can create display fields for the cell. Properties that apply to formatting or behavior are visible when the cell is not in edit mode.

The NumberDisplayFieldInfo is an abstract base class for the following display field classes:

  • NumberDecimalGeneralFormatDisplayFieldInfo
  • NumberDecimalPartDisplayFieldInfo
  • NumberDecimalSeparatorDisplayFieldInfo
  • NumberIntegerPartDisplayFieldInfo
  • NumberLiteralDisplayFieldInfo
  • NumberMoneyPatternDisplayFieldInfo
  • NumberSignDisplayFieldInfo
  • NumberSystemFormatDisplayFieldInfo

The following code creates display fields for the GcNumber cell.

gcnumdisplayfields

Display Fields

C#

GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberDecimalPartDisplayFieldInfo ndp = new GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberDecimalPartDisplayFieldInfo();
ndp.MaxDigits = 3;
ndp.BackColor = Color.Orange; //PaintByControl must be true for appearance properties
GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberDecimalSeparatorDisplayFieldInfo ndecimal = new GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberDecimalSeparatorDisplayFieldInfo();
ndecimal.DecimalSeparator = Convert.ToChar("A");
GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberIntegerPartDisplayFieldInfo npart = new GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberIntegerPartDisplayFieldInfo();
npart.MinDigits = 3;
npart.BackColor = Color.Bisque;
GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType ncell1 = new GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType();
ncell1.DropDownCalculator.FlatStyle = FlatStyle.Popup;
ncell1.DropDownCalculator.Font = new System.Drawing.Font("Comic Sans MS", 10);
ncell1.PaintByControl = true;
ncell1.DisplayFields.Add(ndp);
ncell1.DisplayFields.Add(ndecimal);
ncell1.DisplayFields.Add(npart);
fpSpread1.Sheets[0].Cells[1, 1].CellType = ncell1;
fpSpread1.ActiveSheet.Cells[1, 1].Value = 12.3189;

VB

Dim ndp As New GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberDecimalPartDisplayFieldInfo()
ndp.MaxDigits = 3
ndp.BackColor = Color.Orange 'PaintByControl must be true for appearance properties
Dim ndecimal As New GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberDecimalSeparatorDisplayFieldInfo()
ndecimal.DecimalSeparator = Convert.ToChar("A")
Dim npart As New GrapeCity.Win.Spread.InputMan.CellType.Fields.NumberIntegerPartDisplayFieldInfo()
npart.MinDigits = 3
npart.BackColor = Color.Bisque
Dim ncell1 As New GrapeCity.Win.Spread.InputMan.CellType.GcNumberCellType()
ncell1.DropDownCalculator.FlatStyle = FlatStyle.Popup
ncell1.DropDownCalculator.Font = New System.Drawing.Font("Comic Sans MS", 10)
ncell1.PaintByControl = True
ncell1.DisplayFields.Add(ndp)
ncell1.DisplayFields.Add(ndecimal)
ncell1.DisplayFields.Add(npart)
FpSpread1.ActiveSheet.Cells(1, 1).CellType = ncell1
FpSpread1.ActiveSheet.Cells(1, 1).Value = 12.3189

Spread Windows Forms Designer and the GcNumber Cell

$
0
0

You can create a GcNumber cell with the Spread Designer. This saves time when creating a cell.

Open the Spread Designer. Select a cell or cells in the design area. Under the Home menu, select GcNumber in the CellType section.

gcn

Cell Types

Use the General tab in the Cell Type dialog to specify general behavior for the GcNumber cell.

gcnDesigner1

General Tab

The following table lists the options for the General tab:

Option Description
RecommendedValue The RecommendedValue option can be used to provide a hint to the user.
MaxMinBehavior The MaxMinBehavior option can be used to specify how to handle a value when the value is outside of the minimum or maximum range.
EditMode The EditMode option can be used to specify insert or overwrite modes.
ClipContent The ClipContent option specifies whether to include literals in clipboard content.
AcceptsCrLf The AcceptsCrLf option specifies how to process CrLf characters when copying, cutting, or pasting a string.
ValueSign The ValueSign option determines what types of values are accepted such as only positive or negative values.
AllowDeleteToNull The AllowDeleteToNull option specifies whether to allow a null value.
ReadOnly You can specify whether the user can enter values with the ReadOnly option.
UseNegativeColor You can display negative colors with the UseNegativeColor option.
FocusPosition You can use the FocusPosition option to control the initial cursor position when the cell gets focus.
AcceptsArrowKeys You can specify how arrow keys are handled with the AcceptsArrowKeys option.
ExitOnLastChar The ExitOnLastChar option specifies whether to move to the next cell when the last character is typed.

You can use the Fields tab to specify formatting and patterns when you are editing the cell. The fields apply to different areas of the cell such as integer and decimal areas.

gcnDesigner2

Fields Tab

gcnDesigner2a

Edit Mode

You can create display fields with the DisplayFields tab. Display fields are areas of the cell such as the decimal separator or decimal section of the number. You can set colors, fonts, patterns, and other properties for the display field. The value in the cell is displayed in the order that you list the display field options. For example, NumberIntegerPartDisplayFieldInfo is listed before NumberDecimalSeparatorDisplayFieldInfo in the following image. This means that the integer part of the number is displayed before the decimal separator. You can add, insert, or clone the display fields. You can also delete, clear, or move the fields up or down in the list.

gcnDesigner3

Display Fields

Use the DropDown tab to specify options for the drop-down button for the cell and the drop-down calculator. The Spin section applies to side buttons if you add side buttons to the cell.

gcnDesigner4

DropDown Tab

The following table lists the options for the DropDown tab:

Option Description
ClosingAnimation This option specifies how to handle animation when closing the drop-down window.
OpeningAnimation This option specifies how to handle animation when opening the drop-down window.
Width This option specifies the width of the drop-down window.
Height This option specifies the height of the drop-down window.
Direction This option specifies the drop-down direction.
AllowResize This option specifies whether the user can change the size of the drop-down window with a size grip.
AutoDropDown This option specifies whether the drop-down window is automatically shown when the control gets focus.
AllowDrop This option specifies whether to allow a drop-down action.
ShowShadow This option specifies whether to show a shadow on the drop-down dialog.
SpinMode This option specifies whether to change the value, field, or a digit of the value.
IncrementValue This option specifies how much to increment or decrement the value.
Increment This option specifies how much to increment or decrement the field or digit.
AllowSpin This option specifies whether the spin behavior is enabled.
Wrap This option specifies whether the spin behavior can wrap when reaching a maximum or minimum limit.
SpinOnKeys This option specifies whether the user can cause a spin action using a key (for example, changing the value using the up or down arrow key).

You can use the SideButton tab to add side buttons to the cell and specify options for the side buttons. You can specify SpinUp or SpinDown with the Behavior option. You can add, insert, or clone the side buttons. You can also delete, clear, or move the buttons up or down in the list.

gcnDesigner5

Side Button Tab

You can use the DropDownCalculator tab to specify the appearance for the calculator and the calculator buttons.

gcnDesigner6

DropDownCalculator

You can use the Background tab to display an image and set the image properties in the cell.

gcnDesigner7

Background Tab

Use the Apply and OK buttons to apply the cell changes to the designer.

Spread Windows Forms and Diagonal Borders

$
0
0

You may wish to draw attention to a cell. You can do this with diagonal lines in a cell or cell border with Spread for WinForms.

You can use the ComplexBorder class to create diagonal border lines for a cell border as shown in the following image.

complexbordercell

Diagonal Border

The following example displays diagonal lines in a cell.

C#

FarPoint.Win.ComplexBorderSide topborder = new FarPoint.Win.ComplexBorderSide(System.Drawing.Color.Black, 1);
FarPoint.Win.ComplexBorderSide leftborder = new FarPoint.Win.ComplexBorderSide(System.Drawing.Color.Blue, 1);
FarPoint.Win.ComplexBorderSide rightborder = new FarPoint.Win.ComplexBorderSide(Color.Red, 2);
FarPoint.Win.ComplexBorderSide bottomborder = new FarPoint.Win.ComplexBorderSide(Color.Black, 3, System.Drawing.Drawing2D.DashStyle.Solid, null, new float[] { 0f, 0.33f, 0.66f, 1f });
FarPoint.Win.ComplexBorderSide dborder = new FarPoint.Win.ComplexBorderSide(System.Drawing.Color.Orange, 2);
FarPoint.Win.ComplexBorder bord = new FarPoint.Win.ComplexBorder(leftborder, topborder, rightborder, bottomborder, dborder, true, true);
fpSpread1.Sheets[0].Cells[1, 1].Border = bord;

VB

Dim topborder As New FarPoint.Win.ComplexBorderSide(System.Drawing.Color.Black, 1)
Dim leftborder As New FarPoint.Win.ComplexBorderSide(System.Drawing.Color.Blue, 1)
Dim rightborder As New FarPoint.Win.ComplexBorderSide(Color.Red, 2)
Dim bottomborder As New FarPoint.Win.ComplexBorderSide(Color.Black, 3, System.Drawing.Drawing2D.DashStyle.Solid, Nothing, New Single() {0, 0.33, 0.66, 1})
Dim dborder As New FarPoint.Win.ComplexBorderSide(System.Drawing.Color.Orange, 2)
Dim bord As New FarPoint.Win.ComplexBorder(leftborder, topborder, rightborder, bottomborder, dborder, True, True)
FpSpread1.Sheets(0).Cells(1, 1).Border = bord

You can create cell borders with diagonal lines as shown in the following image.

diagonallines

Diagonal Lines

Try this example code to see a text cell with a diagonal border.

C#

fpSpread1.Sheets[0].Cells[1, 3].Text = "Test"; //Cell has to have a value
fpSpread1.Sheets[0].Cells[1, 3].Border = new FarPoint.Win.ComplexBorder(new FarPoint.Win.ComplexBorderSide(Color.Red, 2));// Cell has to have a border
FarPoint.Win.Spread.CellType.TextCellType cellType = new FarPoint.Win.Spread.CellType.TextCellType();
cellType.TextOrientation = FarPoint.Win.TextOrientation.TextRotateCustom;
cellType.TextRotationAngle = 60; // Cell has to have rotation angle to see the effect.
fpSpread1.Sheets[0].Cells[1, 3].CellType = cellType;
fpSpread1.Sheets[0].EnableDiagonalLine = true;

VB

FpSpread1.Sheets(0).Cells(1, 3).Text = "Test" 'Cell has to have a value
FpSpread1.Sheets(0).Cells(1, 3).Border = New FarPoint.Win.ComplexBorder(New FarPoint.Win.ComplexBorderSide(Color.Red, 2)) ' Cell has to have a border
Dim cellType As New FarPoint.Win.Spread.CellType.TextCellType()
cellType.TextOrientation = FarPoint.Win.TextOrientation.TextRotateCustom
cellType.TextRotationAngle = 60 ' Cell has to have rotation angle to see the effect.
FpSpread1.Sheets(0).Cells(1, 3).CellType = cellType
FpSpread1.Sheets(0).EnableDiagonalLine = True

You can also display the diagonal lines in a cell border that is part of a shape as displayed in the following image.

diagonalshape

Diagonal Lines in a Shape

The cell must have a border and the text orientation must not be zero.

Try this example code to see a shape with a cell that has with a diagonal border.

C#

fpSpread1.Sheets[0].Cells[1, 3].Text = "Test"; //Cell has to have a value
fpSpread1.Sheets[0].Cells[1, 3].Border = new FarPoint.Win.ComplexBorder(new FarPoint.Win.ComplexBorderSide(Color.Red, 2));// Cell has to have a border

FarPoint.Win.Spread.CellType.TextCellType cellType = new FarPoint.Win.Spread.CellType.TextCellType();
cellType.TextOrientation = FarPoint.Win.TextOrientation.TextRotateCustom;
cellType.TextRotationAngle = 60; // Cell has to have rotation angle to see the effect.
fpSpread1.Sheets[0].Cells[1, 3].CellType = cellType;

FarPoint.Win.Spread.DrawingSpace.TriangleShape a = new FarPoint.Win.Spread.DrawingSpace.TriangleShape();
a.BackColor = Color.Blue;
fpSpread1.ActiveSheet.AddShape(a, 1, 1);
FarPoint.Win.Spread.DrawingSpace.SpreadCameraShape test = new FarPoint.Win.Spread.DrawingSpace.SpreadCameraShape();
test.Formula = "B1:E6";
test.Location = new System.Drawing.Point(20, 20);
fpSpread1.Sheets[0].AddShape(test);
fpSpread1.Sheets[0].EnableDiagonalLine = true;

VB

FpSpread1.Sheets(0).Cells(1, 3).Text = "Test" 'Cell has to have a value
FpSpread1.Sheets(0).Cells(1, 3).Border = New FarPoint.Win.ComplexBorder(New FarPoint.Win.ComplexBorderSide(Color.Red, 2)) ' Cell has to have a border

Dim cellType As New FarPoint.Win.Spread.CellType.TextCellType()
cellType.TextOrientation = FarPoint.Win.TextOrientation.TextRotateCustom
cellType.TextRotationAngle = 60 ' Cell has to have rotation angle to see the effect.
FpSpread1.Sheets(0).Cells(1, 3).CellType = cellType

Dim a As New FarPoint.Win.Spread.DrawingSpace.TriangleShape()
a.BackColor = Color.Blue
FpSpread1.ActiveSheet.AddShape(a, 1, 1)
Dim test As New FarPoint.Win.Spread.DrawingSpace.SpreadCameraShape()
test.Formula = "B1:E6"
test.Location = New System.Drawing.Point(20, 20)
FpSpread1.Sheets(0).AddShape(test)
FpSpread1.Sheets(0).EnableDiagonalLine = True

MultiRow and Merging

$
0
0

MultiRow allows automatic merging of cells. Cells are merged when the cell values placed in the row are the same in vertically, adjacent rows. This helps reduce visual clutter and makes the data easier to understand.

You can merge text in MultiRow with code or by specifying merging at design time.

Setting Merging at Design Time

Create a template first. You can use the MultiRow task icon to add or edit a template.

MultiRowTaskIcon

Task dialog

Edit your template using the Edit Template option. Select a cell and set the Mergeable property to True. Make sure the cell top is the same as the row top (Location property, Y setting). Also make sure the cell bottom is the same as the row bottom (y+height).

The following image displays a row in the template editor and the settings for the Location and Size properties.

MultiRowMLS

Row properties

The following image displays a cell in the template editor and the settings for the Location and Size properties.

MultiRowMCellLS

Cell properties

The following image illustrates merging.

MultiRowMExample

Example

Using Code to Merge Cells

This example merges the cells in the first column by setting the Mergeable property to True for the text box cell.

MultiRowMergeCode

Merged cells

C#

GrapeCity.Win.MultiRow.TextBoxCell text1 = new GrapeCity.Win.MultiRow.TextBoxCell();
text1.Mergeable = true;
GrapeCity.Win.MultiRow.CheckBoxCell check2 = new GrapeCity.Win.MultiRow.CheckBoxCell();
GrapeCity.Win.MultiRow.Template template1 = GrapeCity.Win.MultiRow.Template.CreateGridTemplate(new GrapeCity.Win.MultiRow.Cell[] {text1, check2}, 160, GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.ColumnHeader | GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.RowHeaderAutoNumber);
template1.ColumnHeaders[0].Cells[0].Value = "Column1";
gcMultiRow1.Template = template1;
gcMultiRow1.RowCount = 6;
gcMultiRow1[0, 0].Value = 1;
gcMultiRow1[1, 0].Value = 1;
gcMultiRow1[2, 0].Value = 1;
gcMultiRow1[3, 0].Value = 2;
gcMultiRow1[4, 0].Value = 2;
gcMultiRow1[5, 0].Value = 2;
gcMultiRow1.AllowUserToAddRows = false;

VB

Dim text1 As New GrapeCity.Win.MultiRow.TextBoxCell()
text1.Mergeable = True
Dim check2 As New GrapeCity.Win.MultiRow.CheckBoxCell()
Dim template1 As GrapeCity.Win.MultiRow.Template = GrapeCity.Win.MultiRow.Template.CreateGridTemplate(New GrapeCity.Win.MultiRow.Cell() {text1, check2}, 160, GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.ColumnHeader Or GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.RowHeaderAutoNumber)
template1.ColumnHeaders(0).Cells(0).Value = "Column1"
GcMultiRow1.Template = template1
GcMultiRow1.RowCount = 6
GcMultiRow1(0, 0).Value = 1
GcMultiRow1(1, 0).Value = 1
GcMultiRow1(2, 0).Value = 1
GcMultiRow1(3, 0).Value = 2
GcMultiRow1(4, 0).Value = 2
GcMultiRow1(5, 0).Value = 2
GcMultiRow1.AllowUserToAddRows = False

This example merges cells and displays the new row icon.

C#

GrapeCity.Win.MultiRow.TextBoxCell text1 = new GrapeCity.Win.MultiRow.TextBoxCell();
text1.Mergeable = true;
GrapeCity.Win.MultiRow.CheckBoxCell check2 = new GrapeCity.Win.MultiRow.CheckBoxCell();
GrapeCity.Win.MultiRow.Template template1 = GrapeCity.Win.MultiRow.Template.CreateGridTemplate(new GrapeCity.Win.MultiRow.Cell[] {text1, check2}, 160, GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.ColumnHeader | GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.RowHeaderAutoNumber);
template1.ColumnHeaders[0].Cells[0].Value = "Column1";
gcMultiRow1.Template = template1;
gcMultiRow1.RowCount = 3;
gcMultiRow1[0, 0].Value = 5;
gcMultiRow1[1, 0].Value = 5;
gcMultiRow1[2, 0].Value = 5;

VB

Dim text1 As New GrapeCity.Win.MultiRow.TextBoxCell()
text1.Mergeable = True
Dim check2 As New GrapeCity.Win.MultiRow.CheckBoxCell()
Dim template1 As GrapeCity.Win.MultiRow.Template = GrapeCity.Win.MultiRow.Template.CreateGridTemplate(New GrapeCity.Win.MultiRow.Cell() {text1, check2}, 160, GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.ColumnHeader Or GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.RowHeaderAutoNumber)
template1.ColumnHeaders(0).Cells(0).Value = "Column1"
GcMultiRow1.Template = template1
GcMultiRow1.RowCount = 3
GcMultiRow1(0, 0).Value = 5
GcMultiRow1(1, 0).Value = 5
GcMultiRow1(2, 0).Value = 5

The following conditions must be met for cells to be merged:

  • Cells should be placed in the Row section of the template.
  • The upper and lower ends of the cells in the Row section should be in contact.
  • The Cell.Mergeable property should be set to True.
  • The cell values should not be empty (Is not String.Empty or Null).
  • The Value property of the vertically, adjacent cell should be the same.
  • The cell should be visible.
  • The cell should not be in the detached row (New Row).
  • The cell’s top should be equal to the row’s top and the cell’s bottom should be equal to the row’s bottom.

If the MergedCellsSelectionMode property is set to All, all the merged cells are selected. In this case, if you edit the cells, all the merged cells are changed to the same value. If the MergedCellsSelectionMode property is set to Individually, the merged cells are selected one by one. In this case, you can change the value of each cell individually.

When the MergedCellsSelectionMode property is set to All, the behavior is as follows:

  • Even if a merged cell is selected, only one cell is included in the SelectedCells property.
  • Events related to the cell occur for the currently selected cell.
  • If the AllowUserToReverseSelect property is set to True, there are times when the behavior where the selection state of already selected cell(s) is reversed by the Ctrl key + mouse click, and does not work correctly. For example, if cells of the first and second row are merged, after you have selected a cell in the first row using a mouse click, the selection state of the cell is not canceled, even if you press the Ctrl key + mouse click on a cell in the second row.
  • Gradation of the background color is not applied to the merged cells.
  • Top and bottom borders set in the Row section are not applied to the merged cells.
  • When resizing the height of the Row section of the merged cells, it is not possible to resize multiple Row sections together.

If a validator is set in the merged cell, then the validator and the validation action is performed for the top-most cell, but the GcMultiRow.CellValidating event is fired for the current cell; therefore, if you want to use the automatic merge feature, it is recommended that you do not set different validators for the cells.

The QueryCellMergeState event is fired if cells meet the merging conditions. You can use this event to specify the vertical relationship for multiple cells and restrict cell merging if the cell values are different.

The IsMerged method can be used to check whether two cells are merged.

This example uses the IsMerged method.

C#

private void Form1_Load(object sender, EventArgs e)
        {
            GrapeCity.Win.MultiRow.TextBoxCell text1 = new GrapeCity.Win.MultiRow.TextBoxCell();
            GrapeCity.Win.MultiRow.TextBoxCell text2 = new GrapeCity.Win.MultiRow.TextBoxCell();
            text1.Name = "text1";
            text2.Name = "text2";
            text1.Mergeable = true;
            text2.Mergeable = true;
            text2.Style.Format = "c";
            GrapeCity.Win.MultiRow.Template template1 = GrapeCity.Win.MultiRow.Template.CreateGridTemplate(new GrapeCity.Win.MultiRow.Cell[] { text1, text2 }, 160, GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.ColumnHeader | GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.RowHeaderAutoNumber);
            template1.ColumnHeaders[0].Cells[0].Value = "Column1";
            template1.ColumnHeaders[0].Cells[1].Value = "Column2";
            gcMultiRow1.Template = template1;
            gcMultiRow1.RowCount = 3;
            gcMultiRow1[1, 1].Value = 5;
            gcMultiRow1[0, 0].Value = 1;
            gcMultiRow1[1, 0].Value = 1;
        }

        private void button1_Click(object sender, EventArgs e)
        {           
            listBox1.Items.Add(gcMultiRow1.IsMerged(new GrapeCity.Win.MultiRow.CellPosition(0, 0), new GrapeCity.Win.MultiRow.CellPosition(1, 0)).ToString());
        }

VB

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load        
        Dim text1 As New GrapeCity.Win.MultiRow.TextBoxCell()
        Dim text2 As New GrapeCity.Win.MultiRow.TextBoxCell()
        text1.Name = "text1"
        text2.Name = "text2"
        text1.Mergeable = True
        text2.Mergeable = True
        text2.Style.Format = "c"
        Dim template1 As GrapeCity.Win.MultiRow.Template = GrapeCity.Win.MultiRow.Template.CreateGridTemplate(New GrapeCity.Win.MultiRow.Cell() {text1, text2}, 160, GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.ColumnHeader Or GrapeCity.Win.MultiRow.AutoGenerateGridTemplateStyles.RowHeaderAutoNumber)
        template1.ColumnHeaders(0).Cells(0).Value = "Column1"
        template1.ColumnHeaders(0).Cells(1).Value = "Column2"
        GcMultiRow1.Template = template1
        GcMultiRow1.RowCount = 3
        GcMultiRow1(1, 1).Value = 5
        GcMultiRow1(0, 0).Value = 1
        GcMultiRow1(1, 0).Value = 1
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        ListBox1.Items.Add(GcMultiRow1.IsMerged(New GrapeCity.Win.MultiRow.CellPosition(0, 0), New GrapeCity.Win.MultiRow.CellPosition(1, 0)).ToString())       
    End Sub

SpreadJS and Viewports

$
0
0

A viewport in SpreadJS is the visible area of the sheet (excluding headers, the tab strip, and the scroll bar). You may want to know the visible area of the widget if you plan to display a floating object based on which rows are visible or want to save or load data based on the visible area. This information may also be useful if the user scrolls and changes the visible area.

SpreadJS has several methods to get rows or columns for the viewports. The methods include:

  • getViewportTopRow
  • getViewportBottomRow
  • getViewportLeftColumn
  • getViewportRightColumn

SpreadJS also has methods for getting the height or width of the viewport. The methods include:

  • getViewportWidth
  • getViewportHeight

The viewport area is split into nine areas (three rows and three columns) which includes frozen and trailing frozen column or row areas. The index parameter for the viewport method refers to the specific viewport area.

viewport_structure

Use an index of 1 for the viewport area that does not contain frozen or trailing frozen rows or columns. This refers to the non-frozen area. An index of 0 refers to the frozen rows or columns. An index of 2 refers to trailing frozen rows or columns.

If the sheet does not have frozen rows, then a viewport index of 0 or 1 for the top row returns the same value. A viewport index of 2 returns the trailing viewport top row index.

For example, Sheet.getViewportTopRow(2) means get the trailing viewport top row index. If there are no trailing frozen rows, then the top row index should be the last row index of viewport 1. If there is a trailing frozen row, then the last row index of viewport 1 is changed, and the last row index of viewport 2 is changed. For example, the top row result is changed to 197 in the following frozen trailing row example.

The following examples get the top row for different viewport areas. The examples use Internet Explorer and the console to return the results.

The following code returns “0 : 0 : 200”.

SpreadJSGetViewportTopRow

Default Spread

var spread = new GcSpread.Sheets.Spread($("#ss").get(0));
var sheet = spread.getActiveSheet();
//No frozen header line
var vp0tr = sheet.getViewportTopRow(0);
var vp1tr = sheet.getViewportTopRow(1);
var vp2tr = sheet.getViewportTopRow(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns “0 : 2 : 200”.

SpreadJSTopRowFrozen

Frozen Rows

//Have frozen header line
sheet.setFrozenRowCount(2);
vp0tr = sheet.getViewportTopRow(0);
vp1tr = sheet.getViewportTopRow(1);
vp2tr = sheet.getViewportTopRow(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns “0 : 0 : 197”.

SpreadJSTopRowTrailingFrozen

Frozen Trailing Rows

//Trailing frozen line
sheet.setFrozenTrailingRowCount(3); 
vp0tr = sheet.getViewportTopRow(0);
vp1tr = sheet.getViewportTopRow(1);
vp2tr = sheet.getViewportTopRow(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following examples return the results for the getViewportBottomRow method.

The following code returns “-1 : 13 : 199”.

var vp0tr = activeSheet.getViewportBottomRow(0);
var vp1tr = activeSheet.getViewportBottomRow(1);
var vp2tr = activeSheet.getViewportBottomRow(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns “1 : 13 : 199”.

activeSheet.setFrozenRowCount(2);
var vp0tr = activeSheet.getViewportBottomRow(0);
var vp1tr = activeSheet.getViewportBottomRow(1);
var vp2tr = activeSheet.getViewportBottomRow(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns “-1 : 10 : 199”.

activeSheet.setFrozenTrailingRowCount(3);
var vp0tr = activeSheet.getViewportBottomRow(0);
var vp1tr = activeSheet.getViewportBottomRow(1);
var vp2tr = activeSheet.getViewportBottomRow(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following examples return the results for the getViewportLeftColumn method.

The following code returns the result “0 : 0 : 20”.

var vp0tr = activeSheet.getViewportLeftColumn(0);
var vp1tr = activeSheet.getViewportLeftColumn(1);
var vp2tr = activeSheet.getViewportLeftColumn(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns the result “0 : 2 : 20”.

activeSheet.setFrozenColumnCount(2);
var vp0tr = activeSheet.getViewportLeftColumn(0);
var vp1tr = activeSheet.getViewportLeftColumn(1);
var vp2tr = activeSheet.getViewportLeftColumn(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns the result “0 : 0 : 17”.

SpreadJSFrozenTrailingColumn

Frozen Trailing Columns

activeSheet.setFrozenTrailingColumnCount(3);
var vp0tr = activeSheet.getViewportLeftColumn(0);
var vp1tr = activeSheet.getViewportLeftColumn(1);
var vp2tr = activeSheet.getViewportLeftColumn(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following examples return the results for the getViewportRightColumn method.

The following code returns the result “-1 : 7 : 19”.

var vp0tr = activeSheet.getViewportRightColumn(0);
var vp1tr = activeSheet.getViewportRightColumn(1);
var vp2tr = activeSheet.getViewportRightColumn(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns the result “1 : 7 : 19”.

activeSheet.setFrozenColumnCount(2);
var vp0tr = activeSheet.getViewportRightColumn(0);
var vp1tr = activeSheet.getViewportRightColumn(1);
var vp2tr = activeSheet.getViewportRightColumn(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);



The following code returns the result “-1 : 4 : 19”.

activeSheet.setFrozenTrailingColumnCount(3);
var vp0tr = activeSheet.getViewportRightColumn(0);
var vp1tr = activeSheet.getViewportRightColumn(1);
var vp2tr = activeSheet.getViewportRightColumn(2);
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);

Spread Windows Forms and the GcTextBox Cell

$
0
0

You can create a text cell that displays text and allows you to specify patterns of allowed characters. Text cells are useful if you want to restrict the type of data the user can type in the cell. The GcTextBox cell is part of the GrapeCity.Win.PluginInputMan assembly.

The GcTextBox cell allows you to specify automatic complete mode and a custom source with the AutoCompleteMode and AutoCompleteCustomSource properties.

You can set maximum limits for the cell with the MaxLength property.

You can use the ShortcutKeys property to map keys to actions for the GcTextBox cell. In edit mode, these shortcut keys have precedence over the Spread input maps. The cell uses the Spread input maps when not in edit mode.

The FormatString property allows you to specify specific characters that are allowed in the cell. The following Spread Designer table displays the available characters.

formatstring

Characters

The GcTextBox cell has the following properties:

Name Description
AcceptsArrowKeys Gets or sets how arrow keys are processed by the edit control. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
AcceptsCrLf Gets or sets a value that indicates how to process the CrLf characters when copying, cutting, or pasting a string.
AcceptsTabChar Gets or sets a value that indicates how to process the Tab characters when copying, cutting, or pasting the string.
AllowSpace Gets or sets the allow space settings.
AlternateText Gets the alternate text of the GcTextBox control.
AutoComplete Gets the automatic complete related settings.
AutoCompleteCustomSource Gets or sets a custom System.Windows.Forms.AutoCompleteStringCollection to use when the GcTextBox.AutoCompleteSource property is set to CustomSource.
AutoCompleteMode Gets or sets an option that controls how automatic completion works for the GcTextBox control.
AutoCompleteSource Gets or sets a value that specifies the source of strings used for automatic completion.
AutoConvert Gets or sets whether to automatically convert the entered characters according to the input mask.
BackgroundImage Gets or sets the background image for the cell. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
DisplayAlignment Gets or sets the text alignment when displaying the horizontal axis when the control does not have input focus.
DropDown Gets the drop-down settings used to customize the drop-down function.
DropDownEditor Gets the settings for the drop-down editor.
EditMode Gets or sets the edit mode of the control. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
Ellipsis Gets or sets a value that indicates how the ellipsis character (…) appears, denoting that the GcTextBox text extends beyond the specified length of the GcTextBox cell.
EllipsisString Gets or sets what is shown as an ellipsis when the text width is longer than the control.
ExcelExportFormat Gets or sets the format string used by Excel when exporting to an Excel file. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
ExitOnLastChar Gets or sets whether the next control in the tab order receives the focus as soon as the control is filled with the last character. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
FocusPosition Gets or sets the initial cursor position when the editor gets focus.
FormatString Gets or sets the input format to use in the control.
GridLine Gets or sets a Line that indicates the grid line style for each line.
LineSpace Gets or sets the line space between two adjacent lines.
MaxLength Gets or sets the maximum number of characters or bytes that the control can hold.
MaxLengthCodePage Gets or sets the code page for the encoding that is used to count the maximum length in bytes.
MaxLengthUnit Gets or sets whether the maximum number of characters allowed in the control is handled based on bytes, characters, or text elements.
MaxLineCount Gets or sets the maximum number of acceptable lines.
Multiline Gets or sets whether the control can accept and display multiple lines of text.
PasswordChar Gets or sets the character used as a placeholder for the characters typed by the user.
PasswordRevelationMode Gets or sets the password revelation mode.
ReadOnly Gets or sets a value that indicates whether this control is read-only. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
RecommendedValue Gets or sets the recommended value.
ScrollBarMode Gets or sets how to display the scroll bars.
ScrollBars Gets or sets which scroll bars appear in a multiline GcTextBox control.
ShortcutKeys Gets the InputMan EditingControl’s shortcuts. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
ShowRecommendedValue Gets or sets a value that indicates whether to show the recommended value.
ShowTouchToolBar Gets or sets the how to show the InputManCellTypeBase.TouchToolBar. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
SideButtons Gets the side buttons of this GcTextBox control.
Static Gets or sets whether the cell is static, which prohibits user interaction. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
SubEditor Gets or sets the subeditor. (Inherited from FarPoint.Win.Spread.CellType.BaseCellType)
TouchContextMenuScale Gets or sets whether the factor applies to the context menu item’s height while the context menu is open due to a touch action. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
TouchToolBar Gets the shown InputManCellTypeBase.TouchToolBar by touch operation. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
UseSpreadDropDownButtonRender Gets or sets a value that indicates whether to paint the drop-down button with the spread drop-down button renderer. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
UseSystemPasswordChar Gets or sets a value that indicates whether to use system password characters.
WrapMode Gets or sets the wrap rule when the GcTextBox control is multiline.

This example uses the ShortcutKeys property. Use Alt + Enter to add a new line while the cell is in edit mode. The following image displays the list of actions that you can use.

shortcutkeyactions

Actions

C#

// Select Alt + Enter to go to the next line
GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType gcText = new GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType();
gcText.Multiline = true;
gcText.ShortcutKeys.Add(Keys.Enter | Keys.Alt, "InputNewLine");
fpSpread1.Sheets[0].Cells[0, 0].CellType = gcText;

VB

'Select Alt + Enter to go to the next line
Dim gcText As New GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType()
gcText.Multiline = True
gcText.ShortcutKeys.Add(Keys.Enter Or Keys.Alt, "InputNewLine")
FpSpread1.Sheets(0).Cells(0, 0).CellType = gcText

This example sets the maximum number of characters that can be typed in the cell.

SpreadWinGcTextMax

Maximum Characters

C#

GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType inputcell1 = new GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType();
inputcell1.MaxLengthUnit = GrapeCity.Win.Spread.InputMan.CellType.LengthUnit.Char;
inputcell1.MaxLength = 10;
fpSpread1.Sheets[0].Cells[1, 1].CellType = inputcell1;

VB

Dim inputcell1 As New GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType
inputcell1.MaxLengthUnit = GrapeCity.Win.Spread.InputMan.CellType.LengthUnit.Char
inputcell1.MaxLength = 10
FpSpread1.Sheets(0).Cells(1, 1).CellType = inputcell1

This example creates a GcTextBox cell and cuts CrLf characters in copied, cut, or pasted strings.

C#

GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType inputcell1 = new GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType();
inputcell1.Multiline = true;
inputcell1.AcceptsCrLf = GrapeCity.Win.Spread.InputMan.CellType.CrLfMode.Cut;
fpSpread1.Sheets[0].Cells[1, 1].CellType = inputcell1;

VB

Dim inputcell1 As New GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType
inputcell1.Multiline = True
inputcell1.AcceptsCrLf = GrapeCity.Win.Spread.InputMan.CellType.CrLfMode.Cut
FpSpread1.Sheets(0).Cells(1, 1).CellType = inputcell1

This example uses password characters in place of the typed content.

SpreadWinGcTextPass

Password Characters

C#

GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType gctext = new GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType();
gctext.PasswordChar = Convert.ToChar("A");
fpSpread1.Sheets[0].Cells[1, 1].CellType = gctext;

VB

Dim gctext As New GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType()
gctext.PasswordChar = Chr(65)
FpSpread1.Sheets(0).Cells(1, 1).CellType = gctext

This example allows you to type symbols.

SpreadWinGcTextSym

Symbols

C#

GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType inputcell = new GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType();
//Symbols
inputcell.FormatString = "@";
fpSpread1.Sheets[0].Cells[0, 0].CellType = inputcell;

VB

Dim inputcell As New GrapeCity.Win.Spread.InputMan.CellType.GcTextBoxCellType()
'Symbols
inputcell.FormatString = "@"
FpSpread1.Sheets(0).Cells(0, 0).CellType = inputcell

SpreadJS Excel Import and Export

$
0
0

You can use the Excel Import and Export Component to import and export Excel files into the SpreadJS widget. The component resides on your application server.

This example shows how to use the Excel Import and Export component in a Visual Studio 2015 Windows Forms application.

Use the following steps to create the sample:

  1. Install the product (run SpreadJS ExcelIO Server Component.exe or check the Excel IO Server Component in the web installer). The program files are installed to “C:\Program Files  (x86)\GrapeCity\Spread Studio 9\SpreadJS\ExcelIO”.

    SpreadJSInstalled

    Installed Files

  2. Create a Windows Forms application in Visual Studio.
  3. Add the ExcelIO assembly references from the setup folder.

    SpreadJSRef

    References

  4. Add two Button controls, a RichTextBox control, an OpenFileDialog component, and a SaveFileDialog component. Set the name and text for each control.
  5. Use the following steps to create a run time license file, add the license information to the file, and then add the file as an Embedded Resource in the Properties folder (or the project folder in a VB project).
  6. Open notepad.exe and add “GrapeCity.Spread.Sheets.ExcelIO.Spread, GrapeCity.Spread.Sheets.ExcelIO, Version=9.40.20153.0, Culture=neutral, PublicKeyToken=3ef656c0a61aba3a” to the file.
  7. Use Save As to save the file.
  8. Rename the file to “licenses.licx”.
  9. Copy the file to the main project folder for a VB project and add the file as a resource. Set the Build Action to Embedded Resource to include the file as an embedded resource.

    SpreadJSAddResource

    Add Resource File to Project

  10. Copy the file to the Properties folder for a C# project and include it as an Embedded Resource in the Properties folder.

    SpreadJSEmbeddedResource

    Change Build Action

  11. Add import and export logic in the two button click events. For example:
    C#
    using GrapeCity.Spread.Sheets.ExcelIO;
    using GrapeCity.Windows.SpreadSheet.Data;
    using System;
    using System.IO;
    using System.Windows.Forms;
    
    private void Import_Click(object sender, EventArgs e)
    {
        DialogResult result = this.openFileDialog1.ShowDialog();
        if (result == DialogResult.OK)
        {
            using (Stream stream = File.Open(this.openFileDialog1.FileName, FileMode.Open))
            {
                Importer importer = new Importer();
                this.richTextBox1.Text = importer.ImportExcel(stream);
            }
        }
    }
    private void Export_Click(object sender, EventArgs e)
    {
        DialogResult result = this.saveFileDialog1.ShowDialog();
        if (result == DialogResult.OK)
        {
            using (FileStream fs = File.Create(this.saveFileDialog1.FileName))
            {
                Exporter exporter = new Exporter(this.resultRtb.Text);
                exporter.SaveExcel(fs, ExcelFileFormat.XLSX, ExcelSaveFlags.NoFlagsSet);                }
        }
    }
    

    VB

    Imports GrapeCity.Spread.Sheets.ExcelIO
    Imports GrapeCity.Windows.SpreadSheet.Data
    Imports System
    Imports System.IO
    Imports System.Windows.Forms
    
    Public Class Form1
        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        End Sub
    
        Private Sub Import_Click(sender As Object, e As EventArgs) Handles Import.Click
            Dim result As DialogResult = Me.OpenFileDialog1.ShowDialog()
            If result = DialogResult.OK Then
                Using stream As Stream = File.Open(Me.OpenFileDialog1.FileName, FileMode.Open)
                    Dim importer As New Importer()
                    Me.RichTextBox1.Text = importer.ImportExcel(stream)
                End Using
            End If
        End Sub
    
        Private Sub Export_Click(sender As Object, e As EventArgs) Handles Export.Click
            Dim result As DialogResult = Me.SaveFileDialog1.ShowDialog()
            If result = DialogResult.OK Then
                Using fs As FileStream = File.Create(Me.SaveFileDialog1.FileName)
                    Dim exporter As New Exporter(Me.RichTextBox1.Text)
                    exporter.SaveExcel(fs, ExcelFileFormat.XLSX, ExcelSaveFlags.NoFlagsSet)
                End Using
            End If
        End Sub
    End Class
    
  12. Build and Press F5 to run. Select the Import Excel button to import an Excel-formatted file.
  13. Select the Export Excel button to export the JSON string to an Excel file.

SpreadJS Table Slicer

$
0
0

Slicers allow you to quickly filter data. A slicer provides filtering details without the need to use drop-down lists. This makes it easier to find the data you are interested in. SpreadJS supports table slicers.

The slicer has a header, a caption, items, and a clear button. You can move, resize, delete, cut, copy, or paste the slicer. You can use undo or redo actions when resizing, deleting, moving, cutting, copying, or pasting the slicer.

The TableSlicerData class provides table data and filtering information for the slicer.

Items that are filtered out by another slicer are referred to as “has data items” and “no data items”. Items that are filtered by the slicer are referred to as “selected items” and “unselected items”.

Item Type Description
no data items Items that have been filtered out by another slicer
has data items Items that have not been filtered out by another slicer
selected items Items filtered out by the slicer
unselected items The item that has not been filtered out by the slicer

The slicer synchronizes with the table filter. The following table changes cause changes in the slicer.

Table Change Slicer Change
modify data Slicer items are changed
modify column name Slicer caption is changed
add row Slicer items are changed
add column No changes
delete row Slicer items are changed
delete column The slicer connected to this column is removed
remove table All slicers connected to this table are removed

You can set options for the slicer with the Slicer class. You can also set options for the slicer with the FloatingObject class. You can specify whether the slicer is visible or locked (isVisible or isLocked methods). The isLocked method only has an effect if the sheet is protected.

You can add a slicer with the addSlicer method and remove a slicer with the removeSlicer method.

Resizing or moving a row or column can cause the slicer’s location and size to change based on the settings for the dynamicMove and dynamicSize methods. The following table displays the result of the dynamicMove and dynamicSize settings.

DynamicMove DynamicSize Result
true true Slicer is moved and sized
true false Slicer is moved, but not sized
false true or false Slicer is not moved or sized

The following example creates a slicer.

SpreadJSSlicer

Table Slicer

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Slicer</title>
 <link type="text/css" href="./css/gcspread.sheets.9.40.20153.0.css" rel="stylesheet" /> 
  <script src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
<script type="text/javascript" src="./scripts/gcspread.sheets.all.9.40.20153.0.min.js"></script>

<script type="text/javascript"> 
        $(document).ready(function () {     
var spread = new GcSpread.Sheets.Spread($("#spreadContainer")[0],{sheetCount:3});
            // Get active sheet in spread instance
 var activeSheet = spread.getActiveSheet();
var datasource = [
{ Name: "Apple", Category: "Fruit" },
{ Name: "Orange", Category: "Fruit" },
{ Name: "Broccoli", Category: "Vegetable" },
{ Name: "Kiwi", Category: "Fruit" },
{ Name: "Rice", Category: "Cereal" },
{ Name: "Strawberry", Category: "Fruit" },
{ Name: "Yogurt", Category: "Dairy" },
{ Name: "Plum", Category: "Fruit" },
{ Name: "Celery", Category: "Vegetable" },
{ Name: "Grape", Category: "Fruit" },
{ Name: "Oats", Category: "Cereal" },
{ Name: "Quinoa", Category: "Cereal" },
{ Name: "Maize", Category: "Cereal" },
{ Name: "Okra", Category: "Vegetable" },
{ Name: "Corn", Category: "Vegetable" },
{ Name: "Wheat", Category: "Cereal" },
{ Name: "Barley", Category: "Cereal" },
{ Name: "Cream", Category: "Dairy" },
{ Name: "Millet", Category: "Cereal" },
{ Name: "Rye", Category: "Cereal" },
{ Name: "Artichoke", Category: "Vegetable" },
{ Name: "Buckwheat", Category: "Cereal" },
{ Name: "Gooseberry", Category: "Fruit" },
{ Name: "Amaranth", Category: "Cereal" },
{ Name: "Carrot", Category: "Vegetable" },
{ Name: "Cheese", Category: "Dairy" },
{ Name: "Fig", Category: "Fruit" },
{ Name: "Milk", Category: "Dairy" },
{ Name: "Butter", Category: "Dairy" },
               ];
var table = activeSheet.addTableByDataSource("table1", 1, 1, datasource);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.addSlicer("slicer1",table.name(),"Category");
 //change the slicer properties.
slicer.width(200);
slicer.height(200);
slicer.position(new GcSpread.Sheets.Point(300, 50));
slicer.style(GcSpread.Sheets.SlicerStyles.dark4());

activeSheet.getColumn(1).width(100);
activeSheet.getColumn(2).width(100);
activeSheet.getColumn(3).width(100);
       });
    </script>
</head>
<body>

<div id="spreadContainer" style="width: 600px; height: 400px; border: 1px solid gray">
</div>
</body>
</html>

 

The following example creates a slicer and sets the slicer style.

SpreadJSSlicer1

Table Slicer

var datasource = [
{ Name: "Apple", Category: "Fruit" },
{ Name: "Orange", Category: "Fruit" },
{ Name: "Broccoli", Category: "Vegetable" },
{ Name: "Kiwi", Category: "Fruit" },
{ Name: "Rice", Category: "Cereal" },
{ Name: "Strawberry", Category: "Fruit" },
{ Name: "Yogurt", Category: "Dairy" },
{ Name: "Plum", Category: "Fruit" },
{ Name: "Celery", Category: "Vegetable" },
{ Name: "Grape", Category: "Fruit" },
{ Name: "Oats", Category: "Cereal" },
{ Name: "Quinoa", Category: "Cereal" },
{ Name: "Maize", Category: "Cereal" },
{ Name: "Okra", Category: "Vegetable" },
{ Name: "Corn", Category: "Vegetable" },
{ Name: "Wheat", Category: "Cereal" },
{ Name: "Barley", Category: "Cereal" },
{ Name: "Cream", Category: "Dairy" },
{ Name: "Millet", Category: "Cereal" },
{ Name: "Rye", Category: "Cereal" },
{ Name: "Artichoke", Category: "Vegetable" },
{ Name: "Buckwheat", Category: "Cereal" },
{ Name: "Gooseberry", Category: "Fruit" },
{ Name: "Amaranth", Category: "Cereal" },
{ Name: "Carrot", Category: "Vegetable" },
{ Name: "Cheese", Category: "Dairy" },
{ Name: "Fig", Category: "Fruit" },
{ Name: "Milk", Category: "Dairy" },
{ Name: "Butter", Category: "Dairy" },
               ];

var table = activeSheet.addTableByDataSource("table1", 1, 1, datasource);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.addSlicer("slicer1",table.name(),"Category");
 //change the slicer properties.
slicer.width(200);
slicer.height(200);
slicer.position(new GcSpread.Sheets.Point(300, 50));
//create slicer styles
var hstyle = new GcSpread.Sheets.SlicerStyleInfo();
hstyle.backColor("red");
hstyle.borderBottom(new GcSpread.Sheets.SlicerBorder(3, "dashed", "green"));
var hstyle1 = new GcSpread.Sheets.SlicerStyleInfo();
hstyle1.borderTop(new GcSpread.Sheets.SlicerBorder(2, "dashed", "blue"));
hstyle1.backColor("yellow");
var hstyle2 = new GcSpread.Sheets.SlicerStyleInfo();
hstyle2.backColor("green");
//set slicer styles
var style1 = new GcSpread.Sheets.SlicerStyle();
style1.hoveredSelectedItemWithDataStyle(hstyle);
style1.hoveredUnSelectedItemWithDataStyle(hstyle);
style1.unSelectedItemWithDataStyle(hstyle1);
style1.selectedItemWithDataStyle(hstyle2);
slicer.style(style1);

activeSheet.getColumn(1).width(100);
activeSheet.getColumn(2).width(100);
activeSheet.getColumn(3).width(100);

SpreadJS and the CellsEnumerator Class

$
0
0

You can use the CellsEnumerator class in SpreadJS to create your own custom search. This can be useful if the standard search does not return the result you are trying to find. For example, you can find the last cell with data in the row and column using the CellsEnumerator class.

The following example gets the last cell with data and returns the information in the Internet Explorer console.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS</title>
<link type="text/css" href="./css/gcspread.sheets.excel2013white.9.40.20153.0.css" rel="stylesheet" /> 
<script type="text/javascript" src="./scripts/gcspread.sheets.all.9.40.20153.0.min.js"></script>   
<script type="text/javascript">

        function bodyReady() {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            var sheet = spread.getActiveSheet();
            sheet.setValue(3, 10, "lastCol");
            sheet.setValue(9, 2, "lastRow");
            sheet.setValue(7, 5, "data");
            sheet.setValue(9, 6, "lastCell");
        }

        function buttonClick() {
            var spread = GcSpread.Sheets.findControl(document.getElementById("ss"));
            var sheet = spread.getActiveSheet();
            console.log("The last non-empty row index: " + getLastNotEmptyRowIndex(sheet));
            console.log("The last non-empty col index: " + getLastNotEmptyColumnIndex(sheet));
            var lastCell = getLastNotEmptyCell(sheet);
            console.log("The last non-empty CELL :  [" + lastCell.row + ":" + lastCell.col + "]");
        }

        function getLastNotEmptyRowIndex(sheet) {
            var ce = initEngine(sheet), lastRow = -1, curCell = null;
            ce.moveNext();
            while (curCell = ce.current()) {
                if (curCell.row > lastRow) {
                    lastRow = curCell.row;
                }
                ce.moveNext();
            }
            return lastRow;
        }

        function getLastNotEmptyColumnIndex(sheet) {
            var ce = initEngine(sheet), lastCol = -1, curCell = null;
            ce.moveNext();
            while (curCell = ce.current()) {
                if (curCell.col > lastCol) {
                    lastCol = curCell.col;
                }
                ce.moveNext();
            }
            return lastCol;
        }

        function getLastNotEmptyCell(sheet) {
            var ce = initEngine(sheet), lastCell = null, curCell = null;
            ce.moveNext();
            while (curCell = ce.current()) {
                lastCell = curCell;
                ce.moveNext();
            }
            return lastCell;
        }

        function initEngine(sheet) {
            var searchCondition = new GcSpread.Sheets.SearchCondition();
            searchCondition.rowStart = 0;
            searchCondition.rowEnd = sheet.getRowCount();
            searchCondition.columnStart = 0;
            searchCondition.columnEnd = sheet.getColumnCount();
            searchCondition.searchString = "*";
            searchCondition.searchOrder = GcSpread.Sheets.SearchOrder.ZOrder;
            searchCondition.searchTarget = GcSpread.Sheets.SearchFoundFlags.CellText;
            searchCondition.searchFlags = GcSpread.Sheets.SearchFlags.UseWildCards;
            var cellsEnumerator = new GcSpread.Sheets.CellsEnumerator(sheet, searchCondition);
            return cellsEnumerator;
        }

    </script>
</head>
<body onload="bodyReady()">
    <div id="ss" style="width:100%;height:500px;border:1px solid gray"></div>
    <input type="button" id="btn" value="Last Cell in Console" onclick="buttonClick()" />
</body>
</html>

Spread ASP.NET and Sorting

$
0
0

Spread ASP.NET supports several different methods of sorting. Sorting occurs on the server side. You can sort the data displayed in the sheet either by column or by row. Sorting data makes it easier to find information.

Spread has the following sort methods:

  • Sort
  • SortColumns
  • SortRows

The order of the sort can be in ascending order (A to Z, 0 to 9) or descending order (Z to A, 9 to 0). You can customize the comparison method and you can select which values to use as a comparison key when sorting. Use the SortInfo object in the Sort method to customize sorting.

You can sort entire rows or columns in a sheet and you can specify which column or row to use as a key for sorting.

Use the SortColumns (or SortRows) method to sort the columns (or rows) in a sheet using one or more rows (or columns) as the key. This does not affect the data model, only how the data is displayed. Several overloads provide different ways to sort the columns (or rows). To further customize sorting, use the SortInfo object with these methods.

You can double-click the column header to sort if you set the AllowSort property to true. The sort indicator (an arrow by default) is displayed in the column header after sorting.

The cell type does not matter for sorting. The sorting is based on the data type of the values in the cells. If you sort cells with the DateTime type, then it sorts those cells by date, and if you sort cells with the string type, it sorts those cells alphabetically.

Sorting executed by clicking column headers sorts only the displayed data and does not affect the order of actual data in the data model. So you can reset the sorted data being displayed to the order of actual data using either the ResetViewRowIndexes method or the ResetViewColumnIndexes method. You can use the GetModelRowFromViewRow and GetModelColumnFromViewColumn methods to get the model coordinates after sorting.

The following example sets the AllowSort property. Double-click the column header to sort.

SpreadASPAllowSort

AllowSort

C#

// Add code to Page Load event
if (this.IsPostBack) return;
 //Add sample data
string conStr = "Provider=Microsoft.JET.OLEDB.4.0;data source= C:\\Program Files (x86)\\GrapeCity\\Spread Studio 9\\Common\\nwind.mdb";
string sqlStr = "Select CompanyName, ContactName, ContactTitle, Country from Customers";
System.Data.OleDb.OleDbConnection conn = new System.Data.OleDb.OleDbConnection(conStr);
System.Data.DataSet ds = new System.Data.DataSet();
System.Data.OleDb.OleDbDataAdapter da = new System.Data.OleDb.OleDbDataAdapter(sqlStr, conn);
da.Fill(ds);
FpSpread1.Sheets[0].DataMember = "Patients";
FpSpread1.Sheets[0].DataSource = ds;
FpSpread1.Sheets[0].DefaultStyle.Font.Name = "Calibri";
FpSpread1.Sheets[0].DefaultStyle.Font.Size = 11;
FpSpread1.Sheets[0].PageSize = 100;
FpSpread1.Sheets[0].AllowSort = true;
FpSpread1.Sheets[0].SetColumnWidth(0, 150);
FpSpread1.Sheets[0].SetColumnWidth(1, 150);
FpSpread1.Sheets[0].SetColumnWidth(2, 150);

VB

‘ Add code to Page Load event
If (Me.IsPostBack) Then Return
Dim conStr As String = "Provider=Microsoft.JET.OLEDB.4.0;data source= C:\Program Files (x86)\GrapeCity\Spread Studio 9\Common\nwind.mdb"
Dim sqlStr As String = "Select CompanyName, ContactName, ContactTitle, Country from Customers"
Dim conn As New System.Data.OleDb.OleDbConnection(conStr)
Dim ds As DataSet = New DataSet()
Dim da As New System.Data.OleDb.OleDbDataAdapter(sqlStr, conn)
da.Fill(ds)
FpSpread1.Sheets(0).DataMember = "Patients"
FpSpread1.Sheets(0).DataSource = ds
FpSpread1.Sheets(0).DefaultStyle.Font.Name = "Calibri"
FpSpread1.Sheets(0).DefaultStyle.Font.Size = 11
FpSpread1.Sheets(0).PageSize = 100
FpSpread1.Sheets(0).AllowSort = True
FpSpread1.Sheets(0).SetColumnWidth(0, 150)
FpSpread1.Sheets(0).SetColumnWidth(1, 150)
FpSpread1.Sheets(0).SetColumnWidth(2, 150)

This example creates a Column object for the sheet, sets text in the first three rows of the column, and sorts the column data using a button click event. The sort indicator for the column is displayed after the column is sorted.

C#

private void SpreadPage_Load(object sender,System.EventArgs e)
{
if (this.IsPostBack) return;
FarPoint.Web.Spread.Column mycol;
mycol = FpSpread1.ActiveSheetView.Columns[1];
FpSpread1.ActiveSheetView.SetValue(0, 1, "Alignment");
FpSpread1.ActiveSheetView.SetValue(1, 1, "CarbAdjust");
FpSpread1.ActiveSheetView.SetValue(2, 1, "Brakes");
mycol.SortIndicator = FarPoint.Web.Spread.Model.SortIndicator.Descending;
FpSpread1.ActiveSheetView.SortRows(1, false, true);
FpSpread1.Sheets[0].AllowSort = true;
}

protected void Button1_Click(object sender, EventArgs e)
{
FpSpread1.ActiveSheetView.SortRows(1, true, true);
}

VB

Protected Sub SpreadPage_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If (Me.IsPostBack) Then Return
        Dim mycol As FarPoint.Web.Spread.Column
        mycol = FpSpread1.ActiveSheetView.Columns(1)
        FpSpread1.ActiveSheetView.SetValue(0, 1, "Alignment")
        FpSpread1.ActiveSheetView.SetValue(1, 1, "CarbAdjust")
        FpSpread1.ActiveSheetView.SetValue(2, 1, "Brakes")
        mycol.SortIndicator = FarPoint.Web.Spread.Model.SortIndicator.Descending
        FpSpread1.ActiveSheetView.SortRows(1, False, True)
        FpSpread1.Sheets(0).AllowSort = True
    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        FpSpread1.Sheets(0).SetColumnSortIndicator(1, FarPoint.Web.Spread.Model.SortIndicator.Ascending)
    End Sub

This example sorts a range of columns and specifies a sort key. Use this method if you want to specify more than one row by which to sort (have more than one key for sorting). The SortInfo array can contain multiple keys (multiple rows) and the first specified row is the primary key.

C#

FpSpread1.Sheets[0].Cells[0, 0].Text = "Sales Representative";
FpSpread1.Sheets[0].Cells[1, 0].Text = "Owner";
FpSpread1.Sheets[0].Cells[2, 0].Text = "Order Administrator";
FpSpread1.Sheets[0].Cells[0, 1].Text = "UK";
FpSpread1.Sheets[0].Cells[1, 1].Text = "Sweden";
FpSpread1.Sheets[0].Cells[2, 1].Text = "Germany";
FpSpread1.Sheets[0].Cells[0, 2].Text = "Antonio";
FpSpread1.Sheets[0].Cells[1, 2].Text = "Hardy";
FpSpread1.Sheets[0].Cells[2, 2].Text = "Elizabeth";
FpSpread1.Sheets[0].Cells[0, 3].Text = "Books";
FpSpread1.Sheets[0].Cells[1, 3].Text = "Candles";
FpSpread1.Sheets[0].Cells[2, 3].Text = "Furniture";

FarPoint.Web.Spread.SheetView sv;
FarPoint.Web.Spread.SortInfo[] s = new FarPoint.Web.Spread.SortInfo[1];
s[0] = new FarPoint.Web.Spread.SortInfo(0, false);
sv = FpSpread1.ActiveSheetView;
sv.SortColumns(0, 3, s);

VB

FpSpread1.Sheets(0).Cells(0, 0).Text = "Sales Representative"
FpSpread1.Sheets(0).Cells(1, 0).Text = "Owner"
FpSpread1.Sheets(0).Cells(2, 0).Text = "Order Administrator"
FpSpread1.Sheets(0).Cells(0, 1).Text = "UK"
FpSpread1.Sheets(0).Cells(1, 1).Text = "Sweden"
FpSpread1.Sheets(0).Cells(2, 1).Text = "Germany"
FpSpread1.Sheets(0).Cells(0, 2).Text = "Antonio"
FpSpread1.Sheets(0).Cells(1, 2).Text = "Hardy"
FpSpread1.Sheets(0).Cells(2, 2).Text = "Elizabeth"
FpSpread1.Sheets(0).Cells(0, 3).Text = "Books"
FpSpread1.Sheets(0).Cells(1, 3).Text = "Candles"
FpSpread1.Sheets(0).Cells(2, 3).Text = "Furniture"

Dim sv As FarPoint.Web.Spread.SheetView
Dim s(1) As FarPoint.Web.Spread.SortInfo
s(0) = New FarPoint.Web.Spread.SortInfo(0, False)
sv = FpSpread1.ActiveSheetView
sv.SortColumns(0, 3, s)

You can also sort on the client-side with the SortColumn method. This method causes a postback to occur. The AllowSort property must be set to True for the sheet.

This example sorts the column.

JavaScript

<script lang ="javascript">
        function Test(event) {
            FpSpread1.SortColumn(1);
        }
    </script>

C#

protected void SpreadPage_Load(object sender, EventArgs e)
        {
            if (this.IsPostBack) return;

        FpSpread1.Sheets[0].Cells[0, 0].Text = "Sales Representative";
        FpSpread1.Sheets[0].Cells[1, 0].Text = "Owner";
        FpSpread1.Sheets[0].Cells[2, 0].Text = "Order Administrator";
        FpSpread1.Sheets[0].Cells[0, 1].Text = "UK";
        FpSpread1.Sheets(0).Cells(1, 1).Text = "Germany"
        FpSpread1.Sheets(0).Cells(2, 1).Text = "Sweden"
        FpSpread1.Sheets[0].Cells[0, 2].Text = "Antonio";
        FpSpread1.Sheets[0].Cells[1, 2].Text = "Hardy";
        FpSpread1.Sheets[0].Cells[2, 2].Text = "Elizabeth";
        FpSpread1.Sheets[0].Cells[0, 3].Text = "Books";
        FpSpread1.Sheets[0].Cells[1, 3].Text = "Candles";
        FpSpread1.Sheets[0].Cells[2, 3].Text = "Furniture";

        FpSpread1.Sheets[0].AllowSort = true;
        FpSpread1.Attributes.Add("onActiveCellChanged", "Test(event)");
        }

VB

Protected Sub SpreadPage_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If (Me.IsPostBack) Then Return
        FpSpread1.Sheets(0).Cells(0, 0).Text = "Sales Representative"
        FpSpread1.Sheets(0).Cells(1, 0).Text = "Owner"
        FpSpread1.Sheets(0).Cells(2, 0).Text = "Order Administrator"
        FpSpread1.Sheets(0).Cells(0, 1).Text = "UK"
        FpSpread1.Sheets(0).Cells(1, 1).Text = "Germany"
        FpSpread1.Sheets(0).Cells(2, 1).Text = "Sweden"
        FpSpread1.Sheets(0).Cells(0, 2).Text = "Antonio"
        FpSpread1.Sheets(0).Cells(1, 2).Text = "Hardy"
        FpSpread1.Sheets(0).Cells(2, 2).Text = "Elizabeth"
        FpSpread1.Sheets(0).Cells(0, 3).Text = "Books"
        FpSpread1.Sheets(0).Cells(1, 3).Text = "Candles"
        FpSpread1.Sheets(0).Cells(2, 3).Text = "Furniture"

        FpSpread1.Sheets(0).AllowSort = True
        FpSpread1.Attributes.Add("onActiveCellChanged", "Test(event)")
    End Sub

The SortColumnCommand event occurs when AllowSort is True.

This example uses the SortColumnCommand event and returns the sorted column.

C#

FarPoint.Web.Spread.Column col;
col = FpSpread1.ActiveSheetView.Columns[1];
FpSpread1.ActiveSheetView.Cells[0, 1].Text = "Alignment";
FpSpread1.ActiveSheetView.Cells[1, 1].Text = "CarbAdjust";
FpSpread1.ActiveSheetView.Cells[2, 1].Text = "Brakes";            
FpSpread1.ActiveSheetView.AllowSort = true;
col.SortIndicator = FarPoint.Web.Spread.Model.SortIndicator.Descending;

protected void FpSpread1_SortColumnCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
        {
            FpSpread1.ActiveSheetView.Cells[0, 0].Text = "The sorted column was column #" + e.CommandArgument;
        }

VB

Dim col As FarPoint.Web.Spread.Column
col = FpSpread1.ActiveSheetView.Columns(1)
FpSpread1.ActiveSheetView.Cells(0, 1).Text = "Alignment"
FpSpread1.ActiveSheetView.Cells(1, 1).Text = "CarbAdjust"
FpSpread1.ActiveSheetView.Cells(2, 1).Text = "Brakes"
col.SortIndicator = FarPoint.Web.Spread.Model.SortIndicator.Descending
FpSpread1.ActiveSheetView.AllowSort = True

Protected Sub FpSpread1_SortColumnCommand(sender As Object, e As FarPoint.Web.Spread.SpreadCommandEventArgs) Handles 
FpSpread1.SortColumnCommand
        FpSpread1.ActiveSheetView.Cells(0, 0).Text = "The sorted column was column #" & e.CommandArgument
    End Sub

Adding an Excel-Like Table Slicer to Your JavaScript Application with No Code

$
0
0

The latest release of SpreadJS added a very powerful feature: Table Slicers. In their basic form they are column filters represented as button collections. Click a button, filter the data by that value. Pictured below is the view that I will create in this article.

Table Slicer

Table slicers in the SpreadJS Designer filtering data by Category and Sub-Category.

These are very common in Excel, but they only work with PivotTables. SpreadJS takes the slicer concept to the next level by giving you a way to add a slicer to your data sets without using PivotTables. You can even create custom slicers with controls, such as range sliders and range check boxes, but this article will just cover the basics.

This article will show you how to add a slicer to a data set in the SpreadJS designer and without using code.  To keep it simple, I will start with a data table in the designer. In the real world, you would likely want to bind a data source.

If you would like to follow along, I have included the data in an Excel spreadsheet. Download it here. Open it (File > Open) in the designer to load it.

In order to include slicers in your data view, you need to define a table. The file linked above has a table, but it is also very easy to define your own using the Format Table toolbar button.

Format Table Button

The Format Table feature in the SpreadJS Designer works much like Excel’s Format as Table feature.

When you click your table, the Design Tab will automatically open on the Ribbon toolbar. Click the Insert Slicer button and select the columns you would like to filter (Category and Sub-Category in my case).

Using the insert slicer feature.

Using the insert slicer feature.

When you click OK, your slicers will appear on the page. You can drag them anywhere you would like as well as configure preferences, group styles, and button styles using the buttons found on the Ribbon toolbar.

When you have a view you like, use File > Export > Export JavaScript file that you can then use to load into an instance of the SpreadJS widget on a web page.

Export SpreadJS JavaScript

Exporting a data view.

That is all you need to do for a basic table slicer, but you can go much deeper by using the API. See the “SpreadJS Table Slicer” post by Gina Daniels for an introduction on implementing and configuring slicers in code.

You are also not limited to the controls you see in the default slicer. You can create your own with sliders, checkboxes, drop-downs and more as you see in the screen shot below. You can even filter data with charts!

Custom Slicer

A customer slicer applied to a data set.

For deep-dive tutorials and more samples, find the Slicers section in the SpreadJS tutorial site.

 

 

Spread Windows Forms and the GcDateTime Cell

$
0
0

You can create a GcDateTime cell that displays date and time values. This can be useful if you want to restrict the type of data the user can type in the cell. The GcDateTimeCellType is part of the GrapeCity.Win.PluginInputMan assembly.

The GcDateTime cell allows the user to pick a date from a calendar drop-down or type in the cell.

The GcDateTime cell supports different calendar styles. You can set colors and styles with the DropDownCalendar class. You can specify which fields to display with the DisplayFields property.

You can specify the focus position when the cell gets focus with the FocusPosition property and you can specify whether focus leaves the cell after typing the last character in the date value with the ExitOnLastChar property.

You can use the ShortcutKeys property to map keys to actions for the GcDateTime cell. In edit mode, these shortcut keys have precedence over the Spread input maps. The cell uses the Spread input maps when not in edit mode.

You can specify the type of drop-down to display with the DropDownType property. The drop-down picker type is easier to use in a touch environment.

The GcDateTimeCellType class has the following properties:

Property Description
AcceptsArrowKeys Gets or sets how arrow keys are processed by the edit control. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
AcceptsCrLf Gets or sets a value that indicates how to process the CrLf characters when copying, cutting, or pasting the string.
AlternateText Gets the alternate text of the GcDateTimeCellType object.
BackgroundImage Gets or sets the background image for the cell. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
ClipContent Gets or sets how data is copied to the Clipboard. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.FieldsEditorControlCellType)
DefaultActiveField Gets or sets the default active field of the cell.
DisplayFields Gets the display fields of the GcDateTimeCellType object.
DropDown Gets the drop-down settings for the drop-down function.
DropDownCalendar Gets the settings for the drop-down calendar.
DropDownPicker Gets the settings for the drop-down picker.
EditMode Gets or sets the edit mode of the control. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
ExcelExportFormat Overridden. Gets or sets the excel export format.
ExitOnLastChar Gets or sets whether the next control in the tab order receives the focus as soon as the control is filled with the last character. (Inherited from  GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
Fields A GrapeCity.Win.Spread.InputMan.CellType.DateFieldCollection that represents the items in the GcDateTime object.
FieldsEditMode Gets or sets the fields edit mode.
FocusPosition Gets or sets the initial cursor position when the editor gets focus.
MaxDate Gets or sets the maximum allowable value when changing the field or value of the control using the spin setting.
MaxMinBehavior Gets or sets the behavior when the new input value is outside of GcDateTime.MinDate and GcDateTime.MaxDate.
MinDate Gets or sets the minimum allowable value when changing the field or value of the control using the spin setting.
PaintByControl Gets or sets a value that indicates how to paint the cell. If true, the cell uses the inner control’s painting to paint the cell, in this case, the cell paints exactly the same as the editing control. All settings of the cell such as fields with different styles are shown when painting the cell. The cell’s paint performance is slow if painting by the control, rather than painting the string directly. Also, the text in the cell cannot be selected when exporting to pdf. If false, performance is good but some settings do not take effect.
PromptChar Gets or sets the character used as a prompt for input. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.FieldsEditorControlCellType)
ReadOnly Gets or sets a value that indicates whether this control is read-only. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
RecommendedValue Gets or sets the recommended value.
ShortcutKeys Gets the InputMan EditingControl’s shortcuts. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
ShowLiterals Gets or sets whether to display the literals during user entry. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.FieldsEditorControlCellType)
ShowRecommendedValue Gets or sets a value that indicates whether to show the recommended value.
ShowTouchToolBar Gets or sets how to show the InputManCellTypeBase.TouchToolBar. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
SideButtons Gets a collection of side buttons.
Spin Gets the spin function settings.
Static Gets or sets whether the cell is static, which prohibits user interaction. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase
SubEditor Gets or sets the subeditor. (Inherited from FarPoint.Win.Spread.CellType.BaseCellType)
TabAction Gets or sets whether the tab key moves the focus between controls or between fields within the control. (Inherited fromGrapeCity.Win.Spread.InputMan.CellType.FieldsEditorControlCellType)
TouchContextMenuScale Gets or sets the factor applied to the context menu item’s height while the context menu is open when using touch. (Inherited fromGrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
TouchToolBar Gets the displayed InputManCellTypeBase.TouchToolBar when using a  touch operation. (Inherited from GrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
UseSpreadDropDownButtonRender Gets or sets a value that indicates whether to paint the drop-down button with the spread drop-down button renderer. (Inherited fromGrapeCity.Win.Spread.InputMan.CellType.InputManCellTypeBase)
ValidateMode Gets or sets the validation mode during control input.

This example uses the ShortcutKeys property. Use the Tab key to put a date in the cell while the cell is in edit mode. The following image displays the list of actions that you can use.

gcDateTimeactions

C#

GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType inputcell = new GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType();
inputcell.ShortcutKeys.Add(System.Windows.Forms.Keys.Tab, "SetNow");            
fpSpread1.Sheets[0].Cells[0, 0].CellType = inputcell;

VB

Dim inputcell As New GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType()
inputcell.ShortcutKeys.Add(System.Windows.Forms.Keys.Tab, "SetNow")
FpSpread1.Sheets(0).Cells(0, 0).CellType = inputcell

This example sets colors for the calendar and displays a border around today’s date.

gcdatetimecolor

Drop-down Calendar

C#

GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType inputcell = new GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType();
inputcell.DropDownCalendar.BackColor = Color.Aquamarine;
inputcell.DropDownCalendar.TodayMarkColor = Color.Firebrick;
inputcell.DropDownCalendar.BorderStyle = BorderStyle.FixedSingle;
inputcell.DropDownCalendar.ShowTodayMark = true;
fpSpread1.Sheets[0].Cells[0, 0].CellType = inputcell;
fpSpread1.Sheets[0].Columns[0].Width = 100;

VB

Dim inputcell As New GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType()
inputcell.DropDownCalendar.BackColor = Color.Aquamarine
inputcell.DropDownCalendar.TodayMarkColor = Color.Firebrick
inputcell.DropDownCalendar.BorderStyle = BorderStyle.FixedSingle
inputcell.DropDownCalendar.ShowTodayMark = True
FpSpread1.Sheets(0).Cells(0, 0).CellType = inputcell
FpSpread1.Sheets(0).Columns(0).Width = 100

This example creates a custom format for the GcDateTime cell.

gcdatetimedisplay

Custom Format

C#

GrapeCity.Win.Spread.InputMan.CellType.Fields.DateDayFieldInfo fvalue = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateDayFieldInfo();
fvalue.BackColor = Color.Lavender;
GrapeCity.Win.Spread.InputMan.CellType.Fields.DateMonthFieldInfo mvalue = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateMonthFieldInfo();
mvalue.BackColor = Color.Azure;
GrapeCity.Win.Spread.InputMan.CellType.Fields.DateYearFieldInfo yvalue = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateYearFieldInfo();
yvalue.BackColor = Color.Crimson;
GrapeCity.Win.Spread.InputMan.CellType.Fields.DateLiteralFieldInfo eday = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateLiteralFieldInfo();
eday.Text = "/";           

GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType inputcell = new GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType();
GrapeCity.Win.Spread.InputMan.CellType.Fields.DateDayDisplayFieldInfo day = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateDayDisplayFieldInfo();
day.ShowLeadingZero = true;
GrapeCity.Win.Spread.InputMan.CellType.Fields.DateMonthDisplayFieldInfo month = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateMonthDisplayFieldInfo();
month.ShowLeadingZero = true;
GrapeCity.Win.Spread.InputMan.CellType.Fields.DateYearDisplayFieldInfo year = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateYearDisplayFieldInfo();
year.ShowLeadingZero = true;
GrapeCity.Win.Spread.InputMan.CellType.Fields.DateLiteralDisplayFieldInfo lday = new GrapeCity.Win.Spread.InputMan.CellType.Fields.DateLiteralDisplayFieldInfo();
lday.Text = "/";
inputcell.DisplayFields.Add(month);
inputcell.DisplayFields.Add(lday);
inputcell.DisplayFields.Add(day);
inputcell.DisplayFields.Add(lday);
inputcell.DisplayFields.Add(year);

inputcell.Fields.Clear();
inputcell.Fields.Add(mvalue);
inputcell.Fields.Add(eday);
inputcell.Fields.Add(fvalue);
inputcell.Fields.Add(eday);
inputcell.Fields.Add(yvalue);
fpSpread1.Sheets[0].Cells[1, 1].CellType = inputcell;

VB

Dim fvalue As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateDayFieldInfo()
fvalue.BackColor = Color.Lavender
Dim mvalue As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateMonthFieldInfo()
mvalue.BackColor = Color.Azure
Dim yvalue As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateYearFieldInfo()
yvalue.BackColor = Color.Crimson
Dim eday As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateLiteralFieldInfo()
eday.Text = "/"

Dim inputcell As New GrapeCity.Win.Spread.InputMan.CellType.GcDateTimeCellType()
Dim day As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateDayDisplayFieldInfo()
day.ShowLeadingZero = True
Dim month As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateMonthDisplayFieldInfo()
month.ShowLeadingZero = True
Dim year As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateYearDisplayFieldInfo()
year.ShowLeadingZero = True
Dim lday As New GrapeCity.Win.Spread.InputMan.CellType.Fields.DateLiteralDisplayFieldInfo()
lday.Text = "/"
inputcell.DisplayFields.Add(month)
inputcell.DisplayFields.Add(lday)
inputcell.DisplayFields.Add(day)
inputcell.DisplayFields.Add(lday)
inputcell.DisplayFields.Add(year)

inputcell.Fields.Clear()
inputcell.Fields.Add(mvalue)
inputcell.Fields.Add(eday)
inputcell.Fields.Add(fvalue)
inputcell.Fields.Add(eday)
inputcell.Fields.Add(yvalue)
FpSpread1.Sheets(0).Cells(1, 1).CellType = inputcell

SpreadJS and Locking Cells

$
0
0

You can prevent users from editing cells by locking them. This can be useful if you have formulas, labels, or other data that you do not want the user to change. SpreadJS supports protecting sheets and unlocking or locking cells.

Use the setIsProtected method to protect the sheet. Use the locked method to lock a cell.

Cells can still be edited if the sheet setIsProtected method is false.

Protecting a sheet prevents cells from being edited. You can allow the user to edit specific cells by protecting the sheet and only unlocking cells you want the user to edit.

Data can be copied from locked cells.

The protectionOption method can be used to specify what areas you want the user to be allowed to change when a sheet is protected. Areas include resizing rows or columns, filtering, and so on.

The protectionOption method has the following options:

Option Description
allowSelectLockedCells True or undefined if the user can select locked cells.
allowSelectUnlockedCells True or undefined if the user can select unlocked cells.
allowSort True if the user can sort ranges.
allowFilter True if the user can filter ranges.
allowEditObjects True if the user can edit floating objects.
allowResizeRows True if the user can resize rows.
allowResizeColumns True if the user can resize columns.

The allowSort option applies to sorting in the filter dialog. The allowEditObjects option applies to selecting floating objects and selecting or editing comments.

You can also use the SpreadJS Designer to protect a sheet and unlock or lock cells. Use the Format option under the Home tab. Then select the Protect Sheet or Unlock Cells menu option.

SpreadJSLockDesign

SpreadJS Designer

You can set the locked method for a cell, column, or row. For example:

JavaScript

sheet.getCell(1,1).locked(false);
sheet.setValue(1,1,"unLocked");
sheet.getColumn(3).locked(false);
sheet.getRow(5).locked(false);
sheet.setIsProtected(true);



This example allows locked cells to be selected and rows to be resized.

JavaScript

activeSheet.setValue(0, 0, 10);
activeSheet.setValue(1, 1, 100);
activeSheet.setValue(2, 0, 50);
activeSheet.setValue(3, 0, 40);
activeSheet.setValue(4, 0, 80);
activeSheet.setValue(5, 0, 1);
activeSheet.setValue(6, 0, 65);
activeSheet.setValue(7, 0, 20);
activeSheet.setValue(8, 0, 30);
activeSheet.setValue(9, 0, 35);
activeSheet.getCell(1, 1).locked(true);
activeSheet.setIsProtected(true);
activeSheet.protectionOption().allowResizeRows = true;
activeSheet.protectionOption().allowResizeColumns = false;
activeSheet.protectionOption().allowSelectLockedCells = true;



This example protects the sheet and unlocks cells.

JavaScript

$(document).ready(function () {
    var spread = new GcSpread.Sheets.Spread($("#ss").get(0),{sheetCount:3});
    var activeSheet = spread.getActiveSheet();

    //unlock the entire column C.
    activeSheet.getColumn(2, GcSpread.Sheets.SheetArea.viewport).locked(false);
    //unlock cell(1,3).
    activeSheet.getCell(1, 3, GcSpread.Sheets.SheetArea.viewport).locked(false);
    activeSheet.getCell(1, 3, GcSpread.Sheets.SheetArea.viewport).value("unlocked");
    //Protect the sheet, then cells can only be edited when they are unlocked.
    activeSheet.setIsProtected(true);
});


This example protects formula and label cells.

 SpreadJSLocked

JavaScript

activeSheet.addSpan(1, 1, 1, 3);
activeSheet.setValue(1, 1, "Store");
activeSheet.addSpan(1, 4, 1, 7);
activeSheet.setValue(1, 4, "Goods");
activeSheet.addSpan(2, 1, 1, 2);
activeSheet.setValue(2, 1, "Area");
activeSheet.addSpan(2, 3, 2, 1);
activeSheet.setValue(2, 3, "ID");
activeSheet.addSpan(2, 4, 1, 2);
activeSheet.setValue(2, 4, "Fruits");
activeSheet.addSpan(2, 6, 1, 2);
activeSheet.setValue(2, 6, "Vegetables");
activeSheet.addSpan(2, 8, 1, 2);
activeSheet.setValue(2, 8, "Foods");
activeSheet.addSpan(2, 10, 2, 1);
activeSheet.setValue(2, 10, "Total");

activeSheet.setValue(3, 1, "State");
activeSheet.setValue(3, 2, "City");
activeSheet.setValue(3, 4, "Grape");
activeSheet.setValue(3, 5, "Apple");
activeSheet.setValue(3, 6, "Potato");
activeSheet.setValue(3, 7, "Tomato");
activeSheet.setValue(3, 8, "Sandwich");
activeSheet.setValue(3, 9, "Hamburger");

activeSheet.addSpan(4, 1, 7, 1);
activeSheet.addSpan(4, 2, 3, 1);
activeSheet.addSpan(7, 2, 3, 1);
activeSheet.addSpan(10, 2, 1, 2);
activeSheet.setValue(10, 2, "Sub Total:");
activeSheet.addSpan(11, 1, 7, 1);
activeSheet.addSpan(11, 2, 3, 1);
activeSheet.addSpan(14, 2, 3, 1);
activeSheet.addSpan(17, 2, 1, 2);
activeSheet.setValue(17, 2, "Sub Total:");
activeSheet.addSpan(18, 1, 1, 3);
activeSheet.setValue(18, 1, "Total:");

activeSheet.setValue(4, 1, "NC");
activeSheet.setValue(4, 2, "Raleigh");
activeSheet.setValue(7, 2, "Charlotte");
activeSheet.setValue(4, 3, "001");
activeSheet.setValue(5, 3, "002");
activeSheet.setValue(6, 3, "003");
activeSheet.setValue(7, 3, "004");
activeSheet.setValue(8, 3, "005");
activeSheet.setValue(9, 3, "006");
activeSheet.setValue(11, 1, "PA");
activeSheet.setValue(11, 2, "Philadelphia");
activeSheet.setValue(14, 2, "Pittsburgh");
activeSheet.setValue(11, 3, "007");
activeSheet.setValue(12, 3, "008");
activeSheet.setValue(13, 3, "009");
activeSheet.setValue(14, 3, "010");
activeSheet.setValue(15, 3, "011");
activeSheet.setValue(16, 3, "012");
activeSheet.setFormula(10, 4, "=SUM(E5:E10)");
activeSheet.setFormula(10, 5, "=SUM(F5:F10)");
activeSheet.setFormula(10, 6, "=SUM(G5:G10)");
activeSheet.setFormula(10, 7, "=SUM(H5:H10)");
activeSheet.setFormula(10, 8, "=SUM(I5:I10)");
activeSheet.setFormula(10, 9, "=SUM(J5:J10)");
activeSheet.setFormula(17, 4, "=SUM(E12:E17)");
activeSheet.setFormula(17, 5, "=SUM(F12:F17)");
activeSheet.setFormula(17, 6, "=SUM(G12:G17)");
activeSheet.setFormula(17, 7, "=SUM(H12:H17)");
activeSheet.setFormula(17, 8, "=SUM(I12:I17)");
activeSheet.setFormula(17, 9, "=SUM(J12:J17)");

for (var i = 0; i < 14; i++) {
    activeSheet.setFormula(4 + i, 10, "=SUM(E" + (5 + i).toString() + ":J" + (5 + i).toString() + ")");
}

activeSheet.setFormula(18, 4, "=E11+E18");
activeSheet.setFormula(18, 5, "=F11+F18");
activeSheet.setFormula(18, 6, "=G11+G18");
activeSheet.setFormula(18, 7, "=H11+H18");
activeSheet.setFormula(18, 8, "=I11+I18");
activeSheet.setFormula(18, 9, "=J11+J18");
activeSheet.setFormula(18, 10, "=K11+K18");

activeSheet.getCells(1, 1, 3, 10).backColor("#D9D9FF");
activeSheet.getCells(4, 1, 18, 3).backColor("#D9FFD9");
activeSheet.getCells(1, 1, 3, 10).hAlign(GcSpread.Sheets.HorizontalAlign.center);

activeSheet.setBorder(new GcSpread.Sheets.Range(1, 1, 18, 10), new GcSpread.Sheets.LineBorder("Black", GcSpread.Sheets.LineStyle.thin), { all: true });
activeSheet.setBorder(new GcSpread.Sheets.Range(4, 4, 3, 6), new GcSpread.Sheets.LineBorder("Black", GcSpread.Sheets.LineStyle.dotted), { inside: true });
activeSheet.setBorder(new GcSpread.Sheets.Range(7, 4, 3, 6), new GcSpread.Sheets.LineBorder("Black", GcSpread.Sheets.LineStyle.dotted), { inside: true });
activeSheet.setBorder(new GcSpread.Sheets.Range(11, 4, 3, 6), new GcSpread.Sheets.LineBorder("Black", GcSpread.Sheets.LineStyle.dotted), { inside: true });
activeSheet.setBorder(new GcSpread.Sheets.Range(14, 4, 3, 6), new GcSpread.Sheets.LineBorder("Black", GcSpread.Sheets.LineStyle.dotted), { inside: true });

activeSheet.setColumnWidth(0, 40);
activeSheet.setColumnWidth(1, 40);
activeSheet.setColumnWidth(2, 90);
activeSheet.setColumnWidth(3, 40);
activeSheet.setColumnWidth(4, 40);
activeSheet.setColumnWidth(11, 40);

activeSheet.setIsProtected(true);

function fillSampleData(range) {
        for (var i = 0; i < range.rowCount; i++) {
            for (var j = 0; j < range.colCount; j++) {
                activeSheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300));
                activeSheet.getCell(range.row + i, range.col + j).locked(false);
            }
        }
    }

fillSampleData(new GcSpread.Sheets.Range(4, 4, 6, 6));
fillSampleData(new GcSpread.Sheets.Range(11, 4, 6, 6));
Viewing all 105 articles
Browse latest View live