EventConsole Could not find 'scrollToBottom'

Mark_Chenpingling · June 1, 2021, 5:27am

Use EventConsole.razor, got error

 Error: Microsoft.JSInterop.JSException: Could not find 'scrollToBottom' ('scrollToBottom' was undefined).

What is the proper way to use EventConsole?

enchev · June 1, 2021, 5:36am

This is a custom component used in our demos and the entire code is available here:

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/EventConsole.razor

@inject IJSRuntime JSRuntime
<div class="console" @attributes=@Attributes>
    <div class="console-header">
        <div class="console-title">Console Log</div>
        <button class="console-clear" @onclick=@OnClearClick>Clear</button>
    </div>
    <div class="console-content" @ref=@console>
    @foreach(var message in messages)
    {
        <div class="console-message">
            <span class="console-message-time">@message.Date.ToString("HH:mm:ss.ff")</span>
            <span class="console-message-text">@message.Text</span>
        </div>
    }
    </div>
</div>

@code {
    class Message
    {

This file has been truncated. show original

scrollToBottom is executed for console ElementReference

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/EventConsole.razor#L35


ElementReference console;

[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object> Attributes { get; set; }
IList<Message> messages = new List<Message>();

protected override async Task OnAfterRenderAsync(bool firstRender) 
{
    if (!firstRender)
    {
        await JSRuntime.InvokeVoidAsync("scrollToBottom", console);
    }
}

void OnClearClick()
{
    Clear();
}

public void Clear()
{

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/EventConsole.razor#L7


@inject IJSRuntime JSRuntime
<div class="console" @attributes=@Attributes>
    <div class="console-header">
        <div class="console-title">Console Log</div>
        <button class="console-clear" @onclick=@OnClearClick>Clear</button>
    </div>
    <div class="console-content" @ref=@console>
    @foreach(var message in messages)
    {
        <div class="console-message">
            <span class="console-message-time">@message.Date.ToString("HH:mm:ss.ff")</span>
            <span class="console-message-text">@message.Text</span>
        </div>
    }
    </div>
</div>

mtlimon · August 19, 2021, 7:47pm

I had to make a js file with the scrollToBottom function and include it on the wwwroot/index.html.

custom.js file

function scrollToBottom() {
    window.scrollTo(0, document.body.scrollHeight);
}

index.html

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="js/custom.js"></script>