We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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>

4 Replies

DR Dhivya Rajendran Syncfusion Team November 29, 2019 05:15 AM

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> 


Regards, 
R.Dhivya 



DH David Hulse November 29, 2019 08:35 AM

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


Thank you very much, Dhivya!


DH David Hulse November 30, 2019 12:52 PM

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?



TS Thavasianand Sankaranarayanan Syncfusion Team December 2, 2019 03:49 AM

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> 


Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon