We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Syncfusion Blazor: Binding drop-down list in Grid column

Syncfusion Blazor: Binding drop-down list in Grid column

I am using Syncfusion Grid in a Blazor Core 3.1.0 App. I am binding data through a Web API. Now I want to show one of the columns/fields as a dropdown list in the grid.

By this URL: 

Api/Default/GetProjectsList

I get the key and value pair that I need to bind to the drop-down list's text and value.

I have used the EjsDropDownList control and bound the data with the list. But how to make this list a column in the Grid is where I am struggling at. Because with Grid I use the CRUD functionality of the API. Tried enclosing the EjsDropDownList in a GridColumn tag but the list has not become a part of the Grid.

Please help. 

<EjsGrid TValue="Order" AllowPaging="true" Toolbar="@(new List() { "Add", "Edit", "Delete", "Cancel", "Update" })">
   <EjsDataManager Url="/Api/Orders" Adaptor="Adaptors.WebApiAdaptor">EjsDataManager>
     <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal">GridEditSettings>
       <GridColumns>

          <GridColumn>
                  <EjsDropDownList TValue="string" Placeholder="Select a Project">
                        <EjsDataManager Url="/Api/Default/GetProjectsList" Adaptor="Adaptors.WebApiAdaptor" CrossDomain=true>EjsDataManager>
                        <DropDownListFieldSettings Text="Item1" Value="Item2">DropDownListFieldSettings>
                  EjsDropDownList>  
          GridColumn>

          <GridColumn Field=@nameof(Order.OrderId) DefaultValue="0" IsIdentity="true" IsPrimaryKey="true" HeaderText="ID" TextAlign="TextAlign.Right">
          GridColumn> 

    GridColumns>
    EjsGrid>

Thanks in advance.


11 Replies
RS Renjith Singh Rajendran Syncfusion Team November 20, 2019 09:40 AM UTC

Hi Junaid, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “Column Template feature” of Grid. With this you can display a Dropdown bound with List in a Grid’s column. Please refer the documentation link below, 
Documentation :  
 
Please use the code below, 

 
<EjsGrid TValue="Order" ModelType="@Model" AllowPaging="true" ...> 
    ... 
   <GridColumns> 
        <GridColumn> 
            <Template> 
                <EjsDropDownList TValue="string" Placeholder="Select a Project"> 
                    <EjsDataManager Url="/Api/Default/GetProjectsList" Adaptor="Adaptors.WebApiAdaptor" CrossDomain=true></EjsDataManager> 
                    <DropDownListFieldSettings Text="Item1" Value="Item2"></DropDownListFieldSettings> 
                </EjsDropDownList> 
            </Template> 
        </GridColumn> 
        ... 
    </GridColumns> 
</EjsGrid> 
 
@code{ 
 
    EjsButton accountButton; 
    public Order Model = new Order(); 
    ... 
} 


And also if you want to display the DropDown when perform editing in Grid. Then we suggest you to set the “EditType” for the column as “DropDownEdit” or you can also use the “Edit Template feature”. Please refer the below documentations for more details regarding this, 
Documentations :  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


JU Junaid November 20, 2019 11:44 AM UTC

Good day,

Thanks for your reply. I have solved this problem with another approach and it works. But, I need a little guidance from you. 

1) How would this Model variable get data? 

@code{ 
 
    EjsButton accountButton; 
    public Order Model = new Order(); 
    ... 
} 

2) Kindly provide an example that shows Edit template in action for this example.

3) Can you please tell me whether my approach is good? Is template a better way of solving this problem.
-------------------------------------------------------------------------------------------------------------------------- 

My approach:

                                 TextAlign="TextAlign.Right"
            DataSource="@projectsDataSource"
            ForeignKeyField="Id" ForeignKeyValue="Name">

@code{
    public List projectsDataSource { set; get; }

    public void ActionComplete(ActionEventArgs Args) { }
    protected override async Task OnInitializedAsync()
    {
        projectsDataSource = new List();
        projectsDataSource = await Http.GetJsonAsync>("/Api/Default/GetProjectsList");
    }
}

Regards.
Junaid


RS Renjith Singh Rajendran Syncfusion Team November 21, 2019 10:36 AM UTC

Hi Junaid, 

Query 1 : How would this Model variable get data? 
We will be fetching the type of the properties available in the Model class(Order) in this model variable. And map based on this type to fetch data. As provided in the code examples from below documentation, you can get the data from model by using the “context”. 
 
Query 2 : 2) Kindly provide an example that shows Edit template in action for this example. 
We have prepared a sample for your convenience by using the code from the documentation, please download the EditTemplate sample from the link below, 
 
Query 3 : Can you please tell me whether my approach is good? Is template a better way of solving this problem. 
Yes, you can use the “Foreign Key column feature of Grid”. This is completely based on your requirement. If you want to display a foreign value in Grid, by mapping the key between two different dataSources, then it is recommended to use the “Foreign Key Column feature”. And to display “Dropdownlist” during editing set the “EditType”.(as suggested in previous update) 
 
The previously suggested EditTemplate and Template features will display another component(like dropdown) in Grid, with the provided dataSource for that component. So its completely based on your requirement. We suggest you to choose, the feature which suits your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


JU Junaid November 21, 2019 02:52 PM UTC

Thanks for your help.

Regards.
Junaid

VN Vignesh Natarajan Syncfusion Team November 22, 2019 03:47 AM UTC

Hi Junaid,  

Thanks for the update.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


JU Junaid December 1, 2019 08:28 AM UTC

Good day,

I am struggling with one thing here. I am using “Foreign Key column feature of Grid”.
What if I want to show first item in the dropdown as a default selected element in edit mode? How will that be achieved?

Regards.
Junaid

RS Renjith Singh Rajendran Syncfusion Team December 2, 2019 12:08 PM UTC

Hi Junaid, 

Thanks for your update. 

We suggest you to use the “Cell Edit template feature” of Grid for the “Foreign Key Column”. We have prepared a sample based on this requirement, please download the sample from the link below, 
 
Please use the code below, 

 
<EjsGrid DataSource="@Orders" ModelType="@Model" Toolbar=@ToolbarItems> 
    ... 
   <GridColumns> 
        ... 
        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"> 
            <EditTemplate> 
                <EjsDropDownList TValue="string" ID="EmployeeID" Index="0" DataSource="@Employees"> 
                    <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 
                </EjsDropDownList> 
            </EditTemplate> 
        </GridColumn> 
        ... 
   </GridColumns> 
</EjsGrid> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


JU Junaid December 2, 2019 04:28 PM UTC

Good day,

Thanks for your reply. I did just that. In result of it, the grid does not load. Unfortunately, I met with this error on console as well. 



Code:

 <GridColumn Field=@nameof(Order.ProjectId) HeaderText="Project ID" ForeignKeyValue="Name" DataSource="@projectsDataSource" Width="150">
            <EditTemplate Context="ProjectId">
                  <EjsDropDownList TValue="string" ID="ProjectId" DataSource="@projectsDataSource">
                      <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
                  </EjsDropDownList>
           </EditTemplate>
 </GridColumn>


The list is populated on initialization. The list has data as well:



What am I doing wrong? Also, if I don't provide a context to EditTemplate tag I get an error.

Kindly help me here.

Regards.
Junaid

RS Renjith Singh Rajendran Syncfusion Team December 3, 2019 11:52 AM UTC

Hi Junaid, 

Thanks for your update. 

We suggest you to ensure to provide the “ModelType” property. We are able to face this “NullReferenceException” only when we fail to provide the ModelType property. So kindly ensure to add this property. 

 
<EjsGrid DataSource="@Orders" ModelType="@Model" Toolbar=@ToolbarItems> 
    ... 
</EjsGrid> 
 
@code{ 
    ... 
    public Order Model = new Order(); 
} 


If you are still facing difficulties we need more details to further proceed on this and provide you a solution as early as possible. 
  1. Share the sample which you have tried from your side.
  2. Or reproduce the issue with the attached sample from our previous update.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran. 


JU Junaid December 3, 2019 03:28 PM UTC

Good day,

I solved the issue by only adding ForeignKeyField property to the GridColumn tag. 


Thanks
Junaid

RS Renjith Singh Rajendran Syncfusion Team December 4, 2019 05:25 AM UTC

Hi Junaid, 

Thanks for your update. 

We are glad to know that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon