1. Home
  2. Forum
  3. Blazor
  4. Error loading a simple Grid

Error loading a simple Grid

using a simple grid in bootstrap the grid is loaded correctly, 
however if I insert a simple EjsGrid grid I get an error and it shows me the classic error with "Retry", 
I click on Retry and the grid loads correctly, I think it depends on the loading times of the grill
what am I doing wrong ?

Here the code 

-----
@page "/test"
@inject ProductServices _dbProduct
@using Syncfusion.EJ2.Blazor.Grids
<h3>List</h3>
@if (categories == null)
{

}
else
{
    <EjsGrid DataSource="@categories" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
        <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="0"></GridFilterSettings>
        <GridColumns>          
            <GridColumn Field="Name" HeaderText="Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        </GridColumns>
    </EjsGrid>
}

@code {
    List<Category> categories = new List<Category>();


    protected override async Task OnInitializedAsync()
    {
        categories = await _dbProduct.GetCategories();
    }
}

----
and the service 

        public async Task<List<Category>> GetCategories()
        {
            return await _context.Categories.ToListAsync();
        }    




12 Replies
WA Walter February 23, 2020 12:24 PM UTC

after many tests and tests I understand that the Grid does not like virtual properties in the DataAnnotation class, 
I will explain:
I had my Category Subcategory and Product classes linked together with [Foreign Key] and virtual properties like this:

public class Category
    {
        public Category ()
        {
            this.Subcategories = new HashSet <Subcategory> ();
            this.Products = new HashSet <Product> ();
        }
        [Key]
        public int Id {get; set; }
        public string Name {get; set; }
        public string Description {get; set; }

         public virtual ICollection <Subcategory> Subcategories {get; set; }
        public virtual ICollection <Product> Products {get; set; }
    }

is

public class Subcategory
    {
        public Subcategory ()
        {
            this.Products = new HashSet <Product> ();
        }
        [Key]
        public int Id {get; set; }
        public string Name {get; set; }
        public string Description {get; set; }
       
        public int? CategoryId {get; set; }
        [ForeignKey ( "CategoryId")]
        public virtual Category Category {get; set; }
       
        public virtual ICollection <Product> Products {get; set; }
    }

to make the grid work I had to remove the virtual properties and Foreign keys in this way

    public class Category
    {
      
        [Key]
        public int Id {get; set; }
        [Display (Name = "Name")]
        [Required (ErrorMessage = "The {0} field is required.")]
        [StringLength (60, ErrorMessage = "{0} must have at least {2} and a maximum of {1} characters.", MinimumLength = 1)]
        public string Name {get; set; }
        [Display (Name = "Description")]
        [StringLength (240, ErrorMessage = "{0} must have at least {2} and at most {1} characters.")]
        public string Description {get; set; }

    }

public class Subcategory
    {
      
        [Key]
        public int Id {get; set; }
        [Display (Name = "Name")]
        [Required (ErrorMessage = "The {0} field is required.")]
        [StringLength (60, ErrorMessage = "{0} must have at least {2} and a maximum of {1} characters.", MinimumLength = 1)]
        public string Name {get; set; }
        [Display (Name = "Description")]
        [StringLength (240, ErrorMessage = "{0} must have at least {2} and at most {1} characters.")]
        public string Description {get; set; }

        public int CategoryId {get; set; }
        public string CategoryName {get; set; }

    }

I hope it is not so but that there is an error on my part because it is not the optimal solution not to have those virtual properties

VN Vignesh Natarajan Syncfusion Team February 24, 2020 11:05 AM UTC

Hi Walter,  

Greetings from Syncfusion support.  

Query: “however if I insert a simple EjsGrid grid I get an error and it shows me the classic error with "Retry", && I hope it is not so but that there is an error on my part because it is not the optimal solution not to have those virtual properties” 
 
From your query we understand that you are facing issue in Grid while using virtual properties. We have prepared a sample using your code example and model class. We are not able to reproduce the reported issue at our end. Kindly refer the below sample which we have prepared using our latest version Nuget Package (17.4.0.50).  


After referring the sample, if you are still facing the issue kindly get back to us with following details.  

  1. Are you facing any exception from Grid in console window. if yes, share the screenshot of the error.
  2. Share your Nuget package version.
  3. If possible try to reproduce the reported issue in provided sample and get back to us.

Requested details will be helpful for us to validate the reported issue at our end ad provide solution as early as possible. 

Regards, 
Vignesh Natarajan. 


WA Walter February 24, 2020 03:07 PM UTC

Thanks a lot i retry 
Thanks 

VN Vignesh Natarajan Syncfusion Team February 25, 2020 08:31 AM UTC

Hi Walter,  

Thanks for the update.  

Kindly get back to us if you need any other assistance on this. 

Regards, 
Vignesh Natarajan. 


WA Walter February 26, 2020 08:41 PM UTC

your example with two tables created in that way worked, but in my case by setting real tables, I add a cascading record, it displays the records in the four tables and then it stops working, or I'm wrong to create the tables or there is a problem with blazor grids
Ti allego il mio progettino con database reale 

Attachment: BlazorAppSyncGrid1_ec3dc60.rar

VN Vignesh Natarajan Syncfusion Team February 27, 2020 11:04 AM UTC

Hi Walter, 

Thanks for sharing the sample.  

Query: “I add a cascading record, it displays the records in the four tables and then it stops working” 

From your query we suspect that you are facing issue while inserting a record in Grid externally. We have analyzed your sample and in the toolbar click event you are trying to insert new record to table in your database. And then refresh the datasource of the Grid with new data. Are you facing issue while assigning the modified DataSource to Grid again in toolbar click event?.  

Since we are not able to access the your database. We are not able to run the sample directly. We have modified your sample to load with empty dataSource on initial rendering. And on toolbar click we have inserted a record and refreshed the Grid. We are not able to reproduce the reported issue in the sample after modifying.  

Kindly refer the below sample for your reference 


Note: Also ensure that you have referred same version of Nuget package (17.4.0.51) and script, CSS files (17.4.51) . because in attached sample, you have referred the old version scripts.  

After referring the sample, if you are still facing the issue, kindly share more details about your issue.    

Regards, 
Vignesh Natarajan. 


WA Walter February 27, 2020 11:47 AM UTC

I updated the package and the cdn to .51
the problem persists, the data I have to take from a database and I have to store them, your example does not access the database so either I was wrong in setting the classes for the database or there is an error in the grid, you can use my example and before using it you can type PM> update-database to create the database and see that once the first records have been added if you then reload the page it no longer works


VN Vignesh Natarajan Syncfusion Team February 28, 2020 09:46 AM UTC

Hi Walter,  
 
Thanks for the update.  
 
Query: “before using it you can type PM> update-database to create the database and see that once the first records have been added” 
 
 Now we are able to reproduce the reported issue in the provided sample. The reported issue has occurred due to self-reference loop while serializing the datasource. In your model class you have used one model class inside the other similarly wise versa. This is the cause of the issue. To overcome the reported issue kindly include [JsonIgnore] for self referenced property in model class. 
 
Refer the below code example.  
 
public class Product 
    { 
  
        [Key] 
 . . .. . . . . . . 
        [JsonIgnore] 
        [ForeignKey("SubcategoryId")] 
        public virtual Subcategory Subcategory { get; set; } 
    } 
 
public class Category   {       public Category()       {                       this.Subcategories = new HashSet<Subcategory>();                }       [Key]. . . . . . . . . . .. .        [JsonIgnore]       [ForeignKey("SectorId")]       public virtual Sector Sector { get; set; }        public virtual ICollection<Subcategory> Subcategories { get; set; }         }
 
  
Similarly use JsonIgnore for other model properties also. For your reference we have modified the sample which can be downloaded from below  
 
 
Kindly get back to us is you have further queries.   
 
Regards, 
Vignesh Natarajan. 


WA Walter March 1, 2020 11:18 PM UTC

Hi Vignesh thanks a lot 
first step passed thanks to you for the support, you are very kind

another small mistake that maybe I'm wrong
attached I put an entire project on a page with 4 grids with complete CRUD, in the products table I would like to see the name of the category which is an external key and I used this Tag

     <GridColumn Field = "SubcategoryId" HeaderText = "Subcategory" ForeignKeyValue = "Name" DataSource = "@ subcategories" Width = "150"> </GridColumn>

but it doesn't show me anything

Walter

Attachment: BlazorAppSyncGrid1_2c9c7e65.rar

VN Vignesh Natarajan Syncfusion Team March 3, 2020 02:14 PM UTC

Hi Walter,  
 
Thanks for the update.  
 
Query: “another small mistake that maybe I'm wrong” 
 
We have analyzed the provided sample and we are able to reproduce the reported issue in it. We suggest you to set the ForeignKeyField property for the GridColumn to overcome the problem you are facing.  
 
If the field names in Grid’s Data(SubCategoryId) and Foreign key column’s data(CateogoryId) are different then it is a must to set the ForeignKeyField property to the Foreign key column in Grid. If those are same(as like in our documentation EmployeeID, then this property is not needed). We have added this in the notes section of the below documentation. 
 
 
We have attached the modified sample for your convenience, please download the sample from the link below, 
 
 
Refer the below code example for your reference 
 
 
<GridColumn Field="SubcategoryId" HeaderText="Sottocategoria" ForeignKeyValue="Name" ForeignKeyField="CategoryId" DataSource="@subcategories" Width="150"></GridColumn>
 
 
Please get back to us if you need further assistance.    
 
Regards, 
Vignesh Natarajan. 


WA Walter March 4, 2020 07:29 AM UTC

It works
I would like to say that I understood but I did not understand how it works, in fact I tried to do the same thing for the category but I did not succeed, if my structure is:
if Sector is the father of Category who is the father of Subcategory which is the father of product
in your last example
<GridColumn Field = "SubcategoryId" HeaderText = "Subcategory" ForeignKeyValue = "Name" ForeignKeyField = "CategoryId" DataSource = "@ subcategories" Width = "150"> </GridColumn>
this works for the product grid but if I want to put this in the subcategory grid and by logic I replace everything I get to insert it like this

<GridColumn Field = "CategoryId" HeaderText = "Category" ForeignKeyValue = "Name" ForeignKeyField = "ProductId" DataSource = "@ categories" Width = "150"> </GridColumn>

but it doesn't work, what's wrong?

VN Vignesh Natarajan Syncfusion Team March 5, 2020 12:28 PM UTC

Hi Walter, 

Query: “I would like to say that I understood but I did not understand how it works” 

Foreign Key Column feature is used to display different dataSource (i.e.) bind dataSource to column from another table. There are two types of ForeignKey column that can be configured to GridColumn. One is using ForeignKeyValue and DataSource property alone. Another method is using ForeignKeyField, ForeignKeyValue and DataSource property to GridColumn. Please find the details from below 

  1. First Approach.

In this approach we will define only DataSource property and ForeignKeyValue property to GridColumn. The foreignkey property from Grid table must matches with the primaryKey / unique value property from the Column data source table. Refer the below code example.  


// Grid datasource table 
   public class Order 
   { 
       public int? OrderID { get; set; } 
// foreignkey column 
       public int? EmployeeID { get; set; }
       public DateTime? OrderDate { get; set; } 
       public double? Freight { get; set; } 
   } 
   //column datasource table 
   public class EmployeeData 
   { 
// unique / primarykey 
       public int? EmployeeID { get; set; }
       public string FirstName { get; set; } 
   } 
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"></GridColumn> 




Both the Grid and Column data source has a similar property called EmployeeID. So there is no need for ForeignKeyField property. Column datasource will be matched with Grid data and its corresponding FirstName property will be displayed in Grid.   

  1. Second Approach
 
In this approach we need to use ForeignKeyField, ForeignKeyValue and DataSource properties. Sometimes foreignkey property from the grid table will not match the properties from the column data source table. At that time we can map any of the available properties from column table which has unique or primaryKey value using ForeignKeyField property of the Grid.  Refer the below code example.  

// Grid datasource table   public class Order   {       public int? OrderID { get; set; }       public int? EmployeeID { get; set; } // foreignkey column       public DateTime? OrderDate { get; set; }       public double? Freight { get; set; }   }   //column datasource table   public class EmployeeData   {       public int? EmpID { get; set; } // unique / primarykey       public string FirstName { get; set; }   }
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" ForeignKeyField="EmpID" DataSource="@Employees" Width="150"></GridColumn> 


In above definitions, both the model classes does not have similar properties. In this case we can map the EmpID property from Column table using ForeignKeyField property of GridColumn. Refer the code example highlighted above. 
 
So from your model classes we understand that both the foreignkey property from grid table differs with primary key property from column table. So we suggest you to follow the 2 approach (to define the ForeignKeyField) to achieve your requirement. Refer the below modified code example from below  

<GridColumn Field="CategoryId" HeaderText="Category" ForeignKeyValue="Name" ForeignKeyField="SectorId" DataSource="@categories" Width="150"> </GridColumn> 
  
If you are still having queries. Kindly get back to us.    

Regards, 
Vignesh Natarajan. 


Loader.
Up arrow icon