1. Home
  2. Forum
  3. Blazor
  4. Data grid blazor adapter

Data grid blazor adapter

Somebody should please provide me with a guide or example on how to use blazor adapter in SfDataManager. I just came across this feature, but have found no guide or example on how to implement it. Any assistance on this would be greatly appreciated.

Thanks in advance.

6 Replies
RN Rahul Narayanasamy Syncfusion Team September 9, 2020 12:58 PM UTC

Hi Peter, 

Greetings from Syncfusion. 

Query: Somebody should please provide me with a guide or example on how to use blazor adapter in SfDataManager. I just came across this feature, but have found no guide or example on how to implement it 

We have validated your query and we would like to inform you that by default, SfDataManager uses BlazorAdapator when you provide List of data to DataSource property of Grid. find the below code snippets and documentation for your reference. 

 
<SfGrid DataSource="@Orders" AllowPaging="true"> 
    <GridPageSettings PageSize="5"></GridPageSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
 
    protected override void OnInitialized() 
    { 
        Orders = Enumerable.Range(1, 75).Select(x => new Order() 
        { 
            OrderID = 1000 + x, 
            . . . 
        }).ToList(); 
    } 
 
    public class Order 
    { 
        . . . 
    } 
} 

 

Reference: 

please let us know if you have any concerns. 

Regards, 
Rahul 


PE Peter September 9, 2020 01:51 PM UTC

If I am fetching data from database with EF Core, and I try to perform any crud operation, the application is going to crash and log "Stack Overflow". I guess there is something I'm not doing right in such case.

Attachment: concrs_db4d0778.zip

RN Rahul Narayanasamy Syncfusion Team September 10, 2020 02:34 PM UTC

Hi Peter, 

We have validated your screenshot with our end and we need more information regarding the reported problem. Could you please share the below details. It will be helpful to validate and provide a better solution. 

  • Bind OnActionFailure event to Grid and share error details if any error throws.
  • Full Grid code snippets.
  • Share the details about how you are performing the CRUD operations.

Regards, 
Rahul 


PE Peter September 11, 2020 10:19 AM UTC

What I've observed so far is that SfGrid support only primitive data types (int, string, float, enums, etc...) for use as the data model. For instance in the case of the common use case 'Order' class, if we have a member of Order whose type is a class, the entire application will crash when we try perform any operation.

public class Customer
    { 
        . . . 
    } 

public class Order 
    { 
        public string OrderID { get; set; }
        
        public Customer Customer { get; set; }
    } 

Customer property of type Customer class could be depicting a one to one relationship in used in entity framework, but then SfGrid does not like class types according to what I've observed so far.

PE Peter September 11, 2020 11:54 AM UTC

Just got this from the document and it solves the problem of class type properties in a data model

Complex data binding

You can achieve complex data binding in the datagrid by using the dot(.) operator in the column.field. In the below examples Name.FirstName and Name.LastName are complex data.

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Employees" Height="315">
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="EmployeeID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="Name.FirstName" HeaderText="First Name" Width="150"></GridColumn>
        <GridColumn Field="Name.LastName" HeaderText="Last Name"Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code{
    public List<EmployeeData> Employees { get; set; }

    protected override void OnInitialized()
    {
    Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData()
    {
        EmployeeID = x,
        Name = new EmployeeName() {
            FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],
            LastName =(new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)]
        },
        Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager",
                                              "Inside Sales Coordinator" })[new Random().Next(4)],
    }).ToList();
    }

    public class EmployeeData
    {
        public int? EmployeeID { get; set; }
        public EmployeeName Name { get; set; }
        public string Title { get; set; }
    }

    public class EmployeeName
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

RN Rahul Narayanasamy Syncfusion Team September 14, 2020 04:54 AM UTC

Hi Peter, 

Thanks for the update. 

We are happy to hear that you have found the solution by yourself. 

Yes. For complex data binding , you can achieve your requirement by using the dot(.) operator in the column.field. Please find the below reference. 

Reference: 

Please get back to us if you need further assistance. 

Regards, 
Rahul 


Loader.
Up arrow icon