Questions on UI for Blazor Forum

1 answer

18 views

Can you tell me how I can define the Grid to fill the entire splitter area without trying to guess?

                <TelerikGrid Data=@Sessions
                             SelectedItems="SelectedSessions"
                             Pageable=true
                             PageSize="20"
                             Height="80%"
                             SelectionMode=GridSelectionMode.Single
                             SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Session> m) => OnSessionSelected(m))">

                    <GridColumns>
                        <GridColumn Field=@nameof(Session.TimestampDisplayName) Title="Timestamp" />
                        <GridColumn Field=@nameof(Session.TimeZoneOffset) Title="Time Zone Offset" />
                    </GridColumns>
                </TelerikGrid>

    <TelerikSplitter Orientation="SplitterOrientation.Horizontal" Height="75vh">
        <SplitterPanes>

            <SplitterPane Size="50%" Min="30%" Max="70%" Collapsible="false" Class="k-scrollable">
            </SplitterPane>

            <SplitterPane Min="30%" Max="70%" Collapsible="false" Class="k-sc            </SplitterPane>
        </SplitterPanes>
    </TelerikSplitter>

Grid

Splitter

answered on 28 May 2025

2 answers

48 views

RowNumber in ExpandoObject Dynamic Grid

Hello
I need RowNumber in <GridColumns> in Dynamic Grid which is set with ExpandoObject.
Please help.

Thank you

Grid

answered on 27 May 2025

1 answer

13 views

TileLayout nested tiles

Is it possible to have nested tiles in a TileLayout.

For example. The main page could have 2 tiles which the user could reorder or resize and within each of these tiles there would be some components that could be reordered or resized just within the inner tile.

In the image below I was able to create 2 tiles but they cannot be reordered.

I tried placing these 2 tiles inside another TelerikTileLayout but had issues when attempting to reorder or resize the inner components.

In my actual application I may end up with multiple levels of nesting and the structure is generated from a definition read in by the page.

I create an example here https://blazorrepl.telerik.com/QTapQGvU54CO5Pjw05

Regards

TileLayout

answered on 27 May 2025

1 answer

15 views

Right ListBox Move Item to Left ListBox

hi,
I have a question, why can I move from the left ListBox Control to the right ListBox Control by just selecting any item, but on the contrary, if I select any item from the right ListBox Control, I need to select any item from the left ListBox Control to move to the left? I know they use connection subscription, but is there a solution to make it possible to move from the right ListBox Control to the left ListBox Control by just selecting any item?

General Discussions

ListBox

answered on 26 May 2025

1 answer

23 views

Set button width

How do I tell the button to fill the available width? I'd like this to be as wide as the other controls and it should adapt to width changes of the page. I have this definition:

As a bonus, the only way I can get the button to align to the bottom is to put in the white label. My attempts at aligning to the bottom have failed.

                        <TelerikCard Width="25vh">
                            <CardBody>

                                <div class="form-group-short">
                                    <label class="col-form-label">Patient Status</label><br />
                                    <TelerikDropDownList @bind-Value="@IsActiveFilterIndex"
                                                         TextField="Name" ValueField="Id"
                                                         ReadOnly="@(!IsActiveFilterEnabled)"
                                                         Data="@IsActiveFilterOptions">
                                    </TelerikDropDownList>
                                </div>
                                <div class="form-group-short align-bottom">
                                    <label class="col-form-label gsi-color-white">Apply Filter</label><br />
                                    <TelerikButton OnClick="OnFilter" Class="gsi-background-color gsi-color-white">
                                        Apply Filter
                                    </TelerikButton>
                                </div>
                            </CardBody>
                        </TelerikCard>

Button

answered on 23 May 2025

1 answer

19 views

Get stream from UploadFileInfo

I can now list my files in the upload control. Now, how do I get the stream from the collection of files? I need to have the stream in order to upload to Azure.

                foreach (UploadFileInfo file in args.Files)
                {
                    var fileName = Path.GetFileName(file.Name);

                    //await using (var fileStream = new FileStream(fileName, FileMode.Create))

Upload

answered on 23 May 2025

0 answers

12 views

Event Spamming from Controls

I have a custom grid filter where I use an animation container to show/hide. When a value changes, I want to close the animation container similar to how the filter automatically closes on your control filters (treelist). So, I have a button that toggles the filter state (ExpandCollapse). Then, when a value changes in my filter (textbox in example) I call a method that should close the filter and refresh my data. I find the OnChange event is called once a value is changed (textbox) but then also when the DatePicker closes and when the DropDownList closes and when the animation container is closed.

The result is the toggle kinda goes nuts. Its open/closed/opened at times where it shouldn't. How do I get around this?

                <div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">

                    <div class="align-self-center gsi-font-kendo gsi-margin-0">
                        Patient Filters
                    </div>
                    <TelerikButton Id="filterChevronButton"
                                   FillMode="Clear"
                                   Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
                                   Icon="@( FilterVisible? Telerik.SvgIcons.SvgIcon.Filter : Telerik.SvgIcons.SvgIcon.Filter)"
                                   OnClick="@(() => ExpandCollapse())" />

                </div>

                <TelerikAnimationContainer @ref="@AnimContainer"
                                           Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
                                           Width="100%"
                                           Height="100vm">

                    <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
                        <TelerikCard Width="25vh">
                            <CardBody>

                                <div class="form-group-short">
                                    <label class="col-form-label" for="firstName">First Name</label><br />
                                    <TelerikTextBox @bind-Value="@FirstNameFilter"
                                                    Name="firstName"
                                                    Placeholder="-No Filter-"
                                                    OnChange="@(x => OnFilterChanged(nameof(FirstNameFilter), x))">
                                    </TelerikTextBox>
                                </div>

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            await GetPatients();
            ExpandCollapse(false);
        }

I tried to compare the existing value with the new value after removing the binding but, no success.

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            object existingValue = this.GetPropertyValue(propertyName);
            if (newValue != existingValue)
            {
                this.SetPropertyValue(propertyName, newValue);

                await GetPatients();
                ExpandCollapse(false);
            }
        }

Toggle

    public async void ExpandCollapse(bool? filterVisible = null)
    {
        if (filterVisible.HasValue)
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = filterVisible.Value;
        }
        else
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = !FilterVisible;
        }
    }

asked on 22 May 2025

1 answer

15 views

Drag and Drop tooltip on Datagrid with a dictionary TItem

Hi.

I've got a TelerikGrid set up to use aTItem of Dictionary<string, int> (for example). I'm having an issue with the tooltip when I perform a row drag and drop in that the value shown is "null". I've attached a stripped down example of this, and its equivalent of where the Dictionary has been replaced with a class. We can't go down that route though as the data is dynamic in structure when supplied to the grid.

Any help appreciated.

Grid

answered on 22 May 2025

0 answers

13 views

Tab strip tab (and grid column header) remove mouseover / hover effect

On both the Tab strip selected tab and the grid header, there's a mouseover / hover effect which thickens the bottom border by 1px;

Standard;

Hover;

I've been trying to remove this effect (largely since it causes a height change), but not having any luck identifying the right CSS classes to modify. I still want the selected tab to be highlighted, and if possible to remove the mouseover on unselected tabs - this gives the bottom a thin border with the same height problem.

Any help greatly received!

Grid

TabStrip

updated question on 22 May 2025

1 answer

20 views

More details on Release History?

Hi I was wondering if it's possible to find more details on exactly what is changed in each release? In general the list in Release History is very generic and does not necessarily mention what method or API, etc. changed. Competing products will display links to issues or work items included, or at least more details about what code changes were made. And the lists are comprehensive.

For instance, in v9 demos, there is a NEW badge on the Grid -> Export, though exporting has been there for awhile. Reading Release History alludes to:

Add configuration for CSV export API
Add configuration for Excel export API

but that doesn't really tell me what is changed or available now. Looking at the docs nothing seems radically new.

Details like that are critical in an enterprise environment when evaluating new features or breaking changes, or to just keep up with what's changing. And if I'm just missing this info somewhere, let me know.

General Discussions

answered on 21 May 2025