Skip to content

Commit 9c8dc37

Browse files
sameerkhan001sameerkhan001
committed
Merge branch 'hotfix/hotfix-v31.2.2' of https://github.com/syncfusion-content/document-processing-docs into 260184-ug
2 parents 1760798 + e1607d4 commit 9c8dc37

File tree

3 files changed

+176
-2
lines changed

3 files changed

+176
-2
lines changed

‎Document-Processing-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4818,6 +4818,7 @@
48184818
<li><a href="/document-processing/excel/spreadsheet/blazor/editing">Editing</a></li>
48194819
<li><a href="/document-processing/excel/spreadsheet/blazor/formulas">Formulas</a></li>
48204820
<li><a href="/document-processing/excel/spreadsheet/blazor/contextmenu">Context Menu</a></li>
4821+
<li><a href="/document-processing/excel/spreadsheet/blazor/rows-and-columns">Row and Columns</a></li>
48214822
<li><a href="/document-processing/excel/spreadsheet/blazor/filtering">Filtering</a></li>
48224823
<li><a href="/document-processing/excel/spreadsheet/blazor/sorting">Sorting</a></li>
48234824
<li><a href="/document-processing/excel/spreadsheet/blazor/hyperlink">Hyperlink</a></li>

‎Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ Cell formatting options include:
4343
* **Middle** – Centers content vertically
4444
* **Bottom** – Default alignment
4545

46-
* **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells.
46+
* **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells. To enable text wrapping:
47+
1. Select the target cell or range (e.g., C5).
48+
2. Go to the Home tab.
49+
3. Click Wrap Text in the ribbon to toggle text wrapping for the selected cells.
4750

4851
Cell formatting can be applied to or removed from a cell or range of cells by using the formatting options available in the Ribbon toolbar under the **Home** tab.
4952

@@ -121,4 +124,4 @@ The clear support can be applied using the following way:
121124

122125
The following image displays the clear options available in the Ribbon toolbar under the **Home** tab of the Blazor Spreadsheet.
123126

124-
![Clear options in the Blazor Spreadsheet](images/clear-feature.png)
127+
![Clear options in the Blazor Spreadsheet](images/clear-feature.png)

‎Document-Processing/Excel/Spreadsheet/Blazor/rows-and-columns.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
---
2+
layout: post
3+
title: Rows and columns in Blazor Spreadsheet component | Syncfusion
4+
description: Checkout and learn here all about Rows and columns in the Syncfusion Blazor Spreadsheet component and more.
5+
platform: document-processing
6+
control: Spreadsheet
7+
documentation: ug
8+
---
9+
10+
# Rows and columns in Blazor Spreadsheet component
11+
12+
Spreadsheet is a tabular format consisting of rows and columns. The intersection point of rows and columns are called as cells. The list of operations that you can perform in rows and columns are,
13+
14+
* Insert
15+
* Setting Column and Row Count
16+
17+
## Insert
18+
19+
You can insert rows or columns anywhere in a spreadsheet.
20+
21+
### Row
22+
23+
The rows can be inserted in the following ways:
24+
25+
**Using the context menu**
26+
27+
Insert rows in the desired position by right-clicking on a row header.
28+
29+
**Using `InsertRowAsync` method**
30+
31+
Using [`InsertRowAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertRowAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_RowPosition_) method, you can insert the rows once the component is loaded.
32+
33+
The following code example shows the options for inserting rows in the spreadsheet.
34+
35+
{% tabs %}
36+
{% highlight razor tabtitle="Index.razor" %}
37+
38+
@using Syncfusion.Blazor.Spreadsheet
39+
@using Syncfusion.Blazor.Buttons
40+
41+
<SfButton OnClick="InsertRowsHandler" Content="Insert Rows"></SfButton>
42+
<SfSpreadsheet @ref="@SpreadsheetInstance" DataSource="DataSourceBytes">
43+
<SpreadsheetRibbon></SpreadsheetRibbon>
44+
</SfSpreadsheet>
45+
46+
@code {
47+
public byte[] DataSourceBytes { get; set; }
48+
public SfSpreadsheet SpreadsheetInstance;
49+
50+
protected override void OnInitialized()
51+
{
52+
string filePath = "wwwroot/Sample.xlsx";
53+
DataSourceBytes = File.ReadAllBytes(filePath);
54+
}
55+
56+
public async Task InsertRowsHandler()
57+
{
58+
// Insert 2 rows above row index 0 in the active sheet
59+
await SpreadsheetInstance.InsertRowAsync(0, 2);
60+
61+
// Insert 3 rows below row index 2 in the sheet named "Sheet2"
62+
await SpreadsheetInstance.InsertRowAsync(2, 3, "Sheet2", RowPosition.Below);
63+
64+
// Insert 1 row above row index 1 in the active sheet
65+
await SpreadsheetInstance.InsertRowAsync(1, 1, null, RowPosition.Above);
66+
67+
// Insert 4 rows below row index 3 in the sheet at index 3
68+
await SpreadsheetInstance.InsertRowAsync(3, 4, 3, RowPosition.Below);
69+
}
70+
}
71+
72+
{% endhighlight %}
73+
{% endtabs %}
74+
75+
### Column
76+
77+
The columns can be inserted in the following ways:
78+
79+
**Using the context menu**
80+
81+
Insert columns in the desired position by right-clicking on a column header.
82+
83+
**Using `InsertColumnAsync` method**
84+
85+
Using [`InsertColumnAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertColumnAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_ColumnPosition_) method, you can insert the columns once the component is loaded.
86+
87+
The following code example shows the options for inserting columns in the spreadsheet.
88+
89+
{% tabs %}
90+
{% highlight razor tabtitle="Index.razor" %}
91+
92+
@using Syncfusion.Blazor.Spreadsheet
93+
@using Syncfusion.Blazor.Buttons
94+
95+
<SfButton OnClick="InsertColumnsHandler" Content="Insert Columns"></SfButton>
96+
<SfSpreadsheet @ref="@SpreadsheetInstance" DataSource="DataSourceBytes">
97+
<SpreadsheetRibbon></SpreadsheetRibbon>
98+
</SfSpreadsheet>
99+
100+
@code {
101+
public byte[] DataSourceBytes { get; set; }
102+
public SfSpreadsheet SpreadsheetInstance;
103+
104+
protected override void OnInitialized()
105+
{
106+
string filePath = "wwwroot/Sample.xlsx";
107+
DataSourceBytes = File.ReadAllBytes(filePath);
108+
}
109+
110+
public async Task InsertColumnsHandler()
111+
{
112+
// Insert 2 columns to the right of column index 2
113+
await SpreadsheetInstance.InsertColumnAsync(2, 2);
114+
115+
// Insert 3 columns to the left of column index 5
116+
await SpreadsheetInstance.InsertColumnAsync(5, 3, null, ColumnPosition.Left);
117+
118+
// Insert 1 column to the right of column B in Sheet2
119+
await SpreadsheetInstance.InsertColumnAsync(1, 1, "Sheet2", ColumnPosition.Right);
120+
121+
// Insert 4 columns to the left of column D in the sheet at index 3
122+
await SpreadsheetInstance.InsertColumnAsync(3, 4, 3, ColumnPosition.Left);
123+
}
124+
}
125+
126+
{% endhighlight %}
127+
{% endtabs %}
128+
129+
## Setting Row and Column Count
130+
131+
The Blazor Spreadsheet component enables you to define the initial number of rows and columns using the [`RowCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RowCount) and [`ColumnCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ColumnCount) properties.
132+
133+
* The default `RowCount` is **1000**.
134+
* The default `ColumnCount` is **200**.
135+
136+
**Rendering Behavior**
137+
138+
- **Without Data Source:**
139+
140+
- When no data is bound to the spreadsheet, the sheet renders empty cells up to RowCount × ColCount.
141+
142+
- **With Data Source (e.g., byte array or imported file):**
143+
144+
- If the data source has fewer rows/columns than RowCount/ColCount, the spreadsheet renders additional empty rows/columns to meet the specified counts.
145+
- If the data source has more rows/columns than RowCount/ColCount, the spreadsheet renders enough rows/columns to display all data from the source (i.e., it extends beyond the specified counts to fit the data). Your data is never truncated by these properties.
146+
147+
148+
You can set these properties as follows:
149+
150+
{% tabs %}
151+
{% highlight razor tabtitle="Index.razor" %}
152+
153+
@using Syncfusion.Blazor.Spreadsheet
154+
155+
<SfSpreadsheet DataSource="DataSourceBytes" RowCount="1200" ColumnCount="300" >
156+
<SpreadsheetRibbon></SpreadsheetRibbon>
157+
</SfSpreadsheet>
158+
159+
@code {
160+
public byte[] DataSourceBytes { get; set; }
161+
162+
protected override void OnInitialized()
163+
{
164+
string filePath = "wwwroot/Sample.xlsx";
165+
DataSourceBytes = File.ReadAllBytes(filePath);
166+
}
167+
}
168+
169+
{% endhighlight %}
170+
{% endtabs %}

0 commit comments

Comments
 (0)