Editable/Sortable/Filterable Grid with EF core CRUD

[manuel]

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]

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.