Questions on UI for Blazor Forum

1 answer

40 views

I'm using a splitter. But, my contents can go longer than the exposed area defined by the splitter (height). Do you have a scroll viewer for blazor or a similar layout control?

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

            <SplitterPane Size="40%" Min="30%" Max="70%" Collapsible="false">

Splitter

answered on 20 May 2025

1 answer

63 views

Upload: File extensions

Is there a way to filter which file extensions are allowed to be selected? I limit to PDF or PNG but it allows me to select XML.

                   <div>
                       <hr />
                       <h4 class="gsi-padding-tb0-lr12">Upload File to Session...</h4>

                       <TelerikUpload AllowedExtensions="@( new List<string>() { ".pdf", ".png" } )"
                                      OnSelect="@OnUploadSelect"
                                      OnCancel="@OnUploadCancel"
                                      OnRemove="@OnUploadRemove">
                       </TelerikUpload>

                       <div class="demo-hint gsi-padding-tb0-lr12">
                           <small>
                               Upload <strong>PDF</strong> or <strong>PNG</strong> files with a maximum size of <strong>6MB</strong>.
                           </small>
                       </div>
                   </div>

Upload

answered on 20 May 2025

0 answers

41 views

How to control DropDownList to not auto select values as you navigate the list via keyboard

I currently have a case to where I have a DropDownList with a ValueChange(), depending on which one the user chooses, I need to throw a popup for confirmation. As the user 'scrolls' through the options with the arrow keys, this will cause that popup to be selected. Outside of this, we do not like the idea of when pressing ESC, the last highlighted value is kept.

Is there any native control to change this? We have a lame workaround but it is highly desired to have the ability to limit a selection by the ENTER key. As far as we know, this 'style' should be 508 compliant.

Ex DropDownList:
<TelerikDropDownList
Value="@cart.brand"
Id="brand_dropdown"
Data="@Organizations"
ValueField="Name"
TextField="Name"
DefaultText=" "
Width="100%"
TValue="string"
TItem="BrandViewModel"
ValueExpression="@(() => cart.brand)"
ValueChanged="@((e) => HandleSelectBrand(e))">
</TelerikDropDownList>

DropDownList

asked on 19 May 2025

2 answers

87 views

ComboBox: How to prevent Text entry

How do I prevent the user from typing text into the text field in the combobox?

                                        <TelerikComboBox @bind-Value="@SessionOptionIndex1"
                                                         Data="@SessionOption1Items"
                                                         ShowClearButton="false"
                                                         TextField="Name" ValueField="Id" />

ComboBox

answered on 16 May 2025

1 answer

49 views

Is it possible to remove successfully uploaded files from the TelerikUpload component

Hi

I have my own logic in the TelerikUpload OnSuccess Event that does some things to the uploaded files and therefore keep my own list of them. So the "File successfully uploaded" entries in the lower part of the component are useless for me.

I tried to remove them somehow in the OnSuccess Event but the only thing I found was the ClearFiles method which removes all files, even those that are still uploading. Is there a way to remove specific files from the list or an option to remove them automatically?

Upload

answered on 16 May 2025

0 answers

42 views

DropDownList: How to clear selection

The user doesn't have to select anything in my drop down. So, if they select something and change their mind and want to clear it... how do I do it?

                                        <TelerikDropDownList @bind-Value="@SessionOptionIndex1"
                                                             Data="@SessionOption1Items"
                                                             TextField="Name" ValueField="Id" />

DropDownList

asked on 15 May 2025

1 answer

36 views

Grid single selection mode is set, but certain rows when clicked will add the "k-selected" class to other rows. Has anyone else experienced this?

There is a known issue where the previously selected row will stay selected. That's not what I'm seeing. My issue is seemingly random but consistent. Clicking certain rows will always apply "K-selected" to the same extra rows, and selecting any one of the highlighted rows will also highlight the same set of rows. There doesn't seem to be any connection in the data between the rows, and the "selected items" object is correctly holding the proper selected item and no others. Has anyone else seen anything similar? Thank you!

It would be difficult to provide you with working code, but the attached video shows my issue.

Grid

answered on 15 May 2025

1 answer

95 views

Blazor Expander control

I'm trying to replicate the Expander that you have in your AspNetCore. I'm attempting to do it with a TelerikCard then the Drawer. Whatever help you can give would be appreciated.

What I'm trying to replicate:

So, I got close using the card. Starting with the Header, I need to align the Telerik button to the right. Then, when I push the button, I need it to toggle the CardBody open/closed.

            <TelerikCard>
                <CardHeader Class="gsi-border-width-0 gsi-border-color-white">
                    <TelerikStackLayout Orientation="StackLayoutOrientation.Horizontal">
                        <h5>Filter</h5>

                        <TelerikButton Id="filterChevronButton" FillMode="Clear" Class="gsi-border-width-0 gsi-border-color-white"
                                       Icon="@( FilterVisible? Telerik.SvgIcons.SvgIcon.ChevronUp : Telerik.SvgIcons.SvgIcon.ChevronDown)" />

                    </TelerikStackLayout>
                </CardHeader>
                <CardBody>
                    <TelerikStackLayout Spacing="5px">
                        <TelerikCard Width="33vh">
                            <CardBody>
                                A
                            </CardBody>
                        </TelerikCard>
                        <TelerikCard Width="33vh">
                            <CardBody>
                                B
                            </CardBody>
                        </TelerikCard>
                        <TelerikCard Width="34vh">
                            <CardBody>
                                C
                            </CardBody>
                        </TelerikCard>
                    </TelerikStackLayout>
                </CardBody>
            </TelerikCard>

Drawer, which looks interesting, but didn't have any success.

            <TelerikDrawer MiniMode="false">
                <DrawerContent>

                    <DrawerItem>
                        <TelerikCard Width="33vh">
                            <CardBody>
                                A
                            </CardBody>
                        </TelerikCard>
                    </DrawerItem>

                    <DrawerItem>
                        <TelerikCard Width="33vh">
                            <CardBody>
                                A
                            </CardBody>
                        </TelerikCard>
                    </DrawerItem>

                    <DrawerItem>
                        <TelerikCard Width="33vh">
                            <CardBody>
                                A
                            </CardBody>
                        </TelerikCard>
                    </DrawerItem>

                </DrawerContent>
            </TelerikDrawer>

Card

General Discussions

updated answer on 15 May 2025

1 answer

64 views

Conditionally set TelerikTextBox text color?

I'm trying to programmatically set the Text color of TelerikTextBox. Problem I'm running into is that the Class being defined for the TelerikTextBox is based on CSS from TailwindCSS. I was hoping I could just add color: as a parameter but that would only work if using a "Style" not "Class" and TelerikTextBox doesn't support Style.

<style>
    .safeText {
    color: black;
    }

    .warningText {
    color: red;
    }
</style>

<TelerikTextBox Id="emptyReleaseOn" Class="form-display sm:text-sm sm:leading-5 text-center @(_expireColor)" Size="12" Value="@_currentBookingMTYRelease" ReadOnly="true" Width="6rem"></TelerikTextBox>

Note: the above @(_expireColor) is not valid syntax to be used in Class attribute ... so not really sure how to go about this?

Code server-side:

private string _expireColor { get; set; } = "safeText";

if (DateTime.TryParse(_currentBookingExpiresOn, out var expireDateValue))
{
    if (DateTime.Now > expireDateValue)
    {
        _expireColor = "warningText";
    }
    
}

I found Telerik sample code here, but that's not what I'm trying to accomplish (need to retain the TailwindCSS).

Is there an easy way to accomplish this?

Rob.

TextBox

answered on 14 May 2025

1 answer

47 views

OnUpdate grid event not firing for inline edit mode

With validation enabled for the blazor grid, once all the validation errors are resolved, the OnUpdate event should get fired but it is not. I checked in incell edit mode and it does gets fired but my requirement is to use the inline edit mode. Below is the code that I am using:

        <TelerikGrid Data="@gridData"
            Pageable="true"
            Sortable="true"
            Width="2500px"
            PageSize="50"
            FilterMode="GridFilterMode.FilterMenu"
            EditMode="GridEditMode.Inline"
            OnEdit = "@OnGridEdit"
            OnCancel="@OnGridCancel"
            OnUpdate="@OnGridUpdateHandler"
         >
        <GridSettings>
            <GridValidationSettings Enabled="true" />
        </GridSettings>
        <GridColumns>
            <GridColumn Field="@nameof(Dto.CNumber)" Title="Customer No." Width="100px" Filterable="true" Sortable="false" />
            <GridColumn Field="@nameof(Dto.DistributorLastName)" Title="Distributor Last Name" Width="200px" Filterable="true" />
            <GridColumn Field="@nameof(Dto.DistributorNumber)" Title="Distributor No." Width="120px" Filterable="false" Sortable="false" />
            <GridColumn Field="@nameof(Dto.DemoDate)" Title="Demo Date" Width="120px" Filterable="true" />
            <GridColumn Field="@nameof(Dto.SerialNumber)" Title="RX Serial No." Width="120px" Filterable="false" Sortable="false" />

            <GridCommandColumn Width="100px">
                    <GridCommandButton Command="Edit">Edit</GridCommandButton>
                        <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
                    <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
            </GridCommandColumn>
        </GridColumns>
        </TelerikGrid>

Grid

answered on 14 May 2025