Home > Mobile >  Is there a way to create an onClick event to a button within a sync fusion data grid?
Is there a way to create an onClick event to a button within a sync fusion data grid?

Time:02-02

I have the following code block in a blazor winform and i'm trying to add a button with an on click event to the id field to edit that row's data in a new form but after scouring documentation I cannot find a way to do this that isn't just changing the fields in the table directly.

<SfGrid DataSource="@Customers" RowHeight="20" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
        <GridPageSettings PageSize="50"></GridPageSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Customer.Id) HeaderText="Id" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Customer.Name) HeaderText="Name" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Customer.Email) HeaderText="Email" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Customer.Password) HeaderText="Password" Width="120"</GridColumn>

        </GridColumns>
    </SfGrid>

I have only tried to accomplish this by creating an onclick event as you would in a traditional html table but I don't believe this can be accomplished within a data grid.

CodePudding user response:

Using Template you can mainly fully customize the content of a GridColumn:

...
<GridColumn HeaderText="Actions" TextAlign="TextAlign.Center" Width="120">
  <Template>
    @{
      Customer customer = (context as Customer);
      
      <button @onclick="() => OpenEditCustomerForm(customer)">Edit</button>     
    }
  </Template>
</GridColumn>
...

Documentation

CodePudding user response:

As per your needs, I suggest using the grid column's column template feature, which allows you to customize your needs. Please refer to the UG documentation mentioned below for your reference.

Documentation: https://blazor.syncfusion.com/documentation/datagrid/column-template

  • Related