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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Thread ID:





132846 Sep 25,2017 12:20 PM UTC Sep 26,2017 09:21 AM UTC Angular 1
Tags: ejGrid
Asked On September 25, 2017 12:20 PM UTC

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>

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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. 


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