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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

149524 Nov 28,2019 06:46 PM UTC Dec 2,2019 11:49 AM UTC ASP.NET Core - EJ 2 4
loading
Tags: DataGrid
David Hulse
Asked On November 28, 2019 06:46 PM UTC

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 [Syncfusion]
Replied On November 29, 2019 01:15 PM UTC

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 


David Hulse
Replied On November 29, 2019 04:35 PM UTC

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


Thank you very much, Dhivya!

David Hulse
Replied On November 30, 2019 08:52 PM UTC

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 [Syncfusion]
Replied On December 2, 2019 11:49 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon