Datagrid not responsive?

[Francisco]

Hello,

as per your video here https://youtu.be/HaNtWWR0g_A?t=21 the DataGrid control is fully responsive, but I didn't manage to get it working properly.

I'm using ASPNET CORE controls (EJ2), ¿do I have to switch to EJ v1 to get a fully responsive control or am I doing something wrong?

I did not find any information regarding this at your documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core/?no-cache=1

However v1 makes it clear for me: https://help.syncfusion.com/aspnet-core/grid/responsive

Here's an example of my grid:

<ejs-grid id="grid" dataSource="ViewBag.data" allowPaging="true" allowSorting="true" locale="es-ES" height="100%" >

     <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

     <e-grid-columns>

                 // Ommited for brevity

     </e-grid-columns>

</ejs-grid>

[Balaji Sekar]

Hi Francisco, 

 

Greetings from the Syncfusion support. 

 

Based on your query, we have already discussed this requirement in our Help Documentation and please refer the below documentation for more information. 

 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/scrolling/?no-cache=1#responsive-with-parent-container 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar 

[Francisco]

Hi, I've tried using width="100%" and width="100%" and nothing changes. The table isn't responsive, please see image attached --> https://imgur.com/a/lvexvHF

Grid code:

                                   

                                       

                                           

                                           

                                               

                                               

                                               

                                               

                                               

                                           

                                       

                                   

                               

[Balaji Sekar]

Hi Francisco, 

Query #1: Syncfusion DataGrid in mobile view 

We have analysed your query with provided information and we have provided our DataGrid with Desktop mode alone. By default, Grid responsive based on grid’s parent element while defined width and height in 100%. 

Query #2: Columns names are shortened and not readable 

You can avoid the column shortened while Grid resizing using allowTextWrap property of the Grid. Please refer the below code example for more information. 

[cshtml] 

<div id=”grid-parent” style=”width:400px;height:350px”> 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" width=”100%” height="100%" allowTextWrap=”true” >  

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

</div> 

Query #3:No Horizontal Scroller 

We suspect that you have undefine the width property in Grid column. Since we can see this problem. We suggest you to use the width in Grid column then you will see horizontal scroller in the responsive Grid. 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar