1. Home
  2. Forum
  3. Blazor
  4. How to place synfusion control inside div tag dynamicallty

How to place synfusion control inside div tag dynamicallty

I have 15 syncfussion control inside <div> tag.

I have placed 3 control in each row using (div class="col-xs-4 col-sm-4 col-lg-4 col-md-4").

It works fine as per our requirement.I would like to know how to use 3 control in each row without using 

(<div lass="row">) 

That means.it should automatically create new row when three control is added (as per bootstrap we can create 12 columns in each row.).


Please check my below code and advise how to do this.

<table class="table">

            <tr>

                <th>

                    <div class="e-avatar e-avatar-xlarge image" style="height: 4.6cm;width: 100%;">

                        <img src="images/shoe1.jpg" alt="Image" />

                    </div>

                </th>

                <th style="width: 80%;">

                    <div class="row">

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='Sample StyleNo'></SfTextBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfComboBox TValue="string" TItem="SampleData" Placeholder="Product"></SfComboBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfComboBox TValue="string" TItem="SampleData" Placeholder="Buyer"></SfComboBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfComboBox TValue="string" TItem="SampleData" Placeholder="Gender"></SfComboBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='Buyer Style'></SfTextBox>

                        </div>

                    </div>

                    <br />

                    <div class="row">

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                    </div>

                    <br />

                    <div class="row">

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                    </div>

                    <br />

                    <div class="row">

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                            <SfTextBox Placeholder='First Name'></SfTextBox>

                        </div>

                    </div>

                    <br />

                </th>


            </tr>

        </table>





3 Replies
MK Muthukumar Kannan Syncfusion Team July 21, 2021 04:30 AM UTC

Hi Hassan, 

Thanks for contacting Syncfusion support. 

We have validated your query for “ Adding the Syncfusion controls inside div tag dynamically” at our end. Based on your shared information, we need some details from your end. So, could you please share the following details? 
 
  1. Do you want to render the controls(3 controls in a row) without using <div class = “row”> ?
  2. Or do you add that ‘<div class = “row”>’ dynamically when grouping the controls?
  3. And how many controls do you want to render in one row?  

The above details will help us to sort of the exact requirement and provide the solution. 
 
Please get back to us if you have any queries. 

Regards, 
Muthukumar K 


KI KINS July 21, 2021 06:25 AM UTC

Total 18 controls


First three row contain 3 control

Remaining  row contains 2 controls






JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 22, 2021 12:38 PM UTC

Hi Hassan, 

Thanks for Sharing the details. 

We have validated your query “Adding the Syncfusion controls inside div tag” with your shared information at our end. We would like to let you know that this can be achieved by using “<td>” inside “<div>” to render the rows. To positioning the Syncfusion controls in the desired location, you need to use HTML elements and appropriate styles(if required). For more details, please refer the below code and sample from the following. 
 
 
<table class="table"> 
    <tr> 
        <th> 
            <div class="e-avatar e-avatar-xlarge image" style="height: 4.6cm;width: 100%;"> 
                <img src="images/shoe1.jpg" alt="Image" /> 
            </div> 
        </th> 
 
        <th style="width: 80%;"> 
            <div> 
                <td> 
                    <SfComboBox TValue="string" TItem="SampleData" Placeholder="Product"></SfComboBox> 
                </td> 
                <td> 
                    <SfComboBox TValue="string" TItem="SampleData" Placeholder="Buyer"></SfComboBox> 
                </td> 
                <td> 
                    <SfComboBox TValue="string" TItem="SampleData" Placeholder="Gender"></SfComboBox> 
                </td> 
            </div> 
            <br /> 
            <div> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
            </div> 
            <br /> 
            <div> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
            </div> 
            <br /> 
            <div> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
                <td> 
                    <SfTextBox Placeholder='First Name'></SfTextBox> 
                </td> 
            </div> 
        </th> 
    </tr> 
</table> 
 
Please check the solution and let us know if you need any further assistance. 
 
Regards, 
Joshna L 


Loader.
Up arrow icon