Open keyboard inside Dialog Box

[LightWeight-POS]

Hi,

Is it possible to open the kioskboard inside dialog box when field gets active ?

[densen2014]

hello, can you give me a sample for inside dialog box?

[LightWeight-POS]

I don't have a sample that's why I am asking you how can I open keyboard inside dialog component rather just showing on the bottom of screen ?

[densen2014]

I need to see how you write the code to understand the problem

[LightWeight-POS]

What I have tried so far is below:

<RadzenTextArea 
     class="@ClassName"
     data-kioskboard-type="@KeyboardType.keyboard.ToString()"
     data-kioskboard-placement="@(KeyboardPlacement.bottom.ToString())"
     @bind-Value="@Model.Description" 
     @oninput="@(() => ProductUpdated(Model))"
     @onfocus="@(( => FocusChangedAsync())"
     Style="width: 100%;" />
 <OnScreenKeyboard ClassName="@ClassName" Option="@options" KeyboardKeys="KeyboardKeysType.english" />


        private async Task FocusChangedAsync()
        {
            var parameters = new Dictionary<string, object>
            {
                { "ClassName", "virtualkeyboard" }, // Customize these parameters as needed
                { "KeyboardKeys", KeyboardKeysType.english },
                { "Placement", KeyboardPlacement.bottom },
                { "Option", new KeyboardOption() }
            };

            await DialogService.OpenAsync<OnScreenKeyboard>("On-Screen Keyboard", parameters, new DialogOptions() { Width = "600px", Height = "400px" });
        }

Below is the implementation of OnScreenKeyboard

public partial class OnScreenKeyboard : IAsyncDisposable
{
    [Inject] IJSRuntime? JS { get; set; }
    private IJSObjectReference? module;
    private DotNetObjectReference<OnScreenKeyboard>? InstanceWebApi { get; set; }

    [Parameter]
    public string ClassName { get; set; } = "virtualkeyboard";


    [Parameter]
    public KeyboardKeysType? KeyboardKeys { get; set; } = KeyboardKeysType.english;

    [Parameter]
    public KeyboardType Keyboard { get; set; } = KeyboardType.all;


    [Parameter]
    public KeyboardPlacement Placement { get; set; } = KeyboardPlacement.bottom;


    [Parameter]
    public string Placeholder { get; set; } = "";

    [Parameter]
    public bool Specialcharacters { get; set; } = true;

    [Parameter]
    public KeyboardOption? Option { get; set; } = new KeyboardOption();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            if (firstRender)
            {
                module = await JS!.InvokeAsync<IJSObjectReference>("import", "./lib/kioskboard/kioskboards.js");
                InstanceWebApi = DotNetObjectReference.Create(this);
                await module.InvokeVoidAsync("addScript", "./lib/kioskboard/kioskboard-aio-2.1.0.min.js");
                Option ??= new KeyboardOption();
                if (KeyboardKeys != null) Option.KeyboardKeysType = KeyboardKeys!.Value;
                try
                {
                    await module.InvokeVoidAsync("init", ClassName, Option);
                }
                catch (Exception)
                {
                    await Task.Delay(200);
                    await module.InvokeVoidAsync("init", ClassName, Option);
                }
            }
        }
        catch (Exception e)
        {
            if (OnError != null) await OnError.Invoke(e.Message);
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }

    [Parameter]
    public Func<string, Task>? OnError { get; set; }

}

Aim is to open dialog box when field is active and have kiosk board inside dialog box.

[LightWeight-POS]

Sorry for bothering but did you get a chance to have a look ?