@page "/GridEditTemplat"


@using Syncfusion.EJ2.Blazor.Grids

    <h3>Lockup when OnActionComplete is used</h3>
    <p>
        Reorder the columns and the UI will lock up.  If you remove the ActionCompletedHandler it works fine.
    </p>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <EjsGrid ID="Grid" ModelType="@vendorModel" DataSource="@gridData" Height="150" Toolbar="@(new List<string>() { " Add", "Edit" , "Delete" , "Update" , "Cancel" })"
                     AllowPaging="false" ShowColumnMenu="true" AllowResizing="true" AllowSorting="true" AllowFiltering="true" AllowReordering="true">
                <GridEvents OnActionComplete="ActionCompletedHandler" TValue="Vendor"></GridEvents>
                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true">
                </GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(Vendor.Id) HeaderText="Id" IsPrimaryKey="true" Visible="false"></GridColumn>
                    <GridColumn Field=@nameof(Vendor.Name) HeaderText="Vendor Name" Width="120"></GridColumn>
                    <GridColumn HeaderText="Stock Ticker" Width="120">
                        <Template>
                            @{
                                var v = (context as Vendor);
                                var prop = GetProperty(context, "Ticker", v.Name);
                                <div>
                                    @prop.Value
                                </div>
                            }
                        </Template>
                        <EditTemplate>
                            @{
                                var v = (context as Vendor);
                                var prop = GetProperty(context, "Ticker", v.Name);
                                <StringPropertyComponent stringProperty="@prop.Value" />
                            }
                        </EditTemplate>

                    </GridColumn>
                </GridColumns>
            </EjsGrid>

        </div>
    </div>
</div>

@code{
    @using System.Collections.Generic;
    @using System.Collections.ObjectModel;

    public ObservableCollection<Vendor> gridData { get; set; }
    public Vendor vendorModel = new Vendor();

    protected override void OnInitialized()
    {
        gridData = Vendor.GetAllRecords();
    }

    protected VendorProperty GetProperty(object context, string property, string name)
    {
        Vendor v = context as Vendor;
        v = gridData.Where(ven => ven.Name == name).FirstOrDefault();
        try
        {
            VendorProperty prop = v.Properties.Where(p => p.Name == property).FirstOrDefault();
            return prop;
        }
        catch (Exception ex)
        {
            return new VendorProperty("Error", ex.ToString());
        }
    }

    public void ActionCompletedHandler(ActionEventArgs<Vendor> args)
    {
    }

        public class Vendor
    {
        private List<VendorProperty> properties = new List<VendorProperty> ();

        public string Id { get; set; }
        public string Name { get; set; }
        public List<VendorProperty> Properties { get { return this.properties; } set { this.properties = value; } }

        public Vendor()
        {
            Id = Guid.NewGuid().ToString();
        }

        public static ObservableCollection<Vendor> GetAllRecords()
        {
            ObservableCollection<Vendor> ret = new ObservableCollection<Vendor>();

            Vendor v = new Vendor() { Name = "Google" };
            v.Properties.Add(new VendorProperty("Ticker", "GOOGL"));
            v.Properties.Add(new VendorProperty("Status", "Active"));
            ret.Add(v);

            v = new Vendor() { Name = "Amazon" };
            v.Properties.Add(new VendorProperty("Ticker", "AMZN"));
            v.Properties.Add(new VendorProperty("Status", "Inactive"));
            ret.Add(v);

            v = new Vendor() { Name = "Microsoft" };
            v.Properties.Add(new VendorProperty("Ticker", "MSFT"));
            v.Properties.Add(new VendorProperty("Status", "Active"));
            ret.Add(v);

            return ret;
        }
    }
    public class VendorProperty
    {
        private string name;
        private string value;

        public string Name { get { return this.name; } set { this.name = value; } }
        public string Value { get { return this.value; } set { this.value = value; } }

        public VendorProperty(string name, string value)
        {
            Name = name;
            Value = value;
        }
    }

}