Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
werner buerstel
105
Hiding + resizing bug?
posted

Hello!

I am experiencing a small problem when column hiding and resizing are both enabled. Please see the code below and try the following steps:

1. Use the "gear" button on the rightmost column (Age) to access the Column Chooser

2. Hide the column "Age", close the Column Chooser

3. Drag the column "Country" to the left, so that the order of columns is First Name, Country, Last Name

4. Try to resize the Country column - it will not work!

Actually, if you change the background color of the column resizing handle to make it visible, you will notice that the handle disappears from the Country column after the above steps.

Is there a workaround for this? Many thanks!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>

    <style>

  body
  {
   padding-left: 50px;
   padding-right: 50px;
  }
  #gridDiv
  {
   width: 100% !important;
   min-width: 500px !important;  
  }
        #grid
        {
   width: 100%;
        }

    </style>
 
     <script>
      $(function () {
             var height = window.innerHeight;
             $("#grid").igGrid({
                 autoGenerateColumns: false,
                 width: "100%",
                 height: "600px",
                 autofitLastColumn: false,
                 primaryKey: "EmployeeID",
                 dataSource: data,
    columns: [
                    { headerText: "First Name", key: "FirstName", dataType: "string", width: "30%" },
                    { headerText: "Last Name", key: "LastName", dataType: "string", width: "30%" },
     { headerText: "Country", key: "Country", dataType: "string", width: "30%" },
                    { headerText: "Age", key: "Age", dataType: "number", width: "10%" }
                ],    
                features: [
                     {
                         name: "Resizing",
                         allowDoubleClickToResize: true,
                         columnSettings: [
                           { columnKey: "FirstName", minimumWidth: "10%" },
                           { columnKey: "LastName", minimumWidth: "10%" },
         { columnKey: "Country", minimumWidth: "10%" },
         { columnKey: "Age", minimumWidth: "10%" }
                         ]                    
                     },
                    {
      name: "ColumnMoving"
     },
     {
      name: "Hiding",
      columnChooserContainment: "window"
     }
               ]
             });
         });
    </script>
</head>
<body>
    <div id="gridDiv">
        <table id="grid"></table>
    </div>
    <script>
  var data = [
    {
   "EmployeeID": "56657eab16e7797cc8364561",
   "FirstName": "Kathryn",
   "LastName": "Carney",
   "Country": "Italy",
   "Age": 51
    },
    {
   "EmployeeID": "56657eabad9ad116254c790a",
   "FirstName": "Wilma",
   "LastName": "Stanley",
   "Country": "USA",
   "Age": 20
    },
    {
   "EmployeeID": "56657eab6aa9a9369f056083",
   "FirstName": "Barnes",
   "LastName": "Baldwin",
   "Country": "Italy",
   "Age": 33
    },
    {
   "EmployeeID": "56657eabded05bd38545b61d",
   "FirstName": "Brooke",
   "LastName": "Donaldson",
   "Country": "Italy",
   "Age": 58
    }
  ] 
 </script>
</body>
</html>