Blazor usage

[xyzzy]

Hi,
There’s not much documentation on using the ScrollBar in Blazor – this is all I could find:
<pre class=”prettyprint prettyprinted”><span class=”tag”><ScrollBar</span> <span class=”atn”>Value</span><span class=”pun”>=</span><span class=”atv”>”50″</span><span class=”tag”>></ScrollBar></span>
<div>
<div>
<div>
<div><span class=”pln”>@code {</span>
<div>
<div>
<div>
<div><span class=”pln”>}</span></div>
</div>
</div>
<div></div>
<div>I need vertical and horizontal scroll bars around a div that scrolls the contents of the div.  How do I achieve this (code below)?</div>
</div>
<div></div>
</div>
<div></div>
<div><ScrollBar Orientation=”Horizontal” Id=”horizontal” Style=”width:100%; position:inherit; bottom:0px;” OnChange=@Horizontal_Change></ScrollBar>
<ScrollBar Orientation=”Vertical” Id=”vertical” Style=”height:100%; position:inherit; right:0px;” OnChange=@Vertical_Change></ScrollBar>
<div id=”scrollableContainer”>
<BECanvas Width=@CanvasWidth Height=@CanvasHeight @ref=”CanvasRef”></BECanvas>
</div></div>
</div>
</div>
</div>
<div></div>
<div>
<div>
<div>
<div>The scroll bars are there, but moving the scroll bar has no effect.</div>
<div></div>
<div>How do I pick up the scroll offset in the event handlers and apply it to the div?  The following throws an exception:</div>
<div></div>
<div>void Horizontal_Change(Event eventObj)
{
string offset = eventObj[“Detail”].Value.ToString();
}</div>
</div>
<div></div>
<div>Finally, could you add a method to Hide a toolbar instead of just Disabled?</div>
<div></div>
<div>Thanks</div>
</div>
</div>

[xyzzy]

Hi,
Let’s try that again…
There’s not much documentation on using the ScrollBar in Blazor.
I need vertical and horizontal scroll bars around a div that scrolls the contents of the div.  How do I achieve this (code below)?</div>
<ScrollBar Orientation=”Horizontal” Id=”horizontal” Style=”width:100%; position:inherit; bottom:0px;” OnChange=@Horizontal_Change></ScrollBar>
<ScrollBar Orientation=”Vertical” Id=”vertical” Style=”height:100%; position:inherit; right:0px;” OnChange=@Vertical_Change></ScrollBar>
<div id=”scrollableContainer”>
<BECanvas Width=@CanvasWidth Height=@CanvasHeight @ref=”CanvasRef”></BECanvas>
</div>
The scroll bars are there, but moving the scroll bar has no effect.
How do I pick up the scroll offset in the event handlers and apply it to the div?  The following throws an exception:
void Horizontal_Change(Event eventObj)
{
string offset = eventObj[“Detail”].Value.ToString();
}
Finally, could you add a method to Hide a toolbar instead of just Disabled?
Thanks

[admin]

Hi xyzzy,
The scrollbars are components which work just as sliders. They fire events when the scroll thumb is moved or the scroll arrow is clicked.
To apply a scroll position to HTML Elements, you can refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Example with Scrollbar that changes DIV tag using Smart.Blazor 9.4.15
Here is a sample built with Smart.Blazor 9.4.15

@page "/"
<Example Name="ScrollBar">
	<ScrollBar @ref="scrollbar" OnChange="ChangeHandler"></ScrollBar>
    <div style="@scrollStyle">
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
    </div>
</Example>
@code {
    ScrollBar scrollbar;
    string scrollStyle = "overflow: auto; width: 100px; height:100px;";
    private void ChangeHandler(Event args) {
        ScrollBarChangeEventDetail detail = args["Detail"] as ScrollBarChangeEventDetail;
        scrollStyle = "overflow: auto; width: " + detail.Value + "px; height: " + detail.Value + "px;";
    
        Console.WriteLine(detail.OldValue + "/" + detail.Value);
    }
}

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts