Editable/Sortable/Filterable Grid with EF core CRUD

Thread ID:	Created:	Updated:	Platform:	Replies:
148148	Oct 8,2019 06:35 AM UTC	Oct 10,2019 10:30 AM UTC	Blazor	1

Subscribe to this post

Tags: Grid

manuel

Asked On October 8, 2019 06:35 AM UTC

Hi,

we are evaluating your products, but we cannot create a simple fully working grid.

I enclose here a sample based on a project from other forum user (Asp.net/EF core 3.0) . The sample is based on Northwind db and the relation Product<->Category.

<EjsGrid TValue="Product" DataSource="@Products" @ref="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List<Object>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

<GridColumn Field=@nameof(Product.CategoryId)

ForeignKeyValue="@nameof(Category.CategoryName)"

ForeignKeyField="@nameof(Category.CategoryId)"

EditType="EditType.DropDownEdit"

DataSource="@Categories"

HeaderText="Category2" Width="150"></GridColumn>

</GridColumns>

</EjsGrid>

@code{

public static IQueryable<Product> Products { get; set; }

public static IList<Category> Categories { get; set; }

protected override void OnInitialized()

{

Products = db.Products.Include("Category").OrderBy(g => g.ProductName);

Categories = db.Categories.ToList<Category>();

}

public void OnComplete(ActionEventArgs<Product> Args)

{

if (Args.RequestType.ToString() == "Save")

{

//Update

db.SaveChanges();

}

else if (Args.RequestType.ToString() == "Delete")

{

//Delete

}

The sorting and paging functionalities work fine, but we got several problems that we cannot figure out.

1. if I try to filter the ProductName the grid display the waiting icon but nothing happens (see here)

2. the same if I try to edit one row (see here)

3. the Category column is ok but If I try to filter instead to remove the item simply hide the category name from the column (see here)

4. I tried also without ForeingKey and ForeignValue but in this case the Category column is empty (see here)

I hope in your help and I would be grateful to you if you could provide me a fully working sample.

Thanks

Attachment: BlazorApp1_b85667c.zip

Reply | Reply with quote

Renjith Singh Rajendran [Syncfusion]

Replied On October 10, 2019 10:30 AM UTC

Hi Manuel,

Thanks for contacting Syncfusion support.

Query 1 && 2 : if I try to filter the ProductName the grid display the waiting icon but nothing happens (see here) && the same if I try to edit one row

We could see that you have bound IQueryable typed data to Grid. This is the cause for the reported problem. We have considered this as a usability feature improvement “Problem with DataOperations when bind IQueryable data to Grid”, and logged a task for the same.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Link : https://www.syncfusion.com/feedback/9416/problem-with-dataoperations-when-bind-iqueryable-data-to-grid

We have planned to implement this feature in our Volume 4, 2019 release. Until then we suggest you to bind List values to Grid to overcome the problem you are facing. We have modified the sample in which we have fetched the data from db and bound the List data to Grid. Please download the working sample from the link below,

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1502438666

Please refer the code below,

<EjsGrid TValue="Product" DataSource="@Products" @ref="Grid" ...>

...

</EjsGrid>

@code{

EjsGrid<Product> Grid;

public static IList<Product> Products { get; set; }

public static IList<Category> Categories { get; set; }

protected override void OnInitialized()

{

Products = db.Products.Include("Category").OrderBy(g => g.ProductName).ToList();

Categories = db.Categories.ToList<Category>();

}

...

}

Query 3 : the Category column is ok but If I try to filter instead to remove the item simply hide the category ...

We have analyzed your query. The problem is because of having duplicate values in the ForeignKeyField(CategoryId) values. It is not recommended to have duplicate values for a foreign key column. So we suggest you to bind the unique values for the foreign key column in Grid to overcome the problem you are facing.

Query 4 : 4. I tried also without ForeingKey and ForeignValue but in this case the Category column is empty (see here)

We have analyzed the code. If you want to bind complex data to Grid, then we suggest you to use the below code.

<GridColumn Field="Category.CategoryName" HeaderText="Category" Width="150" EditType="EditType.DropDownEdit" ></GridColumn>

Please get back to us if you need further assistance.

Regards,

Renjith Singh Rajendran.

Reply | Reply with quote

Editable/Sortable/Filterable Grid with EF core CRUD

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US