1. Home
  2. Forum
  3. Blazor
  4. EjsGrid GridColumn EditType=DropDownEdit ForeignKeyField Assistance Needed

EjsGrid GridColumn EditType=DropDownEdit ForeignKeyField Assistance Needed

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


8 Replies
VN Vignesh Natarajan Syncfusion Team July 17, 2019 01:34 PM UTC

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.  
 
 
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. 


ET ebi torabi July 17, 2019 08:43 PM UTC

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



ET ebi torabi July 18, 2019 06:27 AM UTC

Meanwhile, I use the database first method
Scaffold-DbContext "Server=(local);Database=NewshaDB;Trusted_Connection=True" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

RN Rahul Narayanasamy Syncfusion Team July 18, 2019 11:00 AM UTC

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; 
 
} 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


ET ebi torabi July 18, 2019 03:31 PM UTC

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

VN Vignesh Natarajan Syncfusion Team July 19, 2019 07:35 AM UTC

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. 
 


ET ebi torabi replied to Vignesh Natarajan July 19, 2019 10:46 AM UTC

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

RS Renjith Singh Rajendran Syncfusion Team July 22, 2019 01:45 PM UTC

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, 

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. 


Loader.
Up arrow icon