Available in the Full Version

Data Grid - Responsive Vertical Rendering

Select a column to sort
Show
records
Company NameContact NameContact TitleAddressCity
Company NameAlfreds Futterkiste
Contact NameMaria Anders
Contact TitleSales Representative
AddressObere Str. 57
CityBerlin
Company NameAna Trujillo Emparedados y helados
Contact NameAna Trujillo
Contact TitleOwner
AddressAvda. de la Constitución 2222
CityMéxico D.F.
Company NameAntonio Moreno Taquería
Contact NameAntonio Moreno
Contact TitleOwner
AddressMataderos 2312
CityMéxico D.F.
Company NameAround the Horn
Contact NameThomas Hardy
Contact TitleSales Representative
Address120 Hanover Sq.
CityLondon
Company NameBerglunds snabbköp
Contact NameChristina Berglund
Contact TitleOrder Administrator
AddressBerguvsvägen 8
CityLuleå
 

This sample is designed for a larger screen size.

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

Responsive vertical rendering mode renders the grid data in two columns. The left column holds the columns captions and the right column holds the data. This sample demonstrates the responsive vertical rendering mode in combination with Paging and Sorting features. The Sorting feature is supported through the API, that's why you should use a custom sorting interface like the one above the grid.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            padding: 0px !important;
            margin: 0px !important;
        }
    </style>
    <!-- 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>

    <script src="/data-files/nw-customers-with-orders.js"></script>

    <fieldset id="sortingAPI">
        <legend>Select a column to sort</legend>

        <div id="gridColumns"></div>
        <input type="button" id="igButtonSort" value="Sort Column" style="vertical-align: top; padding-top: 0px; height: 23px;" />

    </fieldset>

    <table id="grid7"></table>

    <script>
        $(function () {
            var data = [
                    { "columnKey": "CompanyName", "columnHeader": "Company Name" },
                    { "columnKey": "ContactName", "columnHeader": "Contact Name" },
                    { "columnKey": "ContactTitle", "columnHeader": "Contact Title" },
                    { "columnKey": "Address", "columnHeader": "Address" },
                    { "columnKey": "City", "columnHeader": "City" }
            ];

            $("#gridColumns").igCombo({
                dataSource: data, //JSON Array defined above
                valueKey: "columnKey",
                textKey: "columnHeader",
                width: "300px",
                mode: "dropdown",
                height: "25px",
                selectedItems: [{index: 0}]
            });

            $( "#igButtonSort" ).igButton( {
                labelText: $( "#igButtonSort" ).val(),
                height: "25px"
            } );

            $("#igButtonSort").on({
                click: function (e) {
                    var columnKey = $( "#gridColumns" ).igCombo( "value" );
                    if ( columnKey ) {
                        $( '#grid7' ).igGridSorting( 'sortColumn', columnKey, 'ascending' );
                    }
                }
            });

            $("#grid7").igGrid({
                columns: [
                    { headerText: "Customer ID", key: "ID", dataType: "string", hidden: true },
                    { headerText: "Company Name", key: "CompanyName", dataType: "string" },
                    { headerText: "Contact Name", key: "ContactName", dataType: "string" },
                    { headerText: "Contact Title", key: "ContactTitle", dataType: "string" },
                    { headerText: "Address", key: "Address", dataType: "string" },
                    { headerText: "City", key: "City", dataType: "string" },
                    { headerText: "Country", key: "Country", dataType: "string", hidden: true }
                ],
                primaryKey: "ID",
                autoGenerateColumns: false,
                dataSource: nwCustomersWithOrders,
                height: "600px",
                width: "100%",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: true,
                        reactOnContainerWidthChanges: true,
                        windowWidthToRenderVertically: null,
                        propertiesColumnWidth: "40%",
                        valuesColumnWidth: "60%",
                        allowedColumnWidthPerType: {
                            string: 300,
                            number: 100,
                            bool: 100,
                            date: 100,
                            object: 150
                        }
                    },
                    {
                        name: "Paging",
                        type: "local",
                        pageSize: 5
                    },
                    {
                        name: "Sorting",
                        type: "local"
                    }
                ]
            });            
        });
    </script>

</body>
</html>