1. Home
  2. Forum
  3. Blazor
  4. Custom list of values for column on editing

Custom list of values for column on editing

Hello,

I would like to show in a column a drop down list with a set of values, provided with a DataSource.

<SfGrid DataSource="@MyDataList" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="@nameof(MyData.Name)" HeaderText="Name" />
        <GridColumn Field="@nameof(MyData.Choice)" HeaderText="Choice" EditType="EditType.DropDownEdit" DataSource="Choices" />
    </GridColumns>
</SfGrid>


public class MyData
{
    public string Name { get; set; }
    public string Choice { get; set; }
}

public static List<string> Choices= new List<string> { "Choice A", "Choice B" };

This doesn't work, and the drop down only shows me a distinct list of the values that are currently used in the grid.
What am I doing wrong? 

Thank you

9 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team February 8, 2021 12:52 PM UTC

Hi A B, 

Greetings from Syncfusion support. 

Based on this scenario, we suggest you to use the EditTemplate feature of Grid.  
 
Please refer and use the codes below, 

 
<GridColumn Field="@nameof(MyData.Choice)" HeaderText="Choice"> 
    <EditTemplate> 
        <SfDropDownList ID="Choice" @bind-Value="(context as MyData).Choice" DataSource="@Choices"> 
        </SfDropDownList> 
    </EditTemplate> 
</GridColumn> 


And also when performing CRUD actions in Grid, we suggest you to ensure to enable IsPrimaryKey for any one of the unique valued column in Grid. Only based on the primary key value, the CRUD actions will take place in Grid. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Marked as answer
AB A B February 8, 2021 09:59 PM UTC

Perfect, that worked. Thank you.
One additional question on this. What if the available `Choices` were different for each row?
Just imagine that `MyData` becomes:

public class MyData
{
    public string Name { get; set; }
    public IList Choices { get; set; }
    public string SelectedChoice { get; set;}
}

Each grid row has a list of `Choices`, and the selected one goes into the `SelectedChoice` field for each row (the `SelectedChoice` is set by default on load, the user can edit it with a drop down).
How can I implement something similar?



RS Renjith Singh Rajendran Syncfusion Team February 9, 2021 11:45 AM UTC

Hi A B, 

We suggest you to get the Choices from the context inside the EditTemplate and assign to DataSource property of SfDropDown to achieve this scenario. Please refer the codes below, 

 
<GridColumn Field="@nameof(MyData.Choice)" HeaderText="Choice"> 
    <EditTemplate> 
        @{ 
            var a = (context as MyData); 
        } 
        <SfDropDownList ID="Choice" @bind-Value="a.Choice" DataSource="@a.Choices"> 
        </SfDropDownList> 
    </EditTemplate> 
</GridColumn> 


We have also prepared a sample based on this scenario for your convenience, please download the sample from the link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AB A B February 9, 2021 11:42 PM UTC

Renjith,
That worked again really well.
In another scenario of my application I have something similar:

public class MyData
{
    public string Name { get; set; }
    public IList<MyObject > Choices { get; set; }
    public MyObject SelectedChoice { get; set;}
}
public class MyObject {
     public int Id {get;set;}
     public string Name {get;set;}
}

The object in the drop down is a class, I tried to apply the same pattern

@{
    var ctx = (context as MyData);
}
<GridColumn Field="@SelectedChoice.Name" HeaderText="Choice"> 
    <EditTemplate> 
        @{ 
            var a = (context as MyData); 
        } 
        <SfDropDownList ID="Choice" @bind-Value="a.SelectedChoice" DataSource="@a.Choices"> 
        SfDropDownList> 
    EditTemplate> 
GridColumn> 
        
   

What happens now, is that every time I try to go in edit mode the grid very quickly switches back to read mode.
How do I solve this one?

Thanks a lot


RS Renjith Singh Rajendran Syncfusion Team February 10, 2021 09:26 AM UTC

Hi A B, 

Based on this scenario, we suggest you to use as like the below codes to achieve this requirement. Please refer and use the codes below, 

 
<GridColumn Field="SelectedChoice.Name" HeaderText="Choice"> 
    <EditTemplate> 
        @{ 
            var a = (context as MyData); 
        } 
        <SfDropDownList ID="SelectedChoice___Name" @bind-Value="a.SelectedChoice.Name" DataSource="@a.Choices"> 
            <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings> 
        </SfDropDownList> 
    </EditTemplate> 
</GridColumn> 


References : 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AB A B February 10, 2021 01:28 PM UTC

Renjith,
Nice trick with the double underscore "SelectedChoice___Name" I couldn't find it anywhere in the documentation.
However, it doesn't seem to work too well.
I am able to edit the grid and select a different option in the drop down, however I am not able to update it.

I suspect it is because it is trying to bind the string `Name` rather than the object `MyObject`.
I have attached my razor page, please take a look and let me know what you think.

Regards

Attachment: Test_78f4211a.zip

RS Renjith Singh Rajendran Syncfusion Team February 11, 2021 07:25 AM UTC

Hi A B, 

As informed in our previous update dated February 8, 2021, we suggest you to ensure to set any one of the unique valued column as primary key column in Grid. When performing CRUD actions in Grid, only based on the unique IsPrimaryKey value, the CRUD actions will take place in Grid.  

 
<GridColumn Field="@nameof(MyData.Name)" IsPrimaryKey="true" HeaderText="Data Name" /> 


 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AB A B February 12, 2021 03:26 AM UTC

Renjith,
That is great, thanks for reminding.
All works fine now.

Thank you

RS Renjith Singh Rajendran Syncfusion Team February 12, 2021 04:17 AM UTC

Hi Alessio, 

We are glad to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 
Renjith R 



Loader.
Up arrow icon