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

Add and Edit in Cell Edit Template sample does not work

problem in Order.CustomerID cell
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid ModelType="@Model" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150">
            <EditTemplate>
                <EjsAutoComplete Value="@((context as Order).CustomerID)" DataSource="@Orders">
                    <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
                </EjsAutoComplete>
            </EditTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" Width="140" TextAlign="@TextAlign.Right"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="yMd" Type="ColumnType.Date" Width="160"></GridColumn>
    </GridColumns>
</EjsGrid>


@code{
    public List<Order> Orders { get; set; }

    public Order Model = new Order();

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

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

9 Replies

VN Vignesh Natarajan Syncfusion Team October 8, 2019 06:18 AM UTC

Hi Ebi Torabi,  

Greetings from Syncfusion support.  

Query: “Add and Edit in Cell Edit Template does not work” 

We are able to reproduce the reported issue at our end while preparing a sample using the code example. Cause of the issue is that ID property of AutoComplete is not defined. It is necessary to assign the ID property to template element and it must same as Field property of the Column name. Because based on ID value only, we will take the instance of the element to get value while saving.  

Refer the below code example.     

<EjsGrid ModelType="@Model" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    .                .                 .              .               .                .  
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"> 
            <EditTemplate> 
                <EjsAutoComplete ID="CustomerID" Value="@((context as Order).CustomerID)" DataSource="@Orders"> 
                    <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings> 
                </EjsAutoComplete> 
            </EditTemplate> 
        </GridColumn> 
.        .          .            .  
    </GridColumns> 
</EjsGrid> 

We have also logged an improvement task to correct our UG documentation. It will be refreshed online as soon as possible. 

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 



ET ebi torabi October 8, 2019 09:27 AM UTC

Hi Vignesh Natarajan

Thanks for your great support. But I want to display the CustomerName in the grid instead of the CustomerID

<EjsGrid ModelType="@Model" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add""Edit""Delete""Cancel""Update" })"> 
    .                .                 .              .               .                .  
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"> 
            <EditTemplate> 
                <EjsAutoComplete ID="CustomerID" Value="@((context as Order).CustomerID)" DataSource="@Orders"> 
                    <AutoCompleteFieldSettings Value="CustomerID"  Text="CustomerName">AutoCompleteFieldSettings> 
                EjsAutoComplete> 
            EditTemplate> 
        GridColumn> 
.        .          .            .  
    GridColumns> 
EjsGrid> 


VN Vignesh Natarajan Syncfusion Team October 9, 2019 11:22 AM UTC

Hi Ebi Torabi,  

Thanks for the update.  

Query: “Thanks for your great support. But I want to display the CustomerName in the grid instead of the CustomerID 
 
We understand that you need to render the AutoComplete component with text and value pair inside EditTemplate. But AutoComplete does not have support for text and value pair support. Instead we suggest you to achieve your requirement using EjsComboBox control which is similar to AutoComplete control.  

While using the ComboBox control with text and value pair, it is advised to use foreign key column in Grid. (i.e.) while editing, ComboBox control will render the data in form of text and value pair. Similarly ForeignKey column will display the data in form of text and value.  

Refer the below code example.  

<EjsGrid DataSource="@Orders" @ref="Grid" ModelType="@Model" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
        <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 
        <GridColumns> 
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
            <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"> 
                <EditTemplate> 
                    @{                         
                    <EjsComboBox ID="EmployeeID" Value="@((context as Order).EmployeeID)" TValue="int?" DataSource="@Employees"> 
                        <ComboBoxFieldSettings Text="FirstName" Value="EmployeeID"></ComboBoxFieldSettings> 
                    </EjsComboBox> 
                    } 
                </EditTemplate> 
            </GridColumn> 
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="yMd" 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> 


For your convenience we have prepared a sample which can be downloaded from below  


Refer our UG documentation for your reference 



Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 



ET ebi torabi October 9, 2019 09:10 PM UTC

Hi.Unfortunately in your example, the Employee Name column is not loaded in the Add operation


VN Vignesh Natarajan Syncfusion Team October 10, 2019 09:53 AM UTC

Hi Ebi Torabi, 

Sorry for the inconvenience caused.  

Query: “Unfortunately in your example, the Employee Name column is not loaded in the Add operation 

We have modified the sample to render the dropdownlist properly while adding a record. Previously while adding, context will return value as null since ModelType is defined wrongly. Hence the reported issue occur. Kindly download the modified sample from below.  


We have modified the below highlighted value. 

<EjsGrid DataSource="@Orders" @ref="Grid" ModelType="@Model" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    .                 .               .                  .              .         .  
</EjsGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    EjsGrid<Order> Grid; 
    public Order Model = new Order(); 
    public List<EmployeeData> Employees { get; set; } 
   
    } 
     
Please get back to us if you have any concern. 

Regards, 
Vignesh Natarajan. 



VI vijaymohan October 31, 2019 02:15 PM UTC

Unfortunately in your given example, the previous added row Employee Name column is not loaded when Add new record.


VN Vignesh Natarajan Syncfusion Team November 1, 2019 09:15 AM UTC

Hi Vijay,  

Greetings from Syncfusion support. 

Query: “the previous added row Employee Name column is not loaded when Add new record 

We suspect that you are facing issue with Employee Name column while adding a record. We have analyzed the provided sample by adding the record multiple time and we are not able to reproduce the reported issue at our end. For your convenience we have prepared a video demonstration how we have tried to reproduce the issue at our end.  


After referring the video, if you still have queries kindly get back to us with exact replication procedure along with video demonstration.  

Note: we have ensured the reported query in latest version also by upgrading the sample to latest Nuget package 17.3.0.21- beta. 

Regards, 
Vignesh Natarajan. 



VI vijaymohan November 1, 2019 10:24 AM UTC

Dear Sir,

Thank You. Given Video does not have any content.

Regards
Vijay


VN Vignesh Natarajan Syncfusion Team November 4, 2019 09:05 AM UTC

Hi VijayMohan,  

Query: “Given Video does not have any content. 

Sorry for the inconvenience caused.  

Previously we have sent the file in .webm format. Now we have attached the video demonstration in mp4 format. Kindly download the video from below  


Please get back to us if you have any queries.  

Regards, 
Vignesh Natarajan. 


Loader.
Live Chat Icon For mobile
Up arrow icon