Add dynamic grid.

[jose luis barajas]

Hi

In your sample code in github about dynamic forms

https://github.com/SyncfusionExamples/blazor-dynamic-form

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

[Vignesh Natarajan]

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  

 

Sample: https://www.syncfusion.com/downloads/support/forum/160760/ze/DataGrid1983023100  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

[jose luis barajas]

Hi Vignesh

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

[Vignesh Natarajan]

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