EjsGrid GridColumn EditType=DropDownEdit ForeignKeyField Assistance Needed

[ebi torabi]

Hello. I just want to use web api I get the database from the database, but it does not appear in the grid, combo box, and drop down list.

(blazor p6 hosted core)

(Syncfusion.EJ2.Blazor 17.2.0.34 beta)

Server.Startup----------------------------------------------------------------------

 public void ConfigureServices(IServiceCollection services)

        {

            services.AddMvc().AddNewtonsoftJson();

            services.AddMvc().AddNewtonsoftJson(options => {

                options.SerializerSettings.ContractResolver = new DefaultContractResolver();

            });

            services.AddResponseCompression(opts =>

            {

                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(

                    new[] { "application/octet-stream" });

            });

        }

------------------------------------------------------------------

@page "/orders"
@using Newtonsoft.Json;

<div class="container-fluid">
    <div class="row pt-3">
        <div class="col-12">
            <EjsGrid ref="orderGrid" id="orderGrid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Height="100%" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
                <EjsDataManager ref="orderDataManager" CrossDomain="true" Url="http://localhost:5000/api/v2/order" Adaptor="Adaptors.WebApiAdaptor">
                </EjsDataManager>
                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
                <GridFilterSettings Type="@Syncfusion.EJ2.RazorComponents.Grids.FilterType.CheckBox"></GridFilterSettings>
                <GridPagesettings pageCount="5" PageSize="15"></GridPagesettings>
                <GridColumns>
                    <GridColumn Field="OrderLineId" HeaderText="Order Line Id" ISPrimaryKey="true" IsIdentity="true" Visible="false" Width="30" validationRules="@(new { required= true, maxLength=6})"></GridColumn>
                    <GridColumn Field="StyleCode" HeaderText="Code" Width="20" validationRules="@(new { required= true, maxLength=20})"></GridColumn>
                    <GridColumn Field="ItemDescription" HeaderText="Name" Width="40" validationRules="@(new { required= true, maxLength=50})"></GridColumn>
                    <GridColumn Field="ClassCode" HeaderText="Class" Width="20" validationRules="@(new { required= true, maxLength=20})"></GridColumn>
                    <GridColumn Field="Month" HeaderText="Month" Width="15" EditType="dropdownedit" ForeignKeyField="value" ForeignKeyValue="text" DataSource="@months" ></GridColumn>
                </GridColumns>
            </EjsGrid>
        </div>
    </div>
</div>

@code

{

protected override async Task OnInitAsync()

{

   

 

months

= await Http.GetJsonAsync<List<//I can only use remote data

month

>>("api/

month

");

}

[Vignesh Natarajan]

Hi Ebi Torabi,   

 

Thanks for contacting Syncfusion support.  

 

Query: “ I just want to use web api I get the database from the database, but it does not appear in the grid, combo box, and drop down list.” 

 

From your query we understand that you are facing issue while binding the data to Grid from WebAPI service. We have prepared a sample as per your suggestion and we are able to bind dataSource to Grid.  

Kindly refer the below link for the sample.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/145989/ze/EFGrid1553600250  

 

If you are still facing the issue, kindly share the following details  

 

1. Screenshot of Network tab how the results were returned from controller.
2. If not share more details about your issue.
3. Screenshot of script error in console window (if any).
4. Ensure that value of foreignkey column must match with the grid dataSource.
5. Share your Nuget package version.  
6. Share the video demonstration of the issue with replication procedure.  

 

Requested details will be helpful for us to validate the reported issue at our end and provide the solution as soon as possible. 

 

Regards, 

Vignesh Natarajan. 

[ebi torabi]

Hi Vignesh Natarajan,Thank you very much for your quick response. My goal was to get the drop-down list data from another table and display the name of the month instead of id using ForeignKey.

@page "/orders"
@using Newtonsoft.Json;

<div class="container-fluid">
    <div class="row pt-3">
        <div class="col-12">
            <EjsGrid ref="orderGrid" id="orderGrid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Height="100%" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
                <EjsDataManager ref="orderDataManager" CrossDomain="true" Url="http://localhost:5000/api/v2/order" Adaptor="Adaptors.WebApiAdaptor">
                </EjsDataManager>
                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
                <GridFilterSettings Type="@Syncfusion.EJ2.RazorComponents.Grids.FilterType.CheckBox"></GridFilterSettings>
                <GridPagesettings pageCount="5" PageSize="15"></GridPagesettings>
                <GridColumns>
                    <GridColumn Field="OrderLineId" HeaderText="Order Line Id" ISPrimaryKey="true" IsIdentity="true" Visible="false" Width="30" validationRules="@(new { required= true, maxLength=6})"></GridColumn>
                    <GridColumn Field="StyleCode" HeaderText="Code" Width="20" validationRules="@(new { required= true, maxLength=20})"></GridColumn>
                    <GridColumn Field="ItemDescription" HeaderText="Name" Width="40" validationRules="@(new { required= true, maxLength=50})"></GridColumn>
                    <GridColumn Field="ClassCode" HeaderText="Class" Width="20" validationRules="@(new { required= true, maxLength=20})"></GridColumn>
                   

<GridColumn Field="Month" HeaderText="Month" Width="15" EditType="dropdownedit" ForeignKeyField="value" ForeignKeyValue="text" DataSource="@months" ></GridColumn>

                </GridColumns>
            </EjsGrid>

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

@code

{

protected override async Task OnInitAsync()

{

   

 months= await Http.GetJsonAsync<List<month>>("api/month");

}

[ebi torabi]

Meanwhile, I use the database first method

Scaffold-DbContext "Server=(local);Database=NewshaDB;Trusted_Connection=True" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

[Rahul Narayanasamy]

Hi Ebi Torabi, 

 

Thanks for your update. 

 

Query: My goal was to get the drop-down list data from another table and display the name of the month instead of id using ForeignKey. 

 

Based on your requirement, we have prepared a sample. Here, we have bind foreign key datasource to First Name column and display FirstName value instead of EmployeeID. Please find the below code example and sample for your reference. 

 

[code example] 

@page "/" 

@using Syncfusion.EJ2.Blazor.Grids 

@using Syncfusion.EJ2.Blazor.Data 

 

<h1>Hello, world!</h1> 

 

<EjsGrid @ref="@grid" AllowPaging="true" AllowSorting="true" AllowGrouping="true" AllowFiltering="true" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel"})"> 

    <GridPageSettings PageSize="4"></GridPageSettings> 

    <EjsDataManager Url="/api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" IsIdentity="true" TextAlign="@TextAlign.Right" Width="90"></GridColumn> 

        <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="90"></GridColumn> 

        <GridColumn Field="EmployeeID" HeaderText="First Name" ForeignKeyField="EmployeeID" ForeignKeyValue="FirstName" DataSource="@(new Syncfusion 

            .EJ2.Blazor.DataManager(){ Url = "api/Employee", Adaptor= Syncfusion.EJ2.Blazor.Adaptors.WebApiAdaptor})" Width="90"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

 

@functions{ 

 

    EjsGrid grid; 

 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWebapiFkey131497258  

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul 

[ebi torabi]

hi Rahul.

Thanks so much for your example. In this example

 when we want  Add entity in this grid,if "IsIdentity" Is "true" , After clicking on the "Update" button, the "Post" method runs

else if "IsIdentity" Is "false"  "Update" button does not submited.

Please share this problem with me, if possible, because I have this problem in other projects as well

Attachment: add_7d8f804a.rar

[Vignesh Natarajan]

Hi Ebi,  

 

Query: “when we want  Add entity in this grid,if "IsIdentity" Is "true" , After clicking on the "Update" button, the "Post" method runs else if "IsIdentity" Is "false"  "Update" button does not submited.” 

 

In the provided sample, OrderID column is the IsPrimaryKey column. So while adding its value must be sent to server for proper functioning of CRUD operation. When PrimaryKey column is IsIdentity column, then post will be sent to server and value for PrimaryKey column will be auto generated from our source. 

If you disable the IsIdentity column, then you need to pass the value for OrderID (primaryKey column) while sending POST request.  We suspect that value for primaryKey is not sent to server properly, hence reported issue is occurred. So kindly give the value for primaryKey column while adding.  

Still you are facing the issue share the video demonstration of reported issue with replication procedure.   

Regards, 

Vignesh Natarajan. 

 

[ebi torabi]

Hi Ebi,  

 

Query: “when we want  Add entity in this grid,if "IsIdentity" Is "true" , After clicking on the "Update" button, the "Post" method runs else if "IsIdentity" Is "false"  "Update" button does not submited.” 

 

In the provided sample, OrderID column is the IsPrimaryKey column. So while adding its value must be sent to server for proper functioning of CRUD operation. When PrimaryKey column is IsIdentity column, then post will be sent to server and value for PrimaryKey column will be auto generated from our source. 

If you disable the IsIdentity column, then you need to pass the value for OrderID (primaryKey column) while sending POST request.  We suspect that value for primaryKey is not sent to server properly, hence reported issue is occurred. So kindly give the value for primaryKey column while adding.  

Still you are facing the issue share the video demonstration of reported issue with replication procedure.   

Regards, 

Vignesh Natarajan. 

 

Please consider attached video

Attachment: video_c4794d5d.rar

[Renjith Singh Rajendran]

Hi Ebi, 

We have analyzed the video which you have shared with us. We suggest you to set the “nullable” type for the “IsIdentity” column. And also handle the auto increment of the primary key column value at server side to overcome the problem you are facing. We have prepared a sample based on this requirement, and we are attaching the sample for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/145989-1389995661 

Please refer the code below, 

 

 

<EjsGrid @ref="@grid" ...> 

    <GridPageSettings PageSize="4"></GridPageSettings> 

    <EjsDataManager Url="/api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

   <GridColumns> 

        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" IsIdentity="true" TextAlign="@TextAlign.Right" Width="90"></GridColumn> 

        ... 

   </GridColumns> 

</EjsGrid> 

 

        public static List<Orders> order = new List<Orders>(); 

                 ... 

        [HttpPost] 

        public void Post([FromBody]Orders Order) 

        { 

            // increment the primaryKey value at server side 

            Order.OrderID = order[order.Count - 1].OrderID + 1; 

            Orders.GetAllRecords().Insert(0, Order); 

        } 

 

        public class Orders 

        { 

            ... 

            //Set the nullable type for “OrderID” column – isIdentity Column 

           public long? OrderID { get; set; } 

            public string CustomerID { get; set; } 

            ... 

       } 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.