Questions on UI for Blazor Forum

1 answer

64 views

Grid with SplitButton in GridColumnTemplate

I have a grid and I want to present the user with a set of custom actions for each specific row. I am using the splitbutton control in the gridcolumn template. The grid and splitbutton renders but the splitbutton popup is not visible.

https://blazorrepl.telerik.com/mykXmBPX33zR9mDO27

<TelerikGrid Data="@data">
    <GridColumns>
        <GridColumn>
            <Template>
                <TelerikSplitButton Icon="@SvgIcon.FileExcel">
                    <SplitButtonContent />
                    <SplitButtonItems>
                        <SplitButtonItem Icon="@SvgIcon.FilePdf" />
                        <SplitButtonItem Icon="@SvgIcon.DataJson" />
                    </SplitButtonItems>
                </TelerikSplitButton>
            </Template>
        </GridColumn>
        <GridColumn Field="@nameof(Data.field)" />
    </GridColumns>
</TelerikGrid>

@code {
    class Data
    {
        public string field{ get; set; }
    }

    IEnumerable<Data> data = Enumerable.Range(0, 10).Select(x => new Data { field = x.ToString() });
}

Grid

SplitButton

answered on 29 Sep 2024

1 answer

169 views

Dynamic SplitButtonItems

The SplitButton Demo shows how to create a SplitButton with a fixed collection of SplitButtonItems, in that case for "Paste Text", "Paste as HTML", and "Paste Markdown". I need to have a dynamic collection of SplitButtonItems.

A common example of this is the undo split button found in many applications such as Visual Studio or Microsoft Word. Clicking the undo icon undoes one step of actions. Or you can click the dropdown and select a step to go back to. The list of options grows in size and changes, based on user actions.

SplitButton

answered on 15 Aug 2023

1 answer

107 views

SplitButton: Seperators ?

Is there any chance to use seperators within the menu ?

SplitButton

answered on 04 Aug 2023

0 answers

182 views

Blazor Split Button

Is there any way to get rid of the Split Button Content? I'd just like to show the arrow and the button options below when clicked. I need to be able to progromattically hide all of the buttons as needed. This would also include the button on display, if needed.

Another option that would work for us is to have the content but have it work similar to the arrow button where clicking it would toggle the dropdown. This would allow me to put a menu icon in that area.

SplitButton

updated question on 21 Feb 2023

1 answer

166 views

SplitButton Causes Errors

We've used the SplitButton on a variety of windows, and after upgrading to v4.0 we've noticed that the pages containing a SplitButton do not load, they simply die off into never-never land. Somewhere we've seen OutofMemory but we are not positive it's happening on this call. We have a few different use cases for our SplitButtons - Save, Save & Close, and Delete. The other is to choose your printing or email type.

Do we have this formatting incorrectly? They work in v3.7 just fine.

And, I noticed the documentation is for v3.7, not v4.0 -- https://demos.telerik.com/blazor-ui/splitbutton/overview

<TelerikSplitButton Icon="@SvgIcon.Save" OnClick="@(() => HandleValidSubmit(false))">
                                        <SplitButtonContent>Save</SplitButtonContent>
                                        <SplitButtonItems>
                                            <SplitButtonItem Class="mr-2 save" OnClick="@( () => HandleValidSubmit(false))" Icon="@SvgIcon.Save">Save</SplitButtonItem>
                                            <SplitButtonItem Class="mr-2 save" OnClick="@( () => HandleValidSubmit(true))" Icon="@SvgIcon.Save">Save & Close</SplitButtonItem>
                                            <SplitButtonItem Class="mr-2 delete" OnClick="@ButtonDeleteOnClick" Icon="@SvgIcon.Trash" Enabled="@IsDeletionAllowed">Delete</SplitButtonItem>
                                        </SplitButtonItems>
                                    </TelerikSplitButton>

                                <TelerikSplitButton Class="print-button" OnClick="@OnPreviewClickHandler" Icon="@SvgIcon.FilePresentation">
                                    <SplitButtonContent>Print To</SplitButtonContent>
                                        <SplitButtonItems>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnPreviewClickHandler" Icon="@SvgIcon.FilePresentation">Preview</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnPdfClickHandler" Icon="@SvgIcon.FilePdf">PDF</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnExcelClickHandler" Icon="@SvgIcon.FileExcel">Excel</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnWordClickHandler" Icon="@SvgIcon.FileWord">Word</SplitButtonItem>                                            
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnClick_BtnEmail" Icon="@SvgIcon.EnvelopLink">Send Email</SplitButtonItem>
                                            <SplitButtonItem Class="print-button"
                                                        OnClick="@OnClick_BtnText" Icon="@SvgIcon.Rss">Send Text</SplitButtonItem>
                                        </SplitButtonItems>
                                </TelerikSplitButton>

SplitButton

answered on 26 Jan 2023

0 answers

120 views

Customize Split Button Apperance

Hello!
CSS geniuses please help...
The TelerikSplitButton and TelerikButtonGroup components are just made for each other to put together convenient interfaces, but you need a little help with setting them up.
For a perfect display, I need to remove the border, a big right margin and set a transparent background. But I can't get to the classes in dev tools - the container hides as soon as you try to read the DOM. Can you please tell me which class properties should be overridden?