Grid with a dropdown action list button - Incorrect Id

[Rakesh Gupta]

Hi,

I am tryng to add a dropdown to the grid with a set of actions that cn be done for the row.. Not sure if there is a better way of doing this.

The issue is that the id returned back from the dropdown that points to my Dto context is wrong for the second page onwards.

Below is my code - 

It works fine for the first page but on subsequent page, the id returned onChange event is not correct - i think it references the first page.

                <SfGrid TValue="UserListDto" AllowPaging="true" AllowSelection="true" AllowSorting="true" AllowFiltering="true"

                        RowHeight="38" @ref="Grid" >

                    <SfDataManager Url="/api/getusers" Adaptor="Syncfusion.Blazor.Adaptors.UrlAdaptor" CrossDomain="true"></SfDataManager>

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

                    <GridColumns>

                        <GridColumn Field="username" HeaderText="User ID" Width="100"></GridColumn>

                        <GridColumn Field="firstname" HeaderText="Full Name" Width="120"></GridColumn>

                        <GridColumn Field="suspended" HeaderText="Enabled" Width="60" DisplayAsCheckBox="true" TextAlign="TextAlign.Center" Type="ColumnType.Boolean"></GridColumn>

                        <GridColumn HeaderText="Actions" Width="150">

                            <Template>

@{

    UserListDto dto = (context as UserListDto);

// For testing purpose to see if the id is correct

string saction = "Select action " + do.id;

}

                                <SfDropDownList TItem="NameValue" TValue="string" PopupHeight="230px" Placeholder="@saction" DataSource="@Actions">

                                    <DropDownListEvents TValue="string" ValueChange="((x) => OnChange(x, (context as UserListDto).id))"></DropDownListEvents>

                                    <DropDownListFieldSettings Text="name" Value="value"></DropDownListFieldSettings>

                                </SfDropDownList>

                            </Template>

                        </GridColumn>

                    </GridColumns>

                </SfGrid>

@code {

    SfGrid<Pencil.Entities.UserListDto> Grid;

    private List<NameValue> Actions = new List<NameValue>() {

            new NameValue(){ name= "View User", value= "View" },

            new NameValue(){ name= "Edit User", value= "Edit" },

            new NameValue(){ name= "Delete User", value= "Delete" },

            new NameValue(){ name= "Disable User", value= "Disable" },

            new NameValue(){ name= "Manage User Roles", value= "Roles" },

    };

     // Id returned here is incorrect if the grid is on the second page.

    public async Task OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args, long id)

    {

        if (args.Value == "View") {

}

    }

[Rahul Narayanasamy]

Hi Rakesh, 

Greetings from Syncfusion. 

Query: Grid with a dropdown action list button - Incorrect Id 

We have validated the reported issue and we suspect that component inside Template is not refreshed properly. So we suggest you to resolve the reported problem by adding the @key property to SfDropDownList as like the below code. Find the below code snippets and sample for your reference. 

 

 

<SfGrid ID="Grid" @ref="@Grid" TValue="Customer" AllowSorting="true" AllowResizing="true" AllowReordering="true" AllowPaging="true" Toolbar="@(new List<string>() { "Search", "Add", "Edit","Delete", "Update","Cancel" })" AllowFiltering="true" AllowSelection="true"> 

    <SfDataManager Url="/api/Values" Adaptor="Adaptors.UrlAdaptor"></SfDataManager> 

    . . . 

    <GridColumns> 

        . . . 

        <GridColumn HeaderText="Actions" Width="150"> 

            <Template> 

                @{ 

                    Customer dto = (context as Customer); 

                    // For testing purpose to see if the id is correct 

                    string saction = "Select action " + dto.CustomerId; 

                    <SfDropDownList @key="@dto.CustomerId" TItem="NameValue" TValue="string" PopupHeight="230px" Placeholder="@saction" DataSource="@Actions"> 

                        <DropDownListEvents TValue="string" ValueChange="((x) => OnChange(x, (context as Customer).CustomerId))"></DropDownListEvents> 

                        <DropDownListFieldSettings Text="name" Value="value"></DropDownListFieldSettings> 

                    </SfDropDownList> 

                } 

            </Template> 

        </GridColumn> 

   </GridColumns> 

</SfGrid> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/157493/ze/Sample-194559958  

 

Please let us know if you have any concerns. 

 

Regards, 

Rahul