Using Bootstrap v4 to layout ej2 controls with ASP.NET Core Syncfusion

[David Hulse]

I am attempting to layout an ej2 grid on a page using bootstrap v4. It is not working yet. I have found a way to reduce the size of the grid using width="@("80%")" but now I'm trying justify-content-end the row with the grid in it so that the grid will be right justified and it won't budge. It is locked to the left-hand side of the page.

These are my questions:

Q1. Am I even supposed to be doing it like this? Is it even possible to use bootstrap for this?

Q2. How can I make it work?

    <div class="row justify-content-end">

        <div class="col-9">

                <h2>Management</h2>

        </div>

    </div>

    <div class="row justify-content-end">

        <div class="col-9" style="height: 1px">

                    <ejs-grid id="Grid" toolbar="@( new List<string>(){ "Add", "Delete", "Update", "Cancel" })" allowPaging="false" actionBegin="actionBegin" width="@("80%")">

                        <e-data-manager url="/Logins" insertUrl="/Management" removeUrl="/DeleteLogin" adaptor="UrlAdaptor"></e-data-manager>

                        <e-grid-editSettings allowAdding="true" allowDeleting="true" newRowPosition="Top" showDeleteConfirmDialog="true"></e-grid-editSettings>

                        <e-grid-columns>

                            <e-grid-column field="loginToPermissionJoinID" isPrimaryKey="true" headerText="Join ID" allowEditing="false" visible="false"></e-grid-column>

                            <e-grid-column field="loginID" headerText="Login ID" allowEditing="false" width="50"></e-grid-column>

                            <e-grid-column field="fullName" headerText="Full Name" allowEditing="false" width="100"></e-grid-column>

                            <e-grid-column field="username" headerText="Username" editType="dropdownedit" edit="new {@params = usernameLookupDDL }" validationRules="@(new { required=true})" width="100"></e-grid-column>

                            <e-grid-column field="permissionID" headerText="Permission ID" editType="dropdownedit" edit="new {@params = permissionLookupDDL }" validationRules="@(new { required=true})" width="50"></e-grid-column>

                            <e-grid-column field="permissionName" headerText="Permission Name" allowEditing="false" width="100"></e-grid-column>

                            <e-grid-column field="permissionDescription" headerText="Permission Description" allowEditing="false" width="125"></e-grid-column>

                        </e-grid-columns>

                    </ejs-grid>

        </div>

    </div>

[Dhivya Rajendran]

Hi David, 

Greeting from Syncfusion. 

As per the provided information, we have checked with our end. When we apply width as 80% then the grid will be shown on left side because of the remaining white spaces(20%) on right side. We have checked with normal HTML table, and it’s also having the same behavior. 

 

If you want to show grid on right side then we suggest you to use the below way. Here, we have applied the style float as right for grid element. 

<style> 

    .e-grid{ 

        float: right;  if you want to shows on right side then you can use it 

    } 

</style> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/149533-1524550751  

Regards, 

R.Dhivya 

[David Hulse]

float worked. I did not realize that some third-party components would not work with bootstrap.

https://www.syncfusion.com/blogs/post/syncfusion-js-components-compatibility-with-twitter-bootstrap.aspx

Thank you very much, Dhivya!

[David Hulse]

The sample app that was provided does not contain any design that resembles the screenshot that was provided in your reply. Could you send me another sample that does have an example in it?

[Thavasianand Sankaranarayanan]

Hi David, 

Thanks for your update. 

In the previously provided sample, we have applied float as right for grid component so that the layout different from the screenshot. Please refer the attached sample for more information. 

[Views/DataGrid/Index.cshtml] 

<div class="row justify-content-end"> 

 

    <div class="col-9"> 

        <h2>Management</h2> 

    </div> 

</div> 

 

<div class="row justify-content-end"> 

    <div class="col-9"> 

        <table width="@("80%")"> 

            <tr> 

                <th>Month</th> 

                <th>Savings</th> 

            </tr> 

            <tr> 

                <td>January</td> 

                <td>$100</td> 

            </tr> 

            <tr> 

                <td>February</td> 

                <td>$80</td> 

            </tr> 

        </table> 

    </div> 

</div> 

<div class="row justify-content-end"> 

    <div class="col-9"> 

        <ejs-grid id="Grid" width="@("80%")" height="272" allowPaging="true" toolbar="@(new List<string>() { "Search", "Add", "Delete","Update","Cancel" , "ExcelExport" , "CsvExport" ,"PdfExport"})" allowFiltering="true" allowExcelExport="true" allowPdfExport="true" toolbarClick="toolbarClick"> 

        . . . . . 

        </ejs-grid> 

    </div> 

</div> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/149533-new-2010515912  

Regards, 

Thavasianand S.