Using button in Sfgrid

[Martin]

Hi, I have created  a sfgrid that contains a summarised 7 key fileds of an entry in the database. I have added an sfbutton to the first column and would like the user to be able to click the button and it load the full database entry onto a new page passing the value from column 1 (ID of entry) as a parameter to load the correct information. I cannot find how to reference the ID from the sfgrid as the button click event is fired before the row selection is made.

    <SfGrid DataSource="@tickets_resolved" AllowPaging="true" @ref="@Grid_Resolved">

        <GridEvents OnRecordClick="RecordClickHandler" RowSelecting="RowSelectingHandler" RowSelected="RowSelectHandler" TValue="TicketDetails"></GridEvents>

        <GridPageSettings PageSize="6"></GridPageSettings>

        <GridColumns>

            <GridColumn Width="50">

                <Template>

                    <SfButton @ref="EditBtnResolved" @onclick="onToggleClick_Resolved" IsToggle="true" IsPrimary="true">Edit</SfButton>

                </Template>

            </GridColumn>

            <GridColumn Field=@nameof(TicketDetails.RequestID) HeaderText="Request ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="65"></GridColumn>

            <GridColumn Field=@nameof(TicketDetails.UserName) HeaderText="User Name" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="130"></GridColumn>

            <GridColumn Field=@nameof(TicketDetails.RequestType) HeaderText="Type" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="150"></GridColumn>

            <GridColumn Field=@nameof(TicketDetails.RequestPriority) HeaderText="Priority" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="120"></GridColumn>

            <GridColumn Field=@nameof(TicketDetails.Title) HeaderText="Title" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" ClipMode="ClipMode.EllipsisWithTooltip" Width="120"></GridColumn>

            <GridColumn Field=@nameof(TicketDetails.iStatus) HeaderText="Status" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="120"></GridColumn>

            <GridColumn Field=@nameof(TicketDetails.DateLogged) HeaderText="Logged" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="120"></GridColumn>

        </GridColumns>

    </SfGrid>

@code {

    SfGrid<TicketDetails> Grid_Resolved;

    SfButton EditBtnResolved;

    private void onToggleClick_Resolved(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)

    {

        //What needs to go here???

    }

}

[Vignesh Natarajan]

Hi Martin,  

 

Thanks for contacting Syncfusion support.  

 

Query: “ I cannot find how to reference the ID from the sfgrid as the button click event is fired before the row selection is made.” 

 

We have analyzed your query and we understand that you want to pass the record detail as an argument to button click event. We suggest you to achieve your requirement by accessing the Template context. Refer the below code example. 

 

<SfGrid DataSource="@tickets_resolved" AllowPaging="true" @ref="@Grid_Resolved">     

    <GridPageSettings PageSize="6"></GridPageSettings> 

    <GridColumns> 

        <GridColumn Width="50"> 

            <Template> 

                @{ 

                    var ticket = (context as TicketDetails); 

                    <SfButton @ref="EditBtnResolved" @onclick="@((args) => onToggleClick_Resolved(args,ticket))" IsToggle="true" IsPrimary="true">Edit</SfButton> 

                    } 

                </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(TicketDetails.RequestID) HeaderText="Request ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="65"></GridColumn> 

. . . . . . 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<TicketDetails> Grid_Resolved; 

    SfButton EditBtnResolved; 

    public List<TicketDetails> tickets_resolved { get; set; } 

    private void onToggleClick_Resolved(Microsoft.AspNetCore.Components.Web.MouseEventArgs args, TicketDetails tick) 

    { 

        var val = tick.RequestID; // access the record value here. 

    } 

 

For your convenience we have prepared a sample which can be downloaded from below   

 

Sample: https://www.syncfusion.com/downloads/support/forum/161255/ze/BlazorApp1-1394337563  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/templates/  

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

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan