We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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"  })">
    <GridEvents OnActionComplete="@OnComplete" TValue="Product" />
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Product.ProductId) HeaderText="Id" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>
        <GridColumn Field=@nameof(Product.ProductName) HeaderText="Name" Width="150"></GridColumn>
        <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)
     
    <GridColumn Field=@nameof(Product.Category.CategoryName) HeaderText="Category" Width="150" EditType="EditType.DropDownEdit"  ></GridColumn>

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

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

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon