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>

Parents
  • 17590
    Offline posted

    Hello Werner,

    Thank you for posting in our community.

    I have created a private support case for you with an ID of CAS-169917-G1V7G1 and I will continue assisting you via this support  case. You could see it in your account in the Support Activity page.

    Please let me know if you have any additional questions regarding this matter.

Reply Children