Available in the Full Version

Data Grid - TypeScript

Show
records
Product IDProduct NameProduct NumberMake 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

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 how to use TypeScript for creating igGrid and features like Paging, Filtering and Sorting.

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="grid1"></table>
    <script src="/data-files/adventureworks.min.js"></script>
    <script src="/TypeScriptSamples/grid/typescript.js"></script>
</body>
</html>