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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Update Grid with selected value in Dropdownlist within EditTemplate of a GridColumn

Thread ID:

Created:

Updated:

Platform:

Replies:

150996 Jan 27,2020 04:41 PM UTC May 22,2020 11:31 AM UTC Blazor 1
loading
Tags: Grid
Ricky Brooks
Asked On January 27, 2020 04:41 PM UTC

Hello,

I'm trying to make a selectable dropdown list as a column, but when I do so it does not appear to update the grid value column. 

I'm also open to different implementations of this. I've tried to get this to work as a GridForeignColumn using a DataManager, but was unable to find the proper syntax.

Below is a copy of my attempt to work with this from an example found on the Syncfusion website. This includes the Microsoft.AspNetCore.Blazor.HttpClient package to make the Http.GetAsync() to work.

@page "/"
@using Syncfusion.EJ2.Blazor.DropDowns;
@using Syncfusion.EJ2.Blazor.Data;
@using Syncfusion.EJ2.Blazor.Grids
@using System.Net.Http
@using System.Xml.Linq
@using System
@inject HttpClient Http

<EjsGrid DataSource="@Orders" Height="250" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" ForeignKeyField="EmployeeID" Width="150" DataSource="Employees">
            <EditTemplate>
                <EjsDropDownList TValue="int?" TItem="EmployeeData" DataSource="Employees">
                    <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings>
                </EjsDropDownList>
            </EditTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>
@code{

    public List<Order> Orders { get; set; }
    public List<EmployeeData> Employees { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            EmployeeID = x,
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();

        var response = Http.GetAsync("https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Employees").Result;
        var xml = StripNameSpaces(XElement.Parse(response.Content.ReadAsStringAsync().Result));

        Employees = xml.Descendants("properties")
            .Select(employee => new EmployeeData
            {
                EmployeeID = Convert.ToInt32(employee.Element("EmployeeID").Value),
                FirstName = employee.Element("FirstName").Value
            })
            .ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public int? EmployeeID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }

    public class EmployeeData
    {
        public int? EmployeeID { get; set; }
        public string FirstName { get; set; }
    }

    private XElement StripNameSpaces(XElement xml)
    {
        return new XElement(
        xml.Name.LocalName,
        xml.HasElements ?
            xml.Elements().Select(element => StripNameSpaces(element)) :
            (object)xml.Value);
    }
}

Renjith Singh Rajendran [Syncfusion]
Replied On January 29, 2020 10:34 AM UTC

Hi Ricky, 

Thanks for contacting Syncfusion support. 

We suggest you to ensure to provide the “ID” property for the DropDownList based on the column’s Field name to overcome the problem you are facing. Please use the code below, 

 
        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" ForeignKeyField="EmployeeID" Width="150" DataSource="Employees"> 
            <EditTemplate> 
                <EjsDropDownList ID="EmployeeID" TValue="int?" TItem="EmployeeData" DataSource="Employees"> 
                    <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 
                </EjsDropDownList> 
            </EditTemplate> 
        </GridColumn> 


 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon