Hi Stefano,
Thanks for contacting Syncfusion support.
Query : I would like to have the button on the same line.
We suggest you to add the below highlighted style to make the Buttons display on the same line. Please use the code below,
|
<GridColumn HeaderText="Manage Records" Width="150">
<Template>
@{
<div style="display:inline-flex">
<EjsTooltip Content="@ContentEdit" Target="#btnEdit" CssClass="inlineclass">
<EjsButton ID="btnEdit" @ref="buttonEdit" @onclick="@OnClickEdit" CssClass="far fa-edit"></EjsButton>
</EjsTooltip>
<EjsTooltip Content="@ContentDelete" Target="#btnDelete">
<EjsButton ID="btnDelete" @ref="buttonDelete" @onclick="@OnClickDelete" CssClass="fas fa-trash-alt"></EjsButton>
</EjsTooltip>
</div>
}
</Template>
</GridColumn>
|
And also, you can use the “HtmlAttributes” property of EjsButton to display tooltip for Syncfusion Button component. We have already documented this topic, please refer the documentation link below for more details,
Please use the code below,
|
<EjsGrid DataSource="@Orders" AllowPaging="true" Height="315">
...
<GridColumns>
...
<GridColumn HeaderText="Manage Records" Width="150">
<Template>
@{
<EjsButton @ref="buttonEdit" HtmlAttributes="@EditButton" @onclick="@OnClickEdit" CssClass="far fa-edit"></EjsButton>
<EjsButton @ref="buttonDelete" HtmlAttributes="@DeleteButton" @onclick="@OnClickDelete" CssClass="fas fa-trash-alt"></EjsButton>
}
</Template>
</GridColumn>
</GridColumns>
</EjsGrid>
@code{
...
private Dictionary<string, object> DeleteButton = new Dictionary<string, object>()
{
{ "title", "Delete Button"}
};
private Dictionary<string, object> EditButton = new Dictionary<string, object>()
{
{ "title", "Edit Button"}
};
...
}
|
Please get back to us if you need further assistance.
Regards,
Renjith Singh Rajendran.
