Illustrations
17 Feb 202219 minutes to read
Illustrations helps you to insert a image, shapes and graphic objects in the Essential JS 2 spreadsheet.
Image
Adding images to a spreadsheet can enhance the visual appeal and help convey information more clearly.
- The default value for
allowImage
property istrue
.
Insert Image
You can insert the image by using one of the following ways,
- Selecting the Insert tab in the Ribbon toolbar, and then choose the Image tab.
- Use the
insertImage()
method programmatically.
The available parameters in insertImage()
method are,
Parameter | Type | Description |
---|---|---|
images | ImageModel |
Specifies the options to insert image in spreadsheet. |
range(optional) | string |
Specifies the range in spreadsheet. |
The available arguments in ImageModel
are:
- src: Specifies the image source.
- id: Specifies image element id.
- height: Specifies the height of the image.
- width: Specifies the width of the image.
- top: Specifies the height of the image.
- left: Specifies the width of the image.
- In spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF and JPEG files.
Delete Image
- If you want to delete the image, just select the image firstly, and then press the Delete key.
- Use the
deleteImage()
method programmatically.
The available parameters in deleteImage()
method are,
Parameter | Type | Description |
---|---|---|
id | string |
Specifies the id of the image element to be deleted. |
range(optional) | string |
Specifies the range in spreadsheet. |
Image Customization
Image feature allows you to view and insert a image in a spreadsheet and you can change the height and width of the image by resizing and move it to another position.
Height and Width
- You can change the height and width of the image by resizing.
- Use the
height
andwidth
property in theinsertImage()
method programmatically.
Top and Left
- You can change the position of the image by drag and drop.
- Use the
top
andleft
property in theinsertImage()
method programmatically.
@Html.EJS().Spreadsheet("spreadsheet").ShowFormulaBar(false).ShowRibbon(false).Created("created").Sheets(sheet =>
{
sheet.Name("Employee Deatils").SelectedRange("B2").Rows(row =>
{
row.Index(1).Height(30).Cells(cell =>
{
cell.Value(" Mark").Add();
}).Add();
row.Index(2).Height(40).Cells(cell =>
{
cell.Index(2).Value("Id").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Bottom }).Add();
cell.Index(3).Value(": 1001").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Bottom }).Add();
}).Add();
row.Index(3).Cells(cell =>
{
cell.Index(2).Value("Gender").Add();
cell.Index(3).Value(": Male").Add();
}).Add();
row.Index(4).Cells(cell =>
{
cell.Index(2).Value("Contact Preference").Add();
cell.Index(3).Value(": Email").Add();
}).Add();
row.Index(5).Cells(cell =>
{
cell.Index(2).Value("Email").Add();
cell.Index(3).Value(": mark@gmail.com").Add();
}).Add();
row.Index(6).Cells(cell =>
{
cell.Index(2).Value("Date of Birth").Add();
cell.Index(3).Value(": Jan 3, 1985").Add();
}).Add();
row.Index(7).Height(40).Cells(cell =>
{
cell.Index(2).Value("Department").Add();
cell.Index(3).Value(": IT").Add();
}).Add();
row.Index(8).Height(40).Cells(cell =>
{
cell.Index(2).Value("IsActive").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Top }).Add();
cell.Index(3).Value(": True").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Top }).Add();
}).Add();
row.Index(10).Height(30).Cells(cell =>
{
cell.Value(" Mary").Add();
}).Add();
row.Index(11).Height(40).Cells(cell =>
{
cell.Index(2).Value("Id").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Bottom }).Add();
cell.Index(3).Value(": 1002").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Bottom }).Add();
}).Add();
row.Index(12).Cells(cell =>
{
cell.Index(2).Value("Gender").Add();
cell.Index(3).Value(": Female").Add();
}).Add();
row.Index(13).Cells(cell =>
{
cell.Index(2).Value("Contact Preference").Add();
cell.Index(3).Value(": Phone").Add();
}).Add();
row.Index(14).Cells(cell =>
{
cell.Index(2).Value("Email").Add();
cell.Index(3).Value(": mary@gmail.com").Add();
}).Add();
row.Index(15).Cells(cell =>
{
cell.Index(2).Value("Date of Birth").Add();
cell.Index(3).Value(": Jan 3, 1985").Add();
}).Add();
row.Index(16).Height(40).Cells(cell =>
{
cell.Index(2).Value("Department").Add();
cell.Index(3).Value(": HR").Add();
}).Add();
row.Index(17).Height(40).Cells(cell =>
{
cell.Index(2).Value("IsActive").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Top }).Add();
cell.Index(3).Value(": True").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Top }).Add();
}).Add();
row.Index(19).Height(30).Cells(cell =>
{
cell.Value(" Nashi").Add();
}).Add();
row.Index(20).Height(40).Cells(cell =>
{
cell.Index(2).Value("Id").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Bottom }).Add();
cell.Index(3).Value(": 1003").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Bottom }).Add();
}).Add();
row.Index(21).Cells(cell =>
{
cell.Index(2).Value("Gender").Add();
cell.Index(3).Value(": Female").Add();
}).Add();
row.Index(22).Cells(cell =>
{
cell.Index(2).Value("Contact Preference").Add();
cell.Index(3).Value(": Email").Add();
}).Add();
row.Index(23).Cells(cell =>
{
cell.Index(2).Value("Email").Add();
cell.Index(3).Value(": nashi@gmail.com").Add();
}).Add();
row.Index(24).Cells(cell =>
{
cell.Index(2).Value("Date of Birth").Add();
cell.Index(3).Value(": Apr 11, 1986").Add();
}).Add();
row.Index(25).Height(40).Cells(cell =>
{
cell.Index(2).Value("Department").Add();
cell.Index(3).Value(": IT").Add();
}).Add();
row.Index(26).Height(40).Cells(cell =>
{
cell.Index(2).Value("IsActive").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Top }).Add();
cell.Index(3).Value(": True").Style(new SpreadsheetCellStyle() { VerticalAlign = VerticalAlign.Top }).Add();
}).Add()).Add();
}).Columns(column =>
{
column.Width(20).Add();
column.Width(280).Add();
column.Width(172).Add();
column.Width(160).Add();
}).Add();
}).Render()
<script>
function created() {
this.merge('B2:D2');
this.merge('B11:D11');
this.merge('B20:D20');
this.cellFormat({ fontWeight: 'bold', verticalAlign: 'middle', backgroundColor: '#1167b1', color: '#ffffff' }, 'B2');
this.cellFormat({ fontWeight: 'bold', verticalAlign: 'middle', backgroundColor: '#1167b1', color: '#ffffff' }, 'B11');
this.cellFormat({ fontWeight: 'bold', verticalAlign: 'middle', backgroundColor: '#1167b1', color: '#ffffff' }, 'B20');
this.cellFormat({ fontWeight: 'bold' }, 'C3:C9');
this.cellFormat({ fontWeight: 'bold' }, 'C12:C18');
this.cellFormat({ fontWeight: 'bold' }, 'C21:C27');
this.setBorder({ border: '1px solid #1167b1' }, 'B2:D9', 'Outer');
this.setBorder({ border: '1px solid #1167b1' }, 'B11:D18', 'Outer');
this.setBorder({ border: '1px solid #1167b1' }, 'B20:D27', 'Outer');
}
</script>
public IActionResult Index()
{
return View();
}
Limitations of Image
The following features have some limitations in Image:
- Corner resizing option in the image element.
- Copy and paste the external image.
Chart
A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of x
-axis and y
-axis. You can use the allowChart
property to enable or disable the chart functionality.
- The default value for the
allowChart
property istrue
.
Types of chart
The following types of charts are available in the Spreadsheet.
- Column Chart
- Bar Chart
- Area Chart
- Line Chart
- Pie Chart
- Scatter Chart
Insert Chart
You can insert the chart by using one of the following ways,
- Select the chart icon in the Ribbon toolbar under the Insert Tab.
- Use the
insertChart()
method programmatically.
The available parameter in the insertChart()
method is,
Parameter | Type | Description |
---|---|---|
chart | ChartModel |
Specifies the options to insert a chart in the spreadsheet. |
The available arguments in the ChartModel
are:
- type: Specifies the type of chart.
- theme: Specifies the theme of a chart.
- isSeriesInRows: Specifies to switch the row or a column.
- range: Specifies the selected range or specified range.
- id: Specifies the chart element id.
Delete Chart
- If you want to delete the chart, just select the chart, and then press the Delete key.
- Use the
deleteChart()
method programmatically.
The available parameter in the deleteChart()
method is,
Parameter | Type | Description |
---|---|---|
id | string |
Specifies the id of the chart element to be deleted. |
Chart Customization
Chart feature allows you to view and insert a chart in a spreadsheet, and you can change the height and width of the chart by resizing and moving it to another position.
-
You can change the height and width of the chart by resizing.
-
You can change the position of the chart by drag and drop.
@Html.EJS().Spreadsheet("spreadsheet").Created("created").Sheets(sheet =>
{
sheet.Name("Book Sales").Rows(row =>
{
row.Height(30).Cells(cell =>
{
cell.Value("Book Sales 2016-2020").Style(new SpreadsheetCellStyle() { BackgroundColor = "#357cd2", Color = "#fff", FontWeight = FontWeight.Bold, TextAlign = TextAlign.Center, VerticalAlign = VerticalAlign.Middle }).Add();
}).Add();
row.Cells(cell =>
{
cell.Index(7).Chart(new List<Syncfusion.EJ2.Spreadsheet.Chart> { new Syncfusion.EJ2.Spreadsheet.Chart() { Type = Syncfusion.EJ2.Spreadsheet.ChartType.Column, Range = "A3:F8" } }).Add();
}).Add();
}).Ranges(ranges =>
{
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).StartCell("A3").Add();
}).Columns(column =>
{
column.Width(110).Add();
column.Width(100).Add();
column.Width(100).Add();
column.Width(100).Add();
column.Width(100).Add();
column.Width(100).Add();
}).Add();
}).Render()
<script>
function created() {
this.merge('A1:F1');
this.cellFormat({ backgroundColor: '#357cd2', color: '#fff',
fontWeight: 'bold', textAlign: 'center' }, 'A3:F3');
this.numberFormat(getFormatFromType('Currency'), 'B4:F8');
}
</script>
public IActionResult Index()
{
List<object> chartData = new List<object>()
{
new { Book= "Classics", Year 2016= "19033", Year 2017= "78453", Year 2018= "24354", Year 2019= "18757", Year 2020= "34343" },
new { Book= "Mystery", Year 2016= "50400", Year 2017= "82311", Year 2018= "131003", Year 2019= "19899", Year 2020= "42200" },
new { Book= "Romance", Year 2016= "18002", Year 2017= "49529", Year 2018= "79567", Year 2019= "12302", Year 2020= "21277" },
new { Book= "Sci-Fi & Fantasy", Year 2016= "10033", Year 2017= "51200", Year 2018= "66211", Year 2019= "12899", Year 2020= "18779" },
new { Book= "Horror", Year 2016= "23454", Year 2017= "78665", Year 2018= "81232", Year 2019= "19888", Year 2020= "20986" }
};
ViewBag.DefaultData = data;
return View();
}
Limitations of Chart
The following features have some limitations in the Chart:
- Insert row/delete row between the chart data source will not reflect the chart.
- Copy/paste into the chart data source will not reflect the chart.
- Corner resizing option in chart element.