Illustrations helps you to insert a image, shapes and graphic objects in the Essential JS 2 spreadsheet.
Adding images to a spreadsheet can enhance the visual appeal and help convey information more clearly.
- The default value for
allowImage
property istrue
.
You can insert the image by using one of the following ways,
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:
- In spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF and JPEG files.
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 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
property in the insertImage()
method programmatically.top
and left
property in the insertImage()
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();
}
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
.
The following types of charts are available in the Spreadsheet.
- Column Chart
- Bar Chart
- Area Chart
- Line Chart
- Pie Chart
- Scatter Chart
You can insert the chart by using one of the following ways,
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:
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 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.
@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();
}