1. Home
  2. Forum
  3. Blazor
  4. Grid Error

Grid Error

I created a Blazor webasm application using the standard Visual Studio 2019 Blazor template.

I followed the steps listed HERE for getting started with Blazor.

I also added a reference to Syncfusion.Blazor.Templates, because I was getting a 404 trying to load the "_content/Syncfusion.Blazor.Themes/bootstrap4.css" file (see step 5 of the Syncfusion getting started document).

I added the following code to the index.razor page of the WebApplication1.Client project:

@page "/"
@using WebApplication1.Shared
@inject NavigationManager NM 

<br />
<br />
<br />
<br />

<SfGrid ID="grid"
        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"
        AllowPaging="true"
        TValue="WeatherForecast"
        Height="250px">
    <SfDataManager Url=@($"{NM.BaseUri}WeatherForecast") CrossDomain="true" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
    <GridPageSettings PageCount="5"></GridPageSettings>
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" ShowDeleteConfirmDialog="true"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(WeatherForecast.Id) IsPrimaryKey="true" Visible="false"></GridColumn>
        <GridColumn Field=@nameof(WeatherForecast.Date) HeaderText="Date" Width="120"></GridColumn>
        <GridColumn Field=@nameof(WeatherForecast.Summary) HeaderText="Summary" Width="150"></GridColumn>
        <GridColumn Field=@nameof(WeatherForecast.TemperatureC) HeaderText="TemperatureC" Width="130"></GridColumn>
        <GridColumn Field=@nameof(WeatherForecast.TemperatureF) HeaderText="TemperatureF" Width="140"></GridColumn>
    </GridColumns>
</SfGrid>


When I run the project I see no data in the grid. I also see that the Blazor error toast is displayed.

When I press F12, on my browser, I see that the error is: 

Unhandled exception rendering component: This operation is only valid on generic types.
System.InvalidOperationException: This operation is only valid on generic types.


Please help me understand what the issue is. 

I've included my sample application, which demonstrates the issue.








Attachment: WebApplication1_9177f28a.zip

1 Reply 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team February 18, 2021 10:01 AM UTC

Hi Martin,  
 
Thanks for contacting Syncfusion support.  
 
Query: “When I run the project I see no data in the grid. I also see that the Blazor error toast is displayed. When I press F12, on my browser, I see that the error is: ” 
 
We have validated the reported issue and we are able to reproduce the reported issue in provided sample. This is because controller [Weatherforecast] page is configured wrongly for URL Adaptor. You have used URL adaptor to bind datasource to Grid component. For UrlAdaptor, POST request will be sent to server and data has to be returned in form of Result and Count.  
 
Refer the modified code example of WeatherforecastController. 
 
[ApiController]     
    public class WeatherForecastController : ControllerBase 
    { 
        private static readonly string[] Summaries = new[] 
        { 
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" 
        }; 
  
        private readonly ILogger<WeatherForecastController> logger; 
  
        public WeatherForecastController(ILogger<WeatherForecastController> logger) 
        { 
            this.logger = logger; 
        } 
        public static List<WeatherForecast> order = new List<WeatherForecast>(); 
        [HttpPost] 
        [Route("[controller]")] 
        public object Post([FromBody] DataManagerRequest dm) 
        { 
            if (order.Count == 0) 
            { 
                BindDataSource(); 
            } 
            IEnumerable DataSource = order.ToList(); 
            if (dm.Search != null && dm.Search.Count > 0) 
            { 
                DataSource = DataOperations.PerformSearching(DataSource, dm.Search);  //Search 
            } 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted); 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
            } 
            int count = DataSource.Cast<WeatherForecast>().Count(); 
            if (dm.Skip != 0) 
            { 
                DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);   //Paging 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = DataOperations.PerformTake(DataSource, dm.Take); 
            } 
            return new { result = DataSource, count = count }; 
  
        } 
        private void BindDataSource() 
        { 
            var rng = new Random(); 
            if (order.Count == 0) 
            { 
                order = Enumerable.Range(1, 50).Select(index => new WeatherForecast 
                { 
                    Id = rng.Next(), 
                    Date = DateTime.Now.AddDays(index), 
                    TemperatureC = rng.Next(-20, 55), 
                    Summary = Summaries[rng.Next(Summaries.Length)] 
                }).ToList(); 
            } 
        } 
 
 
Kindly download the modified sample from below  
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries.      
 
Regards, 
Vignesh Natarajan 


Marked as answer
Loader.
Up arrow icon