Add and Edit in Cell Edit Template sample does not work

[ebi torabi]

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; }
    }
}

[Vignesh Natarajan]

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. 

[ebi torabi]

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> 

[Vignesh Natarajan]

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  

Sample:  https://www.syncfusion.com/downloads/support/forum/148129/ze/BlazorApp1-230806454  

Refer our UG documentation for your reference 

UG: https://ej2.syncfusion.com/blazor/documentation/grid/columns/#foreign-key-column  

https://ej2.syncfusion.com/blazor/documentation/combobox/data-binding/?no-cache=1  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[ebi torabi]

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

[Vignesh Natarajan]

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.  

Sample: https://www.syncfusion.com/downloads/support/forum/148129/ze/BlazorApp11811337119  

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. 

[vijaymohan]

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

[Vignesh Natarajan]

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.  

Video: https://www.syncfusion.com/downloads/support/forum/148129/ze/AddRecord627967672  

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. 

[vijaymohan]

Dear Sir,

Thank You. Given Video does not have any content.

Regards

Vijay

[Vignesh Natarajan]

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  

Video: https://www.syncfusion.com/downloads/support/forum/148129/ze/Video359562252   

Please get back to us if you have any queries.  

Regards, 

Vignesh Natarajan.