Customize the ButtonGroup Component

[Stefan Heimbach]

Hi,

I hope it's ok to ask this kind of question.

My goal is to get some kind of numeric layout like a Numpad.

If I use the following code I get the wanted result.. (First Attachment)

    @foreach (var item in ActionCodes)

    {

        <SfButton  ID="my"  CssClass="e-custom" Content="@item.Actioncode.ToString()"></SfButton>

    }

When I try this with the ButtonGroup Component like..

<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

    @foreach (var item in ActionCodes)

    {

        <ButtonGroupButton CssClass="e-custom" Content="@item.Actioncode.ToString()"></ButtonGroupButton>

        

    }

CSS:

.e-custom {

        border-radius: 0;

        height: 100px;

        width: 100px;

    }

.. the component stays in its default style.

Is there any chance to achieve the same layout?

Thanks in advance!

Attachment: ButtonGroupRequest_96c85a18.zip

[Aravinthan Seetharaman]

Hi Stefan, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your reported requirement, and we can achieve your requirement by using HTML table tag and custom CSS as like given below: 

 

@using Syncfusion.Blazor.SplitButtons 

 

<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single"> 

    <table style="width:100%"> 

        <tr> 

            <td><ButtonGroupButton>1</ButtonGroupButton></td> 

            <td><ButtonGroupButton>2</ButtonGroupButton></td> 

            <td><ButtonGroupButton>3</ButtonGroupButton></td> 

        </tr> 

        <tr> 

            <td><ButtonGroupButton>4</ButtonGroupButton></td> 

            <td><ButtonGroupButton>5</ButtonGroupButton></td> 

            <td><ButtonGroupButton>6</ButtonGroupButton></td> 

        </tr> 

        <tr> 

            <td><ButtonGroupButton>7</ButtonGroupButton></td> 

            <td><ButtonGroupButton>8</ButtonGroupButton></td> 

            <td><ButtonGroupButton>9</ButtonGroupButton></td> 

        </tr> 

    </table> 

</SfButtonGroup> 

 

    <style> 

        .e-btn { 

            border-radius: 0; 

            height: 100px; 

            width: 100px; 

            padding-top: 37px; 

        } 

    </style> 

 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161368/ze/ButtonGroupAsTable1531802319 

 

Please let us know, whether the given details are meet your requirement. 

  

  

Regards, 

Aravinthan S