Action button column not showing in Mobile Mode

[KINS]

I have an sfgrid control with "Action button".It works fine in desktop mode but in mobile mode "Action button " column not showing

screencast:-

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

Code:-

<SfGrid @ref="gridRef" Width="100%" AllowFiltering="true" AllowSelection="true" AllowPaging="true" AllowSorting="true" DataSource="@srfSetups" AllowTextWrap="true">

                <GridEvents DataBound="DataboundHandler" RowSelecting="RowSelectingHandler" RowSelected="RowSelectHandler" TValue="SrfSetup"></GridEvents>

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

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

                @*<GridTextWrapSettings WrapMode="WrapMode.Both" />*@

                @*<GridTextWrapSettings WrapMode="WrapMode.Both" />*@

                <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single" Mode="Syncfusion.Blazor.Grids.SelectionMode.Row" CheckboxMode="CheckboxSelectionType.ResetOnRowClick" PersistSelection="true"></GridSelectionSettings>

                <GridColumns>

                    <GridColumn TextAlign="TextAlign.Center" Type="ColumnType.CheckBox" />

                    <GridColumn Field=@nameof(SrfSetup.SrfNo) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"SrfNo")" IsPrimaryKey="true" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(SrfSetup.BuyerName) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"BuyerName")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(SrfSetup.ProductName) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"ProductName")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(SrfSetup.GenderName) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"GenderName")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(SrfSetup.SampleStyleNo) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"SampleStyleNo")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(SrfSetup.BuyerStyleNo) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"BuyerStyleNo")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(SrfSetup.BuyerStyleDescription) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"BuyerStyleDescription")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn Field=@nameof(SrfSetup.ProtoName) HeaderText="@GetResourceProvider.GetResourceValue(Resource,"SampleType")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left"></GridColumn>

                    <GridColumn HeaderText="@GetResourceProvider.GetResourceValue(Resource, "lblAction")" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left">

                        <Template>

                            @{

                                var srf = (context as SrfSetup);

                                if (rights.EditFlag)

                                {

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

                                }

                                if (rights.DeleteFlag)

                                {

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

                                }

                            }

                        </Template>

                    </GridColumn>

                </GridColumns>

            </SfGrid>

[Rahul Narayanasamy]

Hi KINS, 

Greetings from Syncfusion. 

Query: Action button column not showing in Mobile Mode 

We have validated your query with the provided details and we could seen that you have not provided Width to the GridColumns. Could you please ensure the reported case after providing the Width property to the GridColumn. Find the below code snippets and sample for your reference. 

 

<SfGrid DataSource="@Orders" @ref="gridRef" Width="100%"  AllowFiltering="true"  

AllowSelection="true" AllowPaging="true" AllowSorting="true" AllowTextWrap="true"> 

. . . 

    <GridColumns> 

        <GridColumn TextAlign="TextAlign.Center" Type="ColumnType.CheckBox"  Width="50"/> 

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

        . . . 

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 

        <GridColumn HeaderText="Action" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left" Width="90"> 

            <Template> 

                @{ 

                    var srf = (context as Order); 

                    if (EditFlag) 

                    { 

                        <SfButton IconCss="e-icons e-edit" OnClick="@(()=>OnEditClicked(srf))" ></SfButton> 

                    } 

                    if (DeleteFlag) 

                    { 

                        <SfButton IconCss="e-icons e-delete" OnClick="@(()=>OnDeleteClicked(srf))"></SfButton> 

                    } 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

Sample: https://www.syncfusion.com/downloads/support/forum/169596/ze/SampleW-898227166  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[KINS]

Actually I have set "AutoFitColumn" in DataBound event handler.that's why I have not set column width 

[Jeevakanth Palaniappan]

Hi Kins, 

 

We have confirmed your scenario as a bug and logged the defect report “Problem with applying AutoFit for template columns without Field in mobile mode” for the same. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and including the defect fix in our weekly release which is expected to be rolled out by the end of November, 2021. 

  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.        

Feedback : https://www.syncfusion.com/feedback/27682/problem-with-applying-autofit-for-template-columns-without-field 

 

Regards,  

Jeevakanth SP. 

[KINS]

Ok thanks.

Will wait for updates 

[Jeevakanth Palaniappan]

Hi Kins, 

You are most welcome. We will notify you once the release has been rolled out. 

Regards, 

Jeevakanth SP.