Skip to content

Instantly share code, notes, and snippets.

@harrison314

harrison314/ExelSheet.razor Secret

Last active Jun 2, 2020
Embed
What would you like to do?
Online "Excel" example Blazor Component
@inject IJSRuntime JsRuntime
<table class="exelSheet" @ref="tableRef">
<tr>
<td></td>
@for (int j = 1; j < this.Rows; j++)
{
<td class="metacell">@(j)</td>
}
</tr>
@for (int i = 0; i < this.Cols; i++)
{
<tr @key="@i">
<td class="metacell">@i</td>
@for (int j = 1; j < this.Rows; j++)
{
var tmpKey = (i, j);
this.values.TryGetValue(tmpKey, out string value);
@if (this.selected.HasValue && this.selected.Value == tmpKey)
{
<td @key="@tmpKey">
<div class="cell">
<input type="text"
class="celled"
autofocus="autofocus"
@onchange="ev=> this.values[tmpKey] = ev.Value?.ToString()"
value="@value" />
</div>
</td>
}
else
{
<td @key="@tmpKey" @onclick="()=> this.ChangeSetelction(tmpKey)">
<div class="cell">
@value
</div>
</td>
}
}
</tr>
}
</table>
@code {
[Parameter]
public int Cols
{
get;
set;
}
[Parameter]
public int Rows
{
get;
set;
}
private Dictionary<(int, int), string> values = new Dictionary<(int, int), string>();
private (int, int)? selected = null;
private ElementReference tableRef;
private void ChangeSetelction((int, int) tmpKey)
{
if (this.selected != tmpKey)
{
this.selected = tmpKey;
_ = this.JsRuntime.InvokeVoidAsync("Excel_focus", this.tableRef);
}
}
}
(function () {
window['Excel_focus'] = function (ref) {
if (ref) {
window.setTimeout(function () {
var list = ref.getElementsByTagName('input');
if (list && list.length > 0) {
list[0].focus();
}
}, 120);
}
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment