Grid Column Commmand with and custom Icon

[Helder]

Hi All,

 I'm using Blazor datagrid, with CommandColumns, but I can't set a smaller Column width and add a custom icon in IconCss.

Now I have this:

 

and I'd like to have something like this:

Is it possible to have  CommandColumns with custom width and Icon?

Thank you

[Rahul Narayanasamy]

Hi Helder, 

Greetings from Syncfusion. 

We suspect that you want set smaller width for command column and add a custom icon in command column button. You can achieve your requirement by using Width property of GridColumn(for setting smaller width) and IconCSS(for using custom icon) property of command column. Find the below code snippets for your reference. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315" Width="900"> 

    <GridEvents CommandClicked="OnClicked" TValue="Order"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        . ..  

        <GridColumn HeaderText="Imprimir" Width="80"> 

            <GridCommandColumns> 

                <GridCommandColumn Title="Imprimir Cupón de Pago" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-print", CssClass="e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Title="Solicitar actualizar cuota a pagar" Type="CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-update", CssClass="e-flat"})"></GridCommandColumn> 

            </GridCommandColumns> 

        </GridColumn> 

        . ..  

    </GridColumns> 

</SfGrid> 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/command-column-editing 

if it does not meet your requirement, then could you please share more details about your requirement. 

Please let us know if you have any concerns. 

Regards, 

Rahul  

[Helder]

Hi Rahul,

That did not solve my issue, with your code the result is:

if I decrease more the width, the second column is not showned.

Here is my Grid code.

 <SfGrid @ref="DefaultGrid" DataSource="@filteredMarcas" AllowPaging="true" AllowSorting="true">

        <GridEvents RowSelected="RowSelectHandler" RowDeselected="RowDeSelectHandler" TValue="Marcas" CommandClicked="OnCommandClicked" OnActionBegin="OnActionBegin"></GridEvents>

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">

            <HeaderTemplate>

                @{

                    var text = GetHeader((context as Marcas));

                    <span style="color:white; font-size:16px; font-weight:normal;">@text</span>

                }

            </HeaderTemplate>

            <FooterTemplate>

                <SfButton OnClick="@Save" IsPrimary="true" IconCss="e-icons e-save">@ButtonText</SfButton>

                <SfButton OnClick="@Cancel" IconCss="e-icons e-close">Cancelar</SfButton>

            </FooterTemplate>

        </GridEditSettings>

        <GridPageSettings PageSizes="true"></GridPageSettings>

        <GridColumns>

            <GridColumn HeaderText="Imprimir" Width="80">

                <GridCommandColumns>

                    <GridCommandColumn Title="Imprimir Cupón de Pago" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-print" })"></GridCommandColumn>

                    <GridCommandColumn Title="Solicitar actualizar cuota a pagar" Type="CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-update"})"></GridCommandColumn>

                </GridCommandColumns>

            </GridColumn>

            <GridColumn Field=@nameof(Marcas.Id) HeaderText="Código" TextAlign="TextAlign.Left" IsPrimaryKey="true" Visible="false"></GridColumn>

            <GridColumn Field=@nameof(Marcas.Marca) HeaderText="Marca" TextAlign="TextAlign.Left"></GridColumn>

        </GridColumns>

    </SfGrid>

I need to have, two columns with smaller widths.

Regards,

Helder

[Rahul Narayanasamy]

Hi Helder, 

Thanks for the update. 

We suspect that you want to show command column button with small size. You can achieve your requirement by using below CSS. Find the below code snippets and sample for your sample. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315" Width="600"> 

    <GridEvents CommandClicked="OnClicked" TValue="Order"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Left" Width="90"></GridColumn> 

        <GridColumn HeaderText="Imprimir" Width="80"> 

            <GridCommandColumns> 

                <GridCommandColumn Title="Imprimir Cupón de Pago" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-print", CssClass="e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Title="Solicitar actualizar cuota a pagar" Type="CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-update", CssClass="e-flat"})"></GridCommandColumn> 

            </GridCommandColumns> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Left" Width="150"></GridColumn> 

 

    </GridColumns> 

</SfGrid> 

 

<style> 

    .e-btn.e-icon-btn, .e-css.e-btn.e-icon-btn { 

        padding: 4px 0px; 

    } 

    .e-grid .e-unboundcelldiv > button { 

        margin: 0 0px; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173630/ze/DataGrid-52475448  

Please let us know if you have any concerns. 

Regards, 

Rahul