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
0
IgGrid Double click resizing doesn't work properly
posted

Hi, I was using IgGrid lately, and I found that the double click resizing function didn't work properly. It should auto fit the width of data in the table. But in my code it just growing the way too big. Here is my code:

<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  
    <link href="./public/css/infragistics-dataTable.theme.css" rel="stylesheet" />
    <link href="./public/css/infragistics-dataTable.css" rel="stylesheet" />
    <script src="./public/js/jquery-1.12.4.min.js"></script>
    <script src="./public/js/jquery-ui-1.12.1.min.js"></script>
    <script src="./public/js/modernizr.min.js"></script>
    <script src="./public/js/filesaver.js"></script>
    <script src="./public/js/blob.js"></script>
    <script src="./public/js/infragistics_new.core.js"></script>
    <script src="./public/js/infragistics_new.lob.js"></script>
    <script src="./public/js/iggrid.js"></script>
    <script>
        var products = [
    { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "Category": { "ID": 0, "Name": "Food", "Active": true, "Date": "\/Date(1059660800000)\/" } },
    { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "Category": { "ID": 1, "Name": "Beverages", "Active": true, "Date": "\/Date(1159660800000)\/" } },
    { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "Category": { "ID": 1, "Name": "Beverages", "Active": true, "Date": "\/Date(1259660800000)\/" } },
    { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "Category": { "ID": 1, "Name": "Beverages", "Active": true, "Date": "\/Date(1359660800000)\/" } },
    { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "Category": { "ID": 1, "Name": "Beverages", "Active": false, "Date": "\/Date(1459660800000)\/" } },
    { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "Category": { "ID": 1, "Name": "Beverages", "Active": false, "Date": "\/Date(1559660800000)\/" } },
    { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "Category": { "ID": 1, "Name": "Beverages", "Active": false, "Date": "\/Date(1659660800000)\/" } },
    { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "Category": { "ID": 2, "Name": "Electronics", "Active": false, "Date": "\/Date(1759660800000)\/" } },
    { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "Category": { "ID": 2, "Name": "Electronics", "Active": false, "Date": "\/Date(1859660800000)\/" } }
];

$(function () {
$("#tileGrid").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
    ],
    height:"100%",
    width: "100%",
    dataSource: products,
    features:[{ name: "Resizing" },]
});
});
    </script>
    </head>
  <body>
    <div id="tileGrid"></div>
  </body>
</html>

grid before double clicking :

grid after double clicking: