1. Home
  2. Forum
  3. Blazor
  4. Grid inline edit dropdown

Grid inline edit dropdown

Hello

I am trying add a drop down field to an inline edit grid as highlighted below. SampleSizeField is of type string and I want to offer the user a list of possible field (ListOfFields) which is a List<string>.

The below does not work.  When I double click on the row, the drop down list is empty.  I have tried to follow other examples, but they are all confusing and overly complex...I just want a simple List<string> as my datasource.

Can you help...thanks



5 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team March 19, 2021 04:48 AM UTC

Hi DitchFord,  
 
Thanks for contacting Syncfusion support.  
 
Query: “When I double click on the row, the drop down list is empty.  I have tried to follow other examples, but they are all confusing and overly complex...I just want a simple List<string> as my datasource.” 
 
We have analyzed the reported query and we understand that you want to populate the default edit dropdown with custom datasource in Grid while editing. We suggest you to achieve your requirement EditorSettings property of GridColumn. We have already documented this topic in our UG documentation which can be referred from below  
 
 
Note: type of datasource for default edit dropdown must of similar to type of Grid datasource. it can not be of simple list of string. Because we will assign datasource to particular column editor controrl based on column type. Hence it needs to similar to grid datasource.  
 
If you want to use simple list of string as datasource for dropdownlist control. Kindly refer our UG documentation on EditTemplate to render the DropDownList as custom edit component.  
   
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


DI Ditchford March 19, 2021 06:32 AM UTC

Hello

I just can't get any of those methods to work.  I have attached a sample.  To recreate:

1. Run attached
2. Goto grid (survey list)
3. Double-click row to go into edit mode ... crash

Can you tell me where I am going wrong.

Also can you tell me how to change the code to use a simple List<string> rather than a List<type>

Thank you

Attachment: SyncfusionTroubleshoot_3a12dd35.zip

VN Vignesh Natarajan Syncfusion Team March 22, 2021 09:36 AM UTC

Hi Ditchford,  
 
Query: “Can you tell me where I am going wrong. Also can you tell me how to change the code to use a simple List<string> rather than a List<type>” 
 
We have analyzed the provided sample and we are able to reproduce the reported issue in it. Inside the edit template, we will pass the arguments of the current edited row details as context variable. In your code example, you have defined the Bind-Value property wrongly by casting the row data as DropDownData instead of Grid data type (SurveyViewModel). Hence the reported issue has occurred. We have modified the dropdown datasource to List<string> from List<DropDown> 
 
Please find the modified code example from below.   
 
<SfGrid @ref="SurveyGrid" AllowSorting="true" AllowPaging="true" AllowExcelExport="true" AllowResizing="true" AllowFiltering="true" ID="grdCustomer" DataSource="@Surveys" Height="100%" Toolbar="@Toolbaritems"> 
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox" ShowFilterBarStatus="true"></GridFilterSettings> 
    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 
    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Row" EnableToggle="false"></GridSelectionSettings> 
    <GridPageSettings PageSize="100" PageCount="5"></GridPageSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(SurveyViewModel.SurveyHeaderId) Width="50" AllowEditing="false" IsPrimaryKey="true" Visible="false" HeaderText="SurveyHeaderId"></GridColumn> 
        <GridColumn Field=@nameof(SurveyViewModel.Name) HeaderText="Name" AllowEditing="false" Width="500" Visible="true"></GridColumn> 
        <GridColumn Field=@nameof(SurveyViewModel.SurveyDate) HeaderText="Survey Date" AllowEditing="false" Width="200" Visible="true"></GridColumn> 
        <GridColumn Field=@nameof(SurveyViewModel.ImportDate) HeaderText="Import Date" AllowEditing="false" Width="200" Visible="true"></GridColumn> 
        <GridColumn Field=@nameof(SurveyViewModel.SampleSizeField) HeaderText="Sample Field" Width="150" AllowEditing="true" Visible="true"> 
            <EditTemplate> 
                <SfAutoComplete TItem="string" TValue="string" @bind-Value="@((context as SurveyViewModel).SampleSizeField)" DataSource="@ListofFields"> 
                    <AutoCompleteFieldSettings Value="SampleSizeField"></AutoCompleteFieldSettings> 
                </SfAutoComplete> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn HeaderText="Actions" Width="110"> 
            <GridCommandColumns> 
                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn> 
            </GridCommandColumns> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
public List<string> ListofFields; 
    protected async override Task OnInitializedAsync() 
    { 
      ListofFields = new List<string>() { "Field1" ,"Field2" ,"Field3" }; 
      await GetSurveys(); 
    } 
 
Kindly download the modified sample from below  
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


Marked as answer
DI Ditchford March 23, 2021 02:27 AM UTC

Thanks, much appreciated...clearly I couldn't see the issue for looking

VN Vignesh Natarajan Syncfusion Team March 23, 2021 06:39 AM UTC

Hi Richard,  

Thanks for the update.  

From your update, we believe that you have resolved your query using the modified sample provide in previous update.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon