Questions on UI for Blazor Forum

I am using TelerikTreeList with custom filter menu. In the filter menu template I am using TelerikRadioGroup with Vertical layout but it is always display as Horizontal. I try to add css to a div outside with display:inline but it still does not work. It is only display as Vertical when I inspect element and then remove class k-filter-menu.

The problem is I have many items in the radioGroup so display Horizontal does not look good. Is there any workaround solution for this?

The code is look like this (I already removed some other columns)

    <TelerikTreeList Data="@Tasks"
                     IdField="Id"
                     Class="taskTreeView"
                     ParentIdField="ParentId"
                     Resizable="true"
                     EditMode="TreeListEditMode.Inline"
                     FilterMode="@TreeListFilterMode.FilterMenu"
                     OnRowRender="@OnRowRenderHandler">
        <TreeListToolBar>
            <TreeListCommandButton Command="Add" Icon="add">New Task</TreeListCommandButton>
        </TreeListToolBar>

        <TreeListColumns>
            
            <TreeListColumn Field=@nameof(TaskItem.DueDate) Title="Due Date" Width="100px" FieldType="@typeof(string)">
                <Template>
                    @{
                        var item = context as TaskItem;
                        <div>
                            @(item.DueDate.ToString("MMM d"))
                        </div>
                    }
                </Template>

                <FilterMenuTemplate>
                    @{
                        HireDateFilterMenuTemplateContext = context;
                        ExtendHireDateFilterDescriptor();
                    }

                    <div class="filter-radio">
                        <TelerikRadioGroup Data="@DateOptions"
                                           Value="@SelectedDueDateRadioSelector"
                                           ValueChanged="@((int value) =>
                                                     OnChangeHandler(value) )"
                                           Layout="RadioGroupLayout.Vertical"
                                           ValueField="@nameof(RadioOptionsModel.IdField)"
                                           TextField="@nameof(RadioOptionsModel.DisplayField)">
                        </TelerikRadioGroup>
                    </div>
                </FilterMenuTemplate>
            </TreeListColumn>
    </TelerikTreeList>

The UI looks like this

RadioGroup

TreeList

updated question on 23 Feb 2022

1 answer

305 views

How do I style RadioGroup to look like buttons?

I would like the behavior of the RadioGroup, but have the label and input pairs styled like toggle buttons like https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups

RadioGroup

answered on 21 Dec 2021

1 answer

936 views

Bind to object rather than property

My question specifically relates to the use of Radio Group, but could apply to other controls as well. Where the documentation talks about value binding vs data binding, this is in relation to the source data (i.e. the collection of options a user can choose from), and not the selected value. Taking the following example:

<TelerikRadioGroup @bind-Value=@selectedValue Data=@sourceList TextField="ATextProperty" ValueField="AnIntProperty"></TelerikRadioGroup>

In this case in my code I can have my selectedValue be an int (to match the value field). But lets say, following the example from the documentation, I want to bind the selected object, not a property of the object, like this:

<TelerikRadioGroup @bind-Value=@selectedValue Data=@sourceList TextField="GenderText" TValue="GenderModel"></TelerikRadioGroup>

Is there a way to do something like this? I haven't been able to get it work. I have tried using ValueChanged as well, this way:

<TelerikRadioGroup @selectedValue Data=@sourceList TextField="ATextProperty" ValueChanged="@((v) => OnValueChanged(v))"></TelerikRadioGroup>

And this way:

<TelerikRadioGroup @selectedValue Data=@sourceList TextField="ATextProperty" ValueChanged="@((GenderModel v) => OnValueChanged(v))"></TelerikRadioGroup>

But the value passed in to OnValueChanged is always null.

RadioGroup

answered on 05 Aug 2021

1 answer

454 views

Radio button not selected until blur

When I select an option in a radio group, the selection is focused (I can see the styled highlighting) but not selected. When the radio group is blurred (loses focus), the selected item now appears selected.

Figure: Item selected and programmatic selection successful, but radio button is not checked

Figure: Once I click out of the radio group, the selected button is checked

RadioGroup

answered on 05 Aug 2021

1 answer

315 views

Binding a TelerikRadioGroup to an enum

Hello,

I tried to implement a TelerikRadioGroup bound to an enum by following Marin's example code posted here, but I'm doing something wrong. I have attached my Razor component as a TXT file.

The result when I run the code is this:

Thanks again for your support.

Francis

RadioGroup

answered on 29 Jul 2021

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Docs & Resources

Productivity and Design Tools