Skip to content

Commit 5078352

Browse files
Babusf3928Babusf3928
committed
891146: Added sample for the Read-only feature in Spreadsheet.
1 parent 4163979 commit 5078352

File tree

4 files changed

+155
-0
lines changed

4 files changed

+155
-0
lines changed

‎ej2-asp-core-mvc/code-snippet/spreadsheet/read-only/razor

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@Html.EJS().Button("fullRow").Content("Make row 2 Read Only").Render();
2+
@Html.EJS().Button("fullCol").Content("Make Column A Read Only").Render();
3+
@Html.EJS().Button("singleCell").Content("Make E5 cell Read Only").Render();
4+
@Html.EJS().Button("removeAll").Content("Remove Read Only").Render();
5+
@Html.EJS().Spreadsheet("spreadsheet").Sheets(sheet => {
6+
sheet.Name("Price Details").Ranges(ranges => {
7+
ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).StartCell("A1").Add();
8+
}).Rows(row =>
9+
{
10+
row.Index(3).IsReadOnly(true).Add();
11+
row.Index(4).Cells(cell =>
12+
{
13+
cell.Index(5).IsReadOnly(true).Add();
14+
}).Add();
15+
}).Columns(column => {
16+
column.Width(130).Add();
17+
column.Width(100).Add();
18+
column.Width(100).IsReadOnly(true).Add();
19+
}).Add();
20+
}).Render()
21+
22+
<script>
23+
24+
// To make row 2 readonly.
25+
document.getElementById("fullRow").addEventListener('click', function () {
26+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
27+
spreadsheetObj.setRangeReadOnly(true, '2:2', spreadsheetObj.activeSheetIndex);
28+
});
29+
// To make Column A readonly.
30+
document.getElementById("fullCol").addEventListener('click', function () {
31+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
32+
spreadsheetObj.setRangeReadOnly(true, 'A:A', spreadsheetObj.activeSheetIndex);
33+
});
34+
// To make E5 cell readonly.
35+
document.getElementById("singleCell").addEventListener('click', function () {
36+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
37+
spreadsheetObj.setRangeReadOnly(true, 'E5:E5', spreadsheetObj.activeSheetIndex);
38+
});
39+
// To remove readonly.
40+
document.getElementById("removeAll").addEventListener('click', function () {
41+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
42+
spreadsheetObj.setRangeReadOnly(false, '2:2', spreadsheetObj.activeSheetIndex);
43+
spreadsheetObj.setRangeReadOnly(false, 'A:A', spreadsheetObj.activeSheetIndex);
44+
spreadsheetObj.setRangeReadOnly(false, 'E5:E5', spreadsheetObj.activeSheetIndex);
45+
});
46+
47+
</script>

‎ej2-asp-core-mvc/code-snippet/spreadsheet/read-only/readOnlyController.cs

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
public IActionResult Open(IFormCollection openRequest)
2+
{
3+
OpenRequest open = new OpenRequest();
4+
open.File = openRequest.Files[0];
5+
return Content(Workbook.Open(open));
6+
}
7+
8+
public void Save(SaveSettings saveSettings)
9+
{
10+
Workbook.Save(saveSettings);
11+
}
12+
13+
public IActionResult Index()
14+
{
15+
List<object> defaultData = new List<object>()
16+
{
17+
new { Item Name= "Casual Shoes", Date= "02/14/2014", Time= "11=34=32 AM", Quantity= "10", Price= "20", Amount= "200", Discount= "1", Profit= "10" },
18+
new { Item Name= "Sports Shoes", Date= "06/11/2014", Time= "05=56=32 AM", Quantity= "20", Price= "30", Amount= "600", Discount= "5", Profit= "50" },
19+
new { Item Name= "Formal Shoes", Date= "07/27/2014", Time= "03=32=44 AM", Quantity= "20", Price= "15", Amount= "300", Discount= "7", Profit= "27" },
20+
new { Item Name= "Sandals & Floaters", Date= "11/21/2014", Time= "06=23=54 AM", Quantity= "15", Price= "20", Amount= "300", Discount= "11", Profit= "67" },
21+
new { Item Name= "Flip- Flops & Slippers", Date= "06/23/2014", Time= "12=43=59 AM", Quantity= "30", Price= "10", Amount= "300", Discount= "10", Profit= "70" },
22+
new { Item Name= "Sneakers", Date= "07/22/2014", Time= "10=55=53 AM", Quantity= "40", Price= "20", Amount= "800", Discount= "13", Profit= "66" },
23+
new { Item Name= "Running Shoes", Date= "02/04/2014", Time= "03=44=34 AM", Quantity= "20", Price= "10", Amount= "200", Discount= "3", Profit= "14" },
24+
new { Item Name= "Loafers", Date= "11/30/2014", Time= "03=12=52 AM", Quantity= "31", Price= "10", Amount= "310", Discount= "6", Profit= "29" },
25+
new { Item Name= "Cricket Shoes", Date= "07/09/2014", Time= "11=32=14 AM", Quantity= "41", Price= "30", Amount= "1210", Discount= "12", Profit= "166" },
26+
new { Item Name= "T-Shirts", Date= "10/31/2014", Time= "12=01=44 AM", Quantity= "50", Price= "10", Amount= "500", Discount= "9", Profit= "55" }
27+
};
28+
ViewBag.DefaultData = defaultData;
29+
return View();
30+
31+
}

‎ej2-asp-core-mvc/code-snippet/spreadsheet/read-only/tagHelper

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<ejs-button id="fullRow" content="Make row 2 Read Only"></ejs-button>
2+
<ejs-button id="fullCol" content="Make Column A Read Only"></ejs-button>
3+
<ejs-button id="singleCell" content="Make E5 cell Read Only"></ejs-button>
4+
<ejs-button id="removeAll" content="Remove Read Only"></ejs-button>
5+
<ejs-spreadsheet id="spreadsheet" openUrl="Home/Open">
6+
<e-spreadsheet-sheets>
7+
<e-spreadsheet-sheet name="Price Details">
8+
<e-spreadsheet-ranges>
9+
<e-spreadsheet-range dataSource="ViewBag.DefaultData" startCell="A1"></e-spreadsheet-range>
10+
</e-spreadsheet-ranges>
11+
<e-spreadsheet-rows>
12+
<e-spreadsheet-row index="3" isReadOnly="true"></e-spreadsheet-row>
13+
<e-spreadsheet-row index="4">
14+
<e-spreadsheet-cells>
15+
<e-spreadsheet-cell index="5" isReadOnly="true"></e-spreadsheet-cell>
16+
</e-spreadsheet-cells>
17+
</e-spreadsheet-row>
18+
</e-spreadsheet-rows>
19+
<e-spreadsheet-columns>
20+
<e-spreadsheet-column width="130"></e-spreadsheet-column>
21+
<e-spreadsheet-column width="100"></e-spreadsheet-column>
22+
<e-spreadsheet-column width="100" isReadOnly="true"></e-spreadsheet-column>
23+
</e-spreadsheet-columns>
24+
</e-spreadsheet-sheet>
25+
</e-spreadsheet-sheets>
26+
</ejs-spreadsheet>
27+
28+
<script>
29+
30+
// To make row 2 readonly.
31+
document.getElementById("fullRow").addEventListener('click', function () {
32+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
33+
spreadsheetObj.setRangeReadOnly(true, '2:2', spreadsheetObj.activeSheetIndex);
34+
});
35+
// To make Column A readonly.
36+
document.getElementById("fullCol").addEventListener('click', function () {
37+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
38+
spreadsheetObj.setRangeReadOnly(true, 'A:A', spreadsheetObj.activeSheetIndex);
39+
});
40+
// To make E5 cell readonly.
41+
document.getElementById("singleCell").addEventListener('click', function () {
42+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
43+
spreadsheetObj.setRangeReadOnly(true, 'E5:E5', spreadsheetObj.activeSheetIndex);
44+
});
45+
// To remove readonly.
46+
document.getElementById("removeAll").addEventListener('click', function () {
47+
var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
48+
spreadsheetObj.setRangeReadOnly(false, '2:2', spreadsheetObj.activeSheetIndex);
49+
spreadsheetObj.setRangeReadOnly(false, 'A:A', spreadsheetObj.activeSheetIndex);
50+
spreadsheetObj.setRangeReadOnly(false, 'E5:E5', spreadsheetObj.activeSheetIndex);
51+
});
52+
</script>

‎ej2-asp-core-mvc/spreadsheet/protect-sheet.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,31 @@ spreadsheet.setRangeReadOnly(true, 'A:A', 0)
140140

141141
You can make the cells read-only in the cell data binding by setting the `isReadOnly` property to **true** for the respective rows, columns, and cells.
142142

143+
The following example demonstrates how to make rows, columns, and cells read-only without protecting the sheet:
144+
145+
{% if page.publishingplatform == "aspnet-core" %}
146+
147+
{% tabs %}
148+
{% highlight cshtml tabtitle="CSHTML" %}
149+
{% include code-snippet/spreadsheet/read-only/tagHelper %}
150+
{% endhighlight %}
151+
{% highlight c# tabtitle="ReadOnlyController.cs" %}
152+
{% include code-snippet/spreadsheet/read-only/readOnlyController.cs %}
153+
{% endhighlight %}
154+
{% endtabs %}
155+
156+
{% elsif page.publishingplatform == "aspnet-mvc" %}
157+
158+
{% tabs %}
159+
{% highlight razor tabtitle="CSHTML" %}
160+
{% include code-snippet/spreadsheet/read-only/razor %}
161+
{% endhighlight %}
162+
{% highlight c# tabtitle="ReadOnlyController.cs" %}
163+
{% include code-snippet/spreadsheet/read-only/readOnlyController.cs %}
164+
{% endhighlight %}
165+
{% endtabs %}
166+
{% endif %}
167+
143168
## Protect Workbook
144169

145170
Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet.

0 commit comments

Comments
 (0)