Responsive

[Fabricio]

How you can hide a column when the screen size decreases

Example:

<table class="table table-hover" id="PhoneTable">

    <thead>

        <tr>

            <th class="col-sm-3 hidden-xs">Col A</th>

            <th class="col-sm-3">Col B</th>

            <th class="col-sm-3">Col G</th>

            <th class="col-sm-3 hidden-xs">Col C</th>

        </tr>

    </thead>

    <tbody>

        <tr ng-repeat="Row in Rows">

            <td class="hidden-xs">{{Row.A}}</td>

            <td>{{Row.B}}</td>

            <td>{{Row.G}}</td>

            <td class="hidden-xs">{{Row.C}}</td>

        </tr>

    </tbody>

</table>

[Venkatesh Ayothi Raman]

Hi Fabrico, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement using column property as named priority which is defined the order of Column that are to be hidden or visible when Grid element is in responsive mode. Please refer to the following Help documentation, 

https://help.syncfusion.com/api/js/ejgrid#members:columns-priority 

We have also prepared a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Priority84956398 

 

 

Refer to the following code example, 

Code example: 

[Grid] 

<ej-grid #grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" [allowGrouping]='true'  [pageSettings]='page' [isResponsive]='true' [minWidth]=400 > 

    <e-columns> 

        <e-column field="OrderID" headerText="Order ID" [priority]=3 width="75" textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" [priority]=2 width="80"></e-column> 

        <e-column field="EmployeeID" headerText="Employee ID" [priority]=1 width="75" textAlign="right"></e-column> 

         

    </e-columns> 

</ej-grid> 

 

Note: If we use priority property then we should refer the following CSS files 

[Index.html page] 

<link rel='nofollow' href="node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css" rel="stylesheet" /> 

    . . . 

    <link rel='nofollow' href="responsiveCss/ej.responsive.css" rel="stylesheet" /> 

    <link rel='nofollow' href="responsiveCss/ejgrid.responsive.css" rel="stylesheet" /> 

 

Please refer to the following Help documentation for more information about responsive grid, 

https://help.syncfusion.com/js/grid/responsive 

https://help.syncfusion.com/api/js/ejgrid#members:isresponsive 

https://help.syncfusion.com/api/js/ejgrid#members:minwidth 

If we misunderstood your query, then could you please provide more details about your requirement? it would be helpful for us to find the problem and provide the solution as earliest. 

Regards, 

Venkatesh Ayothiraman.