1. Home
  2. Forum
  3. Blazor
  4. Add dynamic grid.

Add dynamic grid.

Hi
In your sample code in github about dynamic forms


I am trying to add a Grid Component like this, first I add new property in the class

 public class EmployeeDetails
    {
        [Required]
        [Display(Name ="First Name")]
        [DataType(DataType.Text)]
        public string FirstName { get; set; }
       
        [Display(Name = "Last Name")]
        [DataType(DataType.Text)]
        public string LastName { get; set; }
        
        [Required]
        [Display(Name = "Email Address")]
        [DataType(DataType.EmailAddress)]
        [EmailAddress]
        public string Email { get; set; }
        
        [Required]
        [Display(Name = "PhoneNumber")]
        [DataType(DataType.PhoneNumber)]
        [Phone]
        public string PhoneNumber { get; set; }
        
        [Required]
        [Display(Name = "Date of Birth")]
        [DataType(DataType.Date)]
        public DateTime? DOB { get; set; }
        
        [Required]
        [DataType(DataType.Duration)]
        [Display(Name = "Total Experience")]
        [Range(0, 20, ErrorMessage = "The Experience range should be 0 to 20")]
        public decimal? TotalExperience { get; set; }
        
        [Required]
        [Display(Name = "Select a Country")]
        [DataType("DropdownList")]
        public string Country { get; set; }
        
        [Required]
        [Display(Name = "Select a City")]
        [DataType("ComboBox")]
        public string City { get; set; }
        
        [Required]
        [DataType(DataType.MultilineText)]
        [Display(Name = "Address")]
        public string Address { get; set; }

        // New component types
        [Display(Name = "Cities as grid")]
        [DataType("Grid")]
        public string Grid { get; set; }
    }

And then in RenderFragment CreateComponent(...)
{
..

I wrote this code...

 else if (attrList.CustomDataType == "Grid")
                        {
                            builder.OpenComponent(0, typeof(Syncfusion.Blazor.Grids.SfGrid<Cities>));
                            builder.AddAttribute(2, "Datasource", cities.GetCities());

                            //builder.AddMarkupContent(3, "\r\n    ");
                            //builder.OpenComponent<Syncfusion.Blazor.Grids.GridPageSettings>(4);
                            //builder.AddAttribute(5, "PageSize", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Int32>(5));
                            //builder.CloseComponent();
                            //builder.AddMarkupContent(6, "\r\n    ");
                            //builder.OpenComponent<Syncfusion.Blazor.Grids.GridColumns>(7);

                            builder.AddAttribute(8, "ChildContent", (Microsoft.AspNetCore.Components.RenderFragment)((_builder1) =>
                            {
                                _builder1.OpenComponent(9, typeof(Syncfusion.Blazor.Grids.GridColumn));
                                _builder1.AddAttribute(10, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>(nameof(Cities.Code)));
                                _builder1.CloseComponent();
                                _builder1.AddMarkupContent(11, "\r\n");

                                _builder1.OpenComponent(12, typeof(Syncfusion.Blazor.Grids.GridColumn));
                                _builder1.AddAttribute(13, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>(nameof(Cities.Name)));
                                _builder1.CloseComponent();
                                _builder1.AddMarkupContent(14, "\r\n");
                            }));
                        }

When run the sample obviously it doesn´t work. I´m trying to understand how it works and see how to add one grid dynamically

Can you helpme what is missing to make it works?






Attachment: apoyo_7a4b2446.rar

3 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team December 18, 2020 04:37 AM UTC

Hi Jose,  
 
Thanks for contacting Syncfusion support.  
 
Query: “When run the sample obviously it doesn´t work. I´m trying to understand how it works and see how to add one grid dynamically” 
 
We have analyzed the reported issue by preparing a sample using your code example and we are able to reproduce the reported script error at our end also. This is because GridColumn component has to enclosed in GridColumns compnent. But in the defined code example you have directly rendered GridColumn as ChildContent of Grid. Hence the reported issue occur.  
 
Please modify your solution as below to resolve your query. 
 
protected override void BuildRenderTree(RenderTreeBuilder builder) 
{             
    builder.OpenComponent<SfGrid<T>>(0); 
    builder.AddAttribute(1, nameof(AllowPaging), AllowPaging); 
    builder.AddAttribute(2, nameof(DataSource), DataSource); 
    builder.AddAttribute(3, "ChildContent", new RenderFragment(inner => 
    { 
        inner.OpenComponent<GridPageSettings>(5); 
        inner.AddAttribute(6, nameof(GridPageSettings.PageSize), Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Int32>(5)); 
        inner.CloseComponent(); 
  
        inner.OpenComponent<GridColumns>(8); 
        inner.AddAttribute(9, "ChildContent", (RenderFragment)((_builder1) => 
        { 
            _builder1.OpenComponent(10, typeof(Syncfusion.Blazor.Grids.GridColumn)); 
            _builder1.AddAttribute(11, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>("CustomerID")); 
            _builder1.CloseComponent(); 
            _builder1.AddMarkupContent(12, "\r\n"); 
  
            _builder1.OpenComponent(13, typeof(Syncfusion.Blazor.Grids.GridColumn)); 
            _builder1.AddAttribute(14, "Field", Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.String>("OrderID")); 
            _builder1.CloseComponent(); 
            _builder1.AddMarkupContent(15, "\r\n"); 
        })); 
        inner.CloseComponent(); 
    }));         
    builder.CloseComponent(); 
} 
  
For your convenience we have attached sample which can be downloaded from below  
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan  


Marked as answer
JL jose luis barajas December 18, 2020 07:36 PM UTC

Hi Vignesh

I really appreciate your support, I already saw your example and it has definitely helped me.


VN Vignesh Natarajan Syncfusion Team December 21, 2020 06:18 AM UTC

Hi Jose,  

Thanks for the update.  

We are glad to hear that our solution has helped you to achieve your requirement.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan   


Loader.
Up arrow icon