1. Home
  2. Forum
  3. Blazor
  4. How to create Dynamic syncfussion control based on Model

How to create Dynamic syncfussion control based on Model

I have used syncfussion control in razor component as static.I would like to know how to add syncfussion control in razor component dynamically based on model or dynamic object. 

For example 

OrederNo - string datatype
OrderDate - Date DataType
Customer - String Data Type
OrederQuntity - Int Data Type
Country : List

7 Replies 1 reply marked as answer
MK Muthukumar Kannan Syncfusion Team June 2, 2021 01:07 PM UTC

Hi Ismail, 

Thanks for contacting Syncfusion support. 

We have validating your requirement for rendering the Syncfusion blazor components as dynamically based on the Model’s property type.  However, we will update the further details and information about this within 2 business days until then we appreciate your patience. 

Please let us know if you have any concerns. 

Regards, 
Muthukumar K 


KI KINS June 2, 2021 01:50 PM UTC

OK noted 

Will wait for soonest reply

MK Muthukumar Kannan Syncfusion Team June 4, 2021 10:57 AM UTC

Hi Ismail, 

Thanks for your patience. 

We have validated your query for “Rendering the Syncfusion blazor components as dynamically based on the Model’s property type”. We would like to let you know that it can achievable by RenderFragment type parameter. Please refer the below code snippets by which we are rendered components based on the Model property’s type. 


@*Properties Iterated from 'Order' model*@ 
@foreach (PropertyInfo propertyInfo in order.GetType().GetProperties()) 
    { 
        // For String Type Model Properties 
        if (propertyInfo.PropertyType == typeof(string)) 
        { 
            @renderComponent(typeof(TextBox)); 
             
        } 
        // For Integer Type Model Properties 
         else if (propertyInfo.PropertyType == typeof(int) || propertyInfo.PropertyType == typeof(int?)) 
        { 
            @renderComponent(typeof(NumericTextBox)); 
             
        } 
        // For DateTime Type Model Properties 
         else if (propertyInfo.PropertyType == typeof(DateTime?) || propertyInfo.PropertyType == typeof(DateTime)) 
        { 
            @renderComponent(typeof(DatePicker)); 
        } 
        // For Generic Type Model Properties 
         else if(propertyInfo.PropertyType.IsGenericType && propertyInfo.PropertyType.GetGenericTypeDefinition() == typeof(List<>)) 
        { 
            @renderComponent(typeof(DropDownList)); 
        } 
 
      <br> 
    }  
 
@code { 
 
    Order order = new Order(); 
 
    private RenderFragment renderComponent(Type com) => builder => 
    { 
        builder.OpenComponent(0, com); 
        builder.CloseComponent(); 
    }; 
 
} 


We have attached the sample for the above requirement and find it from below. 


Also, please refer the below blogs and UG for Blazor Dynamic rendering. 




Please let us know if you have any queries. 

Regards, 
Muthukumar K 


KI KINS June 4, 2021 01:26 PM UTC

Thanks for quick support

How can I place control as three column in each row dynamically?? 

MK Muthukumar Kannan Syncfusion Team June 7, 2021 03:04 PM UTC

Hi Ismail, 

Thanks for your update. 

We have validated your requirement for dynamically adding the components in 3 columns in each row. Currently, we are facing some complexities in pass the div elements into the renderfragments. So, we need some more time to prepare the sample for your requirement. However, we will update the further details and information within 2 business days. Until then we appreciate your patience. 

Please let us know if you have any concerns. 

Regards, 
Muthukumar K     


KI KINS June 7, 2021 03:33 PM UTC

OK noted 

MK Muthukumar Kannan Syncfusion Team June 9, 2021 02:01 PM UTC

Hi Hassan, 

Thanks for your patience. 

Based on your requirement for “dynamically adding the components in 3 columns in each row”, we have prepared the workaround for that by using the renderfragments. Please check the below code snippets for that. 

Index.razor: 
 
 
@using System.Reflection 
 
@for (int i = 0; i < rowCount ; i++) 
{ 
    <div class="row"> 
        @for ( int j = 0; j < colCount; j++) 
        { 
            //For comparing purpose with Columns 
            int comp = 0; 
            @foreach (PropertyInfo Prop in order.GetType().GetProperties()) 
            { 
 
                if (!ComponentAlreadyPresent.Contains(Prop.Name) && comp < colCount) 
                { 
                    <Dynamic colCount="@colCount" Prop ="Prop" ></Dynamic> 
                    <br> 
                    ComponentAlreadyPresent.Add(Prop.Name); 
                    comp++; 
                } 
                 
            } 
 
            break; 
        } 
    </div> 
} 
 
    
@code { 
 
    Order order = new Order(); 
 
    List<string> ComponentAlreadyPresent = new List<string>(); 
 
    // Change value for set the Columns 
    public int? colCount = 3; 
 
    // Change value for set the Rows 
    public int? rowCount = 2; 
 
} 

 

Dynamic.razor: 


@using System.Reflection 
 
 
        @if (Prop.PropertyType == typeof(string)) 
        { 
            <div class=@colSplitClass> 
            @renderComponent(typeof(TextBox)) 
            </div> 
             
        } 
        // For Integer Type Model Properties 
         else if (Prop.PropertyType == typeof(int) || Prop.PropertyType == typeof(int?)) 
        { 
            <div class=@colSplitClass> 
            @renderComponent(typeof(NumericTextBox)) 
            </div> 
        } 
        // For DateTime Type Model Properties 
         else if (Prop.PropertyType == typeof(DateTime?) || Prop.PropertyType == typeof(DateTime)) 
        { 
            <div class=@colSplitClass> 
            @renderComponent(typeof(DatePicker)) 
            </div> 
        } 
        // For Generic Type Model Properties 
         else if(Prop.PropertyType.IsGenericType && Prop.PropertyType.GetGenericTypeDefinition() == typeof(List<>)) 
        { 
            <div class=@colSplitClass> 
            @renderComponent(typeof(DropDownList)) 
            </div> 
        } 
      <br> 
 
@code { 
 
    Order order = new Order(); 
 
     List<ColumnSplitClass> col = new List<ColumnSplitClass> { 
        new ColumnSplitClass() { Columns= 1, ColClass= "col-xs-12 col-sm-12 col-lg-12 col-md-12" }, 
        new ColumnSplitClass() { Columns= 2, ColClass= "col-xs-6 col-sm-6 col-lg-6 col-md-6" }, 
        new ColumnSplitClass() { Columns= 3, ColClass= "col-xs-4 col-sm-4 col-lg-4 col-md-4" }, 
        new ColumnSplitClass() { Columns= 4, ColClass= "col-xs-3 col-sm-3 col-lg-3 col-md-3" }, 
        new ColumnSplitClass() { Columns= 6, ColClass= "col-xs-2 col-sm-2 col-lg-2 col-md-2" }, 
        new ColumnSplitClass() { Columns= 12, ColClass= "col-xs-1 col-sm-1 col-lg-1 col-md-1" }, 
    }; 
 
    private RenderFragment renderComponent(Type com) => builder => 
    { 
        builder.OpenComponent(0, com); 
        builder.CloseComponent(); 
    }; 
 
    public string colSplitClass{ get; set; } 
 
    [Parameter] 
    public int? colCount{ get; set; } 
 
    [Parameter] 
    public PropertyInfo Prop{ get; set; } 
 
    protected override void OnInitialized() 
    { 
        foreach (ColumnSplitClass item in col) 
        { 
            if(item.Columns == colCount) 
            { 
                //Assign the Bootstrap column split class based on the columns 
                this.colSplitClass = item.ColClass; 
                break; 
            } 
        } 
 
    } 
 
} 


 

However, we have attached the sample for your references. Please find the sample below. 


Please get back to us if you need any assistance. 

Regards, 
Muthukumar k 


Marked as answer
Loader.
Up arrow icon