Action button alignment issue in Grid

I have an grid control with "action button",I would like to show show action button in last column of the grid.I have tried below code but "Action button" is showing in first column in first load of the grid.Please check below screencast and source code for your reference.

screencast:-

https://www.screencast.com/t/c6XXK5px0


source code:-


<SfGrid Height="100%" DataSource="@lstReportTable" AllowTextWrap="true" AllowSorting="true" AllowSelection="true" AllowPaging="true" AllowFiltering="true" Toolbar=@Tool>

                    <GridPageSettings PageCount="@ConstantClass.PageCount" PageSizes="true"></GridPageSettings>

                    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

                    <GridTextWrapSettings WrapMode="WrapMode.Content" />


                    <GridColumns>

                        @foreach (var colItem in lstRptColumn)

                        {

                            var colSpecification = genericPageResults.Where(x => x.ResultProcedureName == colItem);

                            foreach (var col in colSpecification)

                            {

                                var textAlign = col.ResultType == 1 ? TextAlign.Left : (col.ResultType == 2) ? TextAlign.Right : TextAlign.Center;


                                bool IsVisibile = (col.IsVisible == 1 ? true : false);

                                bool IsNavigate = (col.IsNavigate == 1 ? true : false);


                                @if (IsNavigate)

                                {

                                    <GridColumn Field="@colItem" HeaderTextAlign="TextAlign.Left" HeaderText="@GetResourceProvider.GetResourceValue(Resource, col.ResultName)" Visible="@IsVisibile" TextAlign="TextAlign.Left" Width="120">

                                        <Template Context="LinkContext">

                                            <div>

                                                <a rel='nofollow' href="#"> @colItem </a>

                                            </div>

                                        </Template>

                                    </GridColumn>

                                }

                                else

                                {

                                    if (IsVisibile)

                                    {

                                        <GridColumn Field="@colItem" HeaderTextAlign="TextAlign.Left" HeaderText="@GetResourceProvider.GetResourceValue(Resource, col.ResultName)" TextAlign="@textAlign" Width="120">

                                        </GridColumn>

                                    }

                                }

                            }

                        }

                        <GridColumn TextAlign="TextAlign.Center" Width="100" HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblAction")">

                            <Template Context="con1">

                                @{

                                    var keyValues = (con1 as ExpandoObject);

                                    if (rights.EditFlag)

                                    {

                                        <SfButton IconCss="e-icons e-edit" OnClick="@(() => OnEditClicked(keyValues))" HtmlAttributes="@commonHtmlAttribute.editButton"></SfButton>

                                    }

                                    if (rights.DeleteFlag)

                                    {

                                        <SfButton IconCss="e-icons e-delete" OnClick="@(() => OnDeleteClicked(keyValues))" HtmlAttributes="@commonHtmlAttribute.deleteButton"></SfButton>

                                    }

                                }

                            </Template>

                        </GridColumn>

                    </GridColumns>

                </SfGrid>



1 Reply

JP Jeevakanth Palaniappan Syncfusion Team November 18, 2021 11:29 AM UTC

Hi Kins, 

Greetings from Synfusion support. 

We have validated your query based on the provided code snippet but unfortunately we are unable to reproduce the reported problem from our end. We have attached the validated sample and the video demo for your reference.  Please find it below. 


If you are still facing the reported problem then kindly  share us the below details. 

  1. Share us the Syncfusion NuGet version details.
  2. Share us the runnable issue reproducing sample or reproduce the reported problem in the above provided sample.

The above requested details will be helpful for us to validate your query based on your scenario and to provide you with a better solution as early as possible. 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon