KeiStory

반응형

BlazorDatasheet 의 select(콤보) 텍스트 입력 막기

 
BlazorDatasheet 에는 select type 으로 콤보에 데이터를 표시할 수 있습니다.
isStrict 값으로 Validation 을 할지 결정할 수 있는데 isStrict 가 true 이지만 텍스트 입력은 가능합니다.
다만 텍스트 입력이 끝나면 Valid 한 값이 아닌 경우 알림이 뜨게되어 입력이 불가능합니다.
하지만 아예 텍스트 입력을 허용하지 않으려면 아래처럼 처리합니다.
직접 BalzorDatasheet 소스를 수정해야합니다.
SelectEditorComponent.razor 소스에서 //추가 부분 (아래 소스는 일부분입니다.)

@using BlazorDatasheet.Core.Util
@using BlazorDatasheet.Core.Interfaces
@using BlazorDatasheet.Core.Data
@using BlazorDatasheet.Core.Edit
@using BlazorDatasheet.Core.Validation
@inherits BaseEditor

<input @bind="CurrentValue"
@bind:event="oninput"
class="text-input"
readonly="@isReadonly"
style="@Style; width: @(CellWidth - 2)px; height: @(CellHeight - 2)px;"
@ref="InputRef"/>
<div class="select-list">
    @foreach (var val in _values)
    {
        <div class="select-item @(val.Equals(_currentSelected) ? "active" : "")"
        @onmouseup="() => selectItem(val)">
            @val
        </div>
    }
</div>

@code {

    private string[] _values = Array.Empty<string>();

    private IReadOnlyCell Cell;

    string? _currentSelected;

    // 추가
    bool isReadonly = false;

    public override void BeforeEdit(IReadOnlyCell cell, Sheet sheet)
    {
        Cell = cell;

        foreach (var validator in sheet.Validators.Get(cell.Row, cell.Col))
            if (validator is SourceValidator)
            {
                _values = ((SourceValidator)validator).ValidationSource.ToArray();

                // 추가
                isReadonly = validator.IsStrict;
                break;
            }
    }

위 소스를 보면 알 수 있듯이 isReadonly 값으로 input 태그의 readonly 로 설정해 입력을 막았습니다.
기존에는 아래처럼 텍스트 입력이 가능했지만 (Laptop 뒤에 TEST 입력)

위 코드를 적용하면 텍스트 입력을 막을 수 있습니다.

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band