Get value from dropdownlist inside a Grid
Hello all, I'm using the grid control, inside the grid i have two custom columns, each of them with a dropdown list and i need to get the selected value for those list, I have the following code:
<SfGrid @ref="GridWorkSpaces" DataSource="@WorkSpaces" AllowPaging="false">
<GridSelectionSettings EnableSimpleMultiRowSelection="true" Mode="SelectionMode.Row" CheckboxOnly="true" PersistSelection="true" Type="SelectionType.Multiple"></GridSelectionSettings>
<GridColumns>
<GridColumn Field=@nameof(WorkSpaceInfoDto.Id) IsPrimaryKey="true" Visible="false" HeaderText="Id" TextAlign="TextAlign.Left"></GridColumn>
<GridColumn Type="ColumnType.CheckBox" AllowFiltering="false" AllowSorting="false" Width="60"></GridColumn>
<GridColumn Field=@nameof(WorkSpaceInfoDto.Name) HeaderText="Espacio de Trabajo" TextAlign="TextAlign.Left"></GridColumn>
<GridColumn HeaderText="Perfil" TextAlign="TextAlign.Left">
<Template>
@{
if (context is WorkSpaceInfoDto item)
{
var profiles = item.Profiles;
<SfDropDownList TItem="BasicProfileInfoDto" TValue="string" PopupHeight="230px" Placeholder="Seleccione un perfil"
DataSource="@profiles">
<DropDownListEvents TValue="string"></DropDownListEvents>
<DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
</SfDropDownList>
}
}
</Template>
</GridColumn>
<GridColumn HeaderText="Role" TextAlign="TextAlign.Left">
<Template>
@{
if (context is WorkSpaceInfoDto item)
{
var roles = item.Roles;
<SfDropDownList TItem="RoleInfoDto" TValue="string" PopupHeight="230px" Placeholder="Seleccione un rol"
DataSource="@roles">
<DropDownListEvents TValue="string"></DropDownListEvents>
<DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
</SfDropDownList>
}
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
on the csharp I have the following:
var selectedRows = await GridWorkSpaces.GetSelectedRecords();
foreach (var item in selectedRows)
{
await JsRuntime.InvokeAsync<object>("console.log", $"Data Row: {JsonConvert.SerializeObject(item)}");
}
on the foreach loop, i need to access the selected values of the dropdownlist, but i cannot find how
Any idea? thanks
SIGN IN To post a reply.
6 Replies
RN
Rahul Narayanasamy
Syncfusion Team
April 20, 2020 02:09 PM UTC
Hi julio,
Greetings from Syncfusion.
Query: Get value from dropdownlist inside a Grid
We have validated your query and you want to get selected value of the dropdown list. You can achieve your requirement by using ValueChange event of dropdownlist. Find the below code snippets and sample for your reference.
|
. . .
<SfGrid AllowPaging="true" DataSource="@GridData" AllowSelection="true" ShowColumnChooser="true" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">
<GridEvents TValue="OrdersDetails" RowSelected="RowSelectHandler"></GridEvents>
. . .
<GridColumns>
<GridColumn Type="ColumnType.CheckBox" Width="60"></GridColumn>
. . .
<Template>
<SfDropDownList ID="ShipCountry" Value="@((context as OrdersDetails).ShipCountry)" TItem="OrdersDetails" TValue="string" DataSource="@GridData">
<DropDownListEvents TValue="string" OnValueSelect="OnSelect" ValueChange="ValueChange"></DropDownListEvents>
<DropDownListFieldSettings Text="ShipCountry" Value="ShipCountry"></DropDownListFieldSettings>
</SfDropDownList>
</Template>
</GridColumn>
<GridColumn Field=@nameof(OrdersDetails.ShipState) HeaderText=" ShipState" EditType="EditType.DropDownEdit" Width="150">
<Template>
<SfDropDownList ID="ShipState" Value="@((context as OrdersDetails).ShipState)" Placeholder="Select a State" TItem="OrdersDetails" TValue="string" DataSource="@GridData">
<DropDownListEvents TValue="string" OnValueSelect="OnSelect" ValueChange="ValueChange"></DropDownListEvents>
<DropDownListFieldSettings Text="ShipState" Value="ShipState"></DropDownListFieldSettings>
</SfDropDownList>
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<OrdersDetails> GridData { get; set; }
. . .
public void RowSelectHandler(RowSelectEventArgs<OrdersDetails> args)
{
// Here you can customize your code
}
public void OnSelect(SelectEventArgs args)
{
}
public void ValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
{
// you can get changed value in args.Value
}
} |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorGRidSAmple561679141
If you want to get the selected details of the row, then you can use RowSelected event of the Grid.
Please get back to us if you need further assistance.
Regards,
Rahul
JA
julio Avellaneda
May 4, 2020 01:24 AM UTC
Hi Rahul, thank you for your help.
The solution works but my case is a little bit different, i need to get the selected value for the dropdownlist outside of the ValueChange event, i have a button on the page that basically do a loop through the selected rows of the grid, and do some custom action after that, inside the button click, i have the following code:
var selectedRows = await GridWorkSpaces.GetSelectedRecords();
foreach (var item in selectedRows)
{
// here i need to read the selected value of the dropdownlist
}
foreach (var item in selectedRows)
{
// here i need to read the selected value of the dropdownlist
}
Thank you.
VN
Vignesh Natarajan
Syncfusion Team
May 4, 2020 11:00 AM UTC
Hi Julio,
Query: “ i need to get the selected value for the dropdownlist outside of the ValueChange event,”
We suggest you to store the value selected from a DropDownList in a variable / property and use that property in the button click event. Refer the below code example.
|
<SfButton OnClick="Clicked" Content="Click Here"></SfButton>
<SfGrid @ref="GridWorkSpaces" AllowPaging="true" DataSource="@GridData" AllowSelection="true" ShowColumnChooser="true" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">
. .. .. . . . . .
</SfGrid>
@code{
SfGrid<OrdersDetails> GridWorkSpaces { get; set; }
public string DropSelected { get; set; }
public List<OrdersDetails> GridData { get; set; }
. . . .. . . . . . .
public void ValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
{
DropSelected = args.Value;
}
public async Task Clicked()
{
var selectedRows = await GridWorkSpaces.GetSelectedRecords();
foreach (var item in selectedRows)
{
var t = DropSelected; // here you can get the selected value of the dropdownlist
}
}
}
|
Kindly get back to us if you have further queries.
Regards,
Vignesh Natarajan
JA
julio Avellaneda
May 4, 2020 02:46 PM UTC
Hi Vignesh, thank you, your approach worts onlye if the grid has 1 column, but with multiple columns I'm going to get only the latest selected value.
I'm thinkg that maybe this is not possible and I have to change the flow.
RS
Renjith Singh Rajendran
Syncfusion Team
May 5, 2020 02:05 PM UTC
Hi Julio,
Thanks for your update.
Based on your requirement, we suggest you to use different variables for storing the value from the particular selected dropdown by checking for its ID property.
Please use like the below code to achieve this requirement.
|
<SfGrid AllowPaging="true" DataSource="@GridData" ...>
...
<GridColumns>
...
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">
<Template>
<SfDropDownList ID="ShipCountry" Value="@((context as OrdersDetails).ShipCountry)" TItem="OrdersDetails" TValue="string" DataSource="@GridData">
<DropDownListEvents TValue="string" OnValueSelect="OnSelect" ValueChange="ValueChange"></DropDownListEvents>
<DropDownListFieldSettings Text="ShipCountry" Value="ShipCountry"></DropDownListFieldSettings>
</SfDropDownList>
</Template>
</GridColumn>
<GridColumn Field=@nameof(OrdersDetails.ShipState) HeaderText=" ShipState" EditType="EditType.DropDownEdit" Width="150">
<Template>
<SfDropDownList ID="ShipState" Value="@((context as OrdersDetails).ShipState)" Placeholder="Select a State" TItem="OrdersDetails" TValue="string" DataSource="@GridData">
<DropDownListEvents TValue="string" OnValueSelect="OnSelect" ValueChange="ValueChange"></DropDownListEvents>
<DropDownListFieldSettings Text="ShipState" Value="ShipState"></DropDownListFieldSettings>
</SfDropDownList>
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<OrdersDetails> GridData { get; set; }
public string ShipStateDropSelected { get; set; }
public string ShipCountryDropSelected { get; set; }
...
public void ValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
{
if(args.Element.ID == "ShipState")
{
ShipStateDropSelected = args.Value; //Assign value to ShipStateDropSelected when ShipState column dropdown value selected
}
else if(args.Element.ID == "ShipCountry")
{
ShipCountryDropSelected = args.Value; //Assign value to ShipCountryDropSelected when ShipCountry column dropdown value selected
}
}
}
|
Please get back to us if you need further assistance.
Regards,
Renjith Singh Rajendran
JA
julio Avellaneda
May 5, 2020 02:06 PM UTC
Hi all, i just changed the flow of my page so i'm using now another approach to accomplish my goal.
Ragrds,
SIGN IN To post a reply.
