Articles in this section
Category / Section

How to resolve the issue grid rendered with blank rows and correct record count.

1 min read

Problem

           In ASP.NET Core the Grid will be rendered with blank rows and also there will be no script error / reference error will be thrown in console window.

 

 

Cause:

In ASP.Net Core the camel case issue cause to render the Grid with empty rows. This is because while serializing the JSON object the columns first letter will not be serialized properly (converted to lower case) which makes the column name different in server side and client side.

 

Solution:

To overcome this issue kindly follow either of the below solutions

 

  1. Insert the below suggested code into your startup.cs file of your application and run the application.

 

public void ConfigureServices(IServiceCollection services)  
        {  
            // Add framework services.  
            ...  
  
            services.AddMvc()  
            .AddJsonOptions(x =>  
            {  
                x.SerializerSettings.ContractResolver = null;  
            });  
                   ...  
        }  
 

   

 

Refer the below screenshot for the full code snippet of the suggested solution.

 

 

  

  

http://www.syncfusion.com/downloads/support/directtrac/199652/797641307_e4638df8.PNG

 

2. You can also render the Grid by specifying the columns field name in camelCase. (i.e.) in server side the column name will be defined as OrderID, CustomerID. But while rendering the Grid, specify the Field property as ordedID, customerID. 

 

<ej-grid id="Grid" allow-paging="true” action-complete="onComplete">
    <e-datamanager json="(IEnumerable<object>)ViewBag.datasource" update-url="NormalUpdate" insert-url =”NormalInsert” remove-url ="NormalDelete" adaptor="remoteSaveAdaptor" />   
        <e-columns>
        <e-column field="orderID" header-text="Order ID" text-align="Right" width="90"  is-primary-key="true"></e-column>
        <e-column field="customerID" header-text="Customer ID" width="90" ></e-column>
        <e-column field="employeeID" header-text="Employee ID" width="80" text-align="Right" ></e-column>
        <e-column field="freight" header-text="Freight" text-align="Right” format="{0:C}"  width="80"  ></e-column>
        <e-column field="shipCity" header-text="Ship Name" width="150" ></e-column>
     </e-columns>
</ej-grid>
 
public class OrderDetails
        {
            public OrderDetails()
            {
 
            }
            public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, string ShipCity)
            {
                this.OrderID = OrderID;
                this.CustomerID = CustomerId;
                this.EmployeeID = EmployeeId;
                this.Freight = Freight;
                this.ShipCity = ShipCity;
            }
 
            public int? OrderID { get; set; }
            public string CustomerID { get; set; }
            public int? EmployeeID { get; set; }
            public double? Freight { get; set; }
            public string ShipCity { get; set; }
        }
    }

 

 

Output Screenshot:

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied