EjsGrid GridColumn EditType=DropDownEdit ForeignKeyField Assistance Needed

ebi torabi

Asked On July 16, 2019 07:51 PM UTC

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

");

}

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

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

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

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

Screenshot of Network tab how the results were returned from controller.
If not share more details about your issue.
Screenshot of script error in console window (if any).
Ensure that value of foreignkey column must match with the grid dataSource.
Share your Nuget package version.
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.

Reply | Reply with quote

ebi torabi

Replied On 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>

</GridColumns>
</EjsGrid>

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

@code

{

protected override async Task OnInitAsync()

{

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

}

Reply | Reply with quote

ebi torabi

Replied On 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

Reply | Reply with quote

Rahul Narayanasamy [Syncfusion]

Replied On 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;

}

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

Please get back to us if you need further assistance.

Regards,

Rahul

Reply | Reply with quote

ebi torabi

Replied On 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

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

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

Reply | Reply with quote

ebi torabi

Replied On 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

Reply | Reply with quote

Renjith Singh Rajendran [Syncfusion]

Replied On 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,

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

Please refer the code below,

...

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
145989	Jul 16,2019 07:51 PM UTC	Jul 22,2019 01:45 PM UTC	Blazor	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US