Available in the Full Version

Data Grid - Column Resizing

Product ID
Product Name
Product Number
Make Flag
1Adjustable RaceAR-5381false
2Bearing BallBA-8327false
3BB Ball BearingBE-2349true
4Headset Ball BearingsBE-2908false
316BladeBL-2036true
317LL CrankarmCA-5965false
318ML CrankarmCA-6738false
319HL CrankarmCA-7457false
320Chainring BoltsCB-2903false
321Chainring NutCN-6137false
322ChainringCR-7833false
323Crown RaceCR-9981false
324Chain StaysCS-2812true
325Decal 1DC-8732false
326Decal 2DC-9824false
327Down TubeDT-2377true
328Mountain End CapsEC-M092true
329Road End CapsEC-R098true
330Touring End CapsEC-T209true
331Fork EndFE-3760true
332FreewheelFH-2981false
341Flat Washer 1FW-1000false
342Flat Washer 6FW-1200false
343Flat Washer 2FW-1400false
344Flat Washer 9FW-3400false
345Flat Washer 4FW-3800false
346Flat Washer 3FW-5160false
347Flat Washer 8FW-5800false
348Flat Washer 5FW-7160false
349Flat Washer 7FW-9160false
350Fork CrownFC-3654true
351Front Derailleur CageFC-3982false
352Front Derailleur LinkageFL-2301false
355Guide PulleyGP-0982false
356LL Grip TapeGT-0820false
357ML Grip TapeGT-1209false
358HL Grip TapeGT-2908false
359Thin-Jam Hex Nut 9HJ-1213false
360Thin-Jam Hex Nut 10HJ-1220false
361Thin-Jam Hex Nut 1HJ-1420false
362Thin-Jam Hex Nut 2HJ-1428false
363Thin-Jam Hex Nut 15HJ-3410false
364Thin-Jam Hex Nut 16HJ-3416false
365Thin-Jam Hex Nut 5HJ-3816false
366Thin-Jam Hex Nut 6HJ-3824false
367Thin-Jam Hex Nut 3HJ-5161false
368Thin-Jam Hex Nut 4HJ-5162false
369Thin-Jam Hex Nut 13HJ-5811false
370Thin-Jam Hex Nut 14HJ-5818false
371Thin-Jam Hex Nut 7HJ-7161false
372Thin-Jam Hex Nut 8HJ-7162false
373Thin-Jam Hex Nut 12HJ-9080false
374Thin-Jam Hex Nut 11HJ-9161false
375Hex Nut 5HN-1024false
376Hex Nut 6HN-1032false
377Hex Nut 16HN-1213false
378Hex Nut 17HN-1220false
379Hex Nut 7HN-1224false
380Hex Nut 8HN-1420false
381Hex Nut 9HN-1428false
382Hex Nut 22HN-3410false
383Hex Nut 23HN-3416false
384Hex Nut 12HN-3816false
385Hex Nut 13HN-3824false
386Hex Nut 1HN-4402false
387Hex Nut 10HN-5161false
388Hex Nut 11HN-5162false
389Hex Nut 2HN-5400false
390Hex Nut 20HN-5811false
391Hex Nut 21HN-5818false
392Hex Nut 3HN-6320false
393Hex Nut 14HN-7161false
394Hex Nut 15HN-7162false
395Hex Nut 4HN-8320false
396Hex Nut 18HN-9161false
397Hex Nut 19HN-9168false
398Handlebar TubeHT-2981true
399Head TubeHT-8019true
400LL HubHU-6280true
401HL HubHU-8998true
402Keyed WasherKW-4091false
403External Lock Washer 3LE-1000false
404External Lock Washer 4LE-1200false
405External Lock Washer 9LE-1201false
406External Lock Washer 5LE-1400false
407External Lock Washer 7LE-3800false
408External Lock Washer 6LE-5160false
409External Lock Washer 1LE-6000false
410External Lock Washer 8LE-7160false
411External Lock Washer 2LE-8000false
412Internal Lock Washer 3LI-1000false
413Internal Lock Washer 4LI-1200false
414Internal Lock Washer 9LI-1201false
415Internal Lock Washer 5LI-1400false
416Internal Lock Washer 7LI-3800false
417Internal Lock Washer 6LI-5160false
418Internal Lock Washer 10LI-5800false
419Internal Lock Washer 1LI-6000false
420Internal Lock Washer 8LI-7160false
421Internal Lock Washer 2LI-8000false

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates the igGrid column resizing functionality. Use the mouse to resize a column by draging its header's right border. Note: Column resizing is not supported on touch enabled devices.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <table id="grid"></table>
    <script src="/data-files/adventureworks.min.js"></script>
    <script>
        $(function () {
            $("#grid").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                height: "500px",
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" }
                ],
                dataSource: adventureWorks.slice(0, 100),
                features: [
                    {
                        name: "Resizing"
                    }
                ]
            });
        });
    </script>
</body>
</html>