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


How you can hide a column when the screen size decreases


<table class="table table-hover" id="PhoneTable">
            <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 ng-repeat="Row in Rows">
            <td class="hidden-xs">{{Row.A}}</td>
            <td class="hidden-xs">{{Row.C}}</td>

1 Reply

VA Venkatesh Ayothi Raman Syncfusion Team September 26, 2017 09:21 AM UTC

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, 
We have also prepared a sample for your convenience which can be download from following link, 
Refer to the following code example, 
Code example: 
<ej-grid #grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" [allowGrouping]='true'  [pageSettings]='page' [isResponsive]='true' [minWidth]=400 > 
        <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> 
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, 
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. 

Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon