The Spread.NET v14 release includes a new Cell Data Type feature that supports creating Data Types for custom objects. This feature allows any cell to contain a rich set of structured data that can be called remotely in the Spread instance. Like Excel, the Data Type can be applied to cells or as a data table and easily identifiable by a set glyph icon. Users can click on the icon and reveal a list of fields and corresponding values, all depending on the data. There could be numerous field/value pairs that you can work with and see.
Note, when using this feature, you must enable CalcFeatures to FieldValue like so:
Or you can enable all-new calculation engine features like so:
End-users can access a custom object’s information through the Spread interface with an easy pop-up Data Card. The pop-up Data Card is also customizable; below, we demonstrate this by loading an image from a URL to be displayed on the Data Card, allowing users to see and add the image to the Spread instance. Another useful behavior is the Insert Button used to insert the selected data into the cell or column on the right quickly. Developers can define the data that is available when using the insert button as well. We have broken down the features included with this new Cell Data Type and different use cases when implementing Cell Data Types.
As seen here, users can display the Data Card to see the structured data fields by clicking on the glyph icon (1). Users can use the Insert Button to insert the selected data field (2). Another way to insert data is by using the Data Card pop-up (3). In the gif below, when inserting data using the Data Card, an image field with custom code is set to display the cells' image cell type. We go into more detail on this custom code later on in this blog.
How to Use the Glyph and Data Card
Users can apply their glyph to indicate data types in the Spread instance. With an image as an Embedded Resource, the class gets and returns the image as a stream to display in the Spread instance. For example, below, we add the camera.png glyph to indicate the data type cells.
Note our project's name is CellDataType_Movies; this is where the camera.png file is added. Also, be sure to set the included glyph file properties to the Build Action to be an Embedded Resource:
Now, when the Spread instance runs, the glyph is displayed. When it is clicked, a data card pops up to reveal the object's available fields and values. Note, Spread supports DataTable and DataView, allowing data to be extracted from columns of the DataTable or cells' DataView. Spread supports setting Cell Data types to a DataTable and or DataView that enables data to be removed from columns of DataTable or cells' DataView. When applying the data type to a DataView and inserting data using the Data Card or Insert Button, the selected data field will be inserted to the nearest empty cell at the right. The cell that now displays the chosen data field contains a related formula (1). When the data type is applied to a DataTable, and the user is inserting data using the Data Card or Insert Button, a new table column of data will be added to the table's right that fills with relevant values of the property that was selected (2).
Inserting data in both scenarios are depicted here:
Developers can also customize the DataCard pop-up and display an image when the property is selected and insert that image into the Spread instance. For example, below, we are loading Movie posters from URLs. To accomplish this, we must first create an image using the System.Drawing.Image class and create a new WebClient instance using the System.Net.WebClient class to take an images' URL and stream the image from the URL to the Spread instance:
Next, define a new class member called Poster that will be an Image:
Then when creating the custom objects, the Poster member will use the Movie class to create an image that is streamed from the URL using GetPosterFromUrl:
Next, create a custom function to create a ListBox and get the cell's information to display the image:
Finally, we will add a click event listen to display the image in the spread instance by attaching the custom function to the FpSpread.ResolveCusomerControl event handler to FpSpread1 like so:
Be sure to reference the ResolveCustomControl after applying the code logic:
After applying this code logic, the image from the URL will be displayed on the data pop-up card, and when selected from the datacard, the image will show in the Spread Control like so:
How to Use the Insert Button
Spread. NET's Cell Data Types feature includes an Insert Button displayed on cells with a data type added to them. End-users can use this insert button to add a related property to the nearest empty cell to its right. A formula is then used to add and display the selected data. When applying a table to those cells and using the Insert Button, Spread will add a column with the added property's name and fill in the column's relevant values using a formula. Users can also use the built-in keyboard shortcut Ctrl + Shift + F5 to invoke the ShowCard action for the cell data type or click the cell's glyph. Developers can also apply a formula in the Spread instance to access properties of the customer .NET data object without using the insert button.
When using formulas, be sure to follow this syntax: B2.Property1
If your properties’ name has spaces, be sure to encapsulate the property name in brackets like so: B2.[The Property 1]
Note, you can see the formulas that are applied to cells using a formulaTextBox that can be added during design time and attached to the Spread instance like so:
Users can customize the data in the insert button's pop-up card using the FpSpread.ResolveCustomControlEvent. Then create a button, and on the button click display the desired data. For this example, inside the Spread event, the data card is customized to show the text "Box Office." When clicking this insert button, the cell on the outer right will populate with the BoxOffice of the Movie:
Note, be sure to attach the event handler to the Spread instance:
After applying this customization, the insert button will only show the Box Office button:
Use Cases: Implementing Cell Data Types
Below we cover some use cases that go over implementing cell data types. These use cases include implementing them to a single cell and data table, how to use them, and ways to implement custom objects from arrays into the Spread instance.
When creating a cell data type, you will follow these three main steps:
- Define the class for the cell data type and specify the properties that you want to show for the object.
- Create an instance of the class initialized with the appropriate properties and use RichValue < T > to create the IRichValue objects using your class instances.
- Use cell formulas to reference the cell data type object fields directly to get the value or perform some calculation with it, using a standard cell reference to the cell containing the cell data type object and ".[field name]" syntax, e.g., "B2.BoxOffice."
- For more control and faster implementation that does not require reflection, implement IRichValue on the cell data type class directly, and specify the fields through the interface.
Adding Cell Data Types to a Single Cell or Datatable
Cell data types allow users to implement and interact with custom objects by adding the new data types to a cell or DataTable. The section below details how to create and add the data types to cells and as a data table.
To accomplish this, follow these steps:
- Define the class
- Create custom objects and add them to cells
- Add cells to a datatable
Step 1: Define the Class
C#:
Step 2: Create Custom Objects and Add to Cells
C#:
Outcome: Data Types Added to Cells
After applying this code logic, the Spread control will show the Movie members' values in column B and display the movie's Rank in column A using formulas to reference the Rank property. End-users can insert data to new cells by manually entering the formulas or by using Spread's UI Insert Button or Data Card to insert this formula:
Step 3: Add Cells to a DataTable
C#:
Outcome: DataTable with Inserted Columns
After applying this code logic, the sample will appear with a DataTable enabling end-users to insert columns of selected data by using the insert button and keyboard shortcut (Ctrl + Shift + F5). When inserting the selected data, the table will insert a new table column and will set the table column's formula to reference the selected property:
Using Arrays with IRichValue
Cell data types support users using arrays of IRichValue or RichValue, allowing users to access more information and more ways to apply and interact with data.
To accomplish this, follow these steps:
- Define class Country and City
- Create Country and class objects
- Implement the IRichValue on a cell directly
Step 1: Define Class, Country, and City
C#:
Step 2: Create Country, Cities, and CityPopulations Class Objects
C#:
Step 3: Implement the IRichValue on a Cell Directly
C#:
Outcome: Displaying the Country Object
After applying this code logic, the Spread instance displays the country object on cell B2, the list of the cities array in column D, and the array of city names and city population to column F, displaying the rest of the arrays data in column G:
This new feature of Spread .NET V14 is compelling and can be used in different ways to display and allow users to interact with custom data objects.
If you have any questions, our Customer Engagement team is here to help: Submit a ticket.