Available in the Full Version

Data Grid - Column Fixing

This sample demonstrates igGrid Column Fixing feature.
Company NameContact Name
Alfreds FutterkisteMaria Anders
Ana Trujillo Emparedados y heladosAna Trujillo
Antonio Moreno TaqueríaAntonio Moreno
Around the HornThomas Hardy
Berglunds snabbköpChristina Berglund
Blauer See DelikatessenHanna Moos
Blondesddsl père et filsFrédérique Citeaux
Bólido Comidas preparadasMartín Sommer
Bon app'Laurence Lebihan
Bottom-Dollar MarketsElizabeth Lincoln
B's BeveragesVictoria Ashworth
Cactus Comidas para llevarPatricio Simpson
Centro comercial MoctezumaFrancisco Chang
Chop-suey ChineseYang Wang
Comércio MineiroPedro Afonso
Consolidated HoldingsElizabeth Brown
Drachenblut DelikatessenSven Ottlieb
Du monde entierJanine Labrune
Eastern ConnectionAnn Devon
Ernst HandelRoland Mendel
Familia ArquibaldoAria Cruz
FISSA Fabrica Inter. Salchichas S.A.Diego Roel
Folies gourmandesMartine Rancé
Folk och fä HBMaria Larsson
FrankenversandPeter Franken
France restaurationCarine Schmitt
Franchi S.p.A.Paolo Accorti
Furia Bacalhau e Frutos do MarLino Rodriguez
Galería del gastrónomoEduardo Saavedra
Godos Cocina TípicaJosé Pedro Freyre
Gourmet LanchonetesAndré Fonseca
Great Lakes Food MarketHoward Snyder
GROSELLA-RestauranteManuel Pereira
Hanari CarnesMario Pontes
HILARION-AbastosCarlos Hernández
Hungry Coyote Import StoreYoshi Latimer
Hungry Owl All-Night GrocersPatricia McKenna
Island TradingHelen Bennett
Königlich EssenPhilip Cramer
La corne d'abondanceDaniel Tonini
La maison d'AsieAnnette Roulet
Laughing Bacchus Wine CellarsYoshi Tannamuri
Lazy K Kountry StoreJohn Steel
Lehmanns MarktstandRenate Messner
Let's Stop N ShopJaime Yorres
LILA-SupermercadoCarlos González
LINO-DelicatesesFelipe Izquierdo
Lonesome Pine RestaurantFran Wilson
Magazzini Alimentari RiunitiGiovanni Rovelli
Maison DeweyCatherine Dewey
Mère PaillardeJean Fresnière
Morgenstern GesundkostAlexander Feuer
North/SouthSimon Crowther
Océano Atlántico Ltda.Yvonne Moncada
Old World DelicatessenRene Phillips
Ottilies KäseladenHenriette Pfalzheim
Paris spécialitésMarie Bertrand
Pericles Comidas clásicasGuillermo Fernández
Piccolo und mehrGeorg Pipps
Princesa Isabel VinhosIsabel de Castro
Que DelíciaBernardo Batista
Queen CozinhaLúcia Carvalho
QUICK-StopHorst Kloss
Rancho grandeSergio Gutiérrez
Rattlesnake Canyon GroceryPaula Wilson
Reggiani CaseificiMaurizio Moroni
Ricardo AdocicadosJanete Limeira
Richter SupermarktMichael Holz
Romero y tomilloAlejandra Camino
Santé GourmetJonas Bergulfsen
Save-a-lot MarketsJose Pavarotti
Seven Seas ImportsHari Kumar
Simons bistroJytte Petersen
Spécialités du mondeDominique Perrier
Split Rail Beer & AleArt Braunschweiger
Suprêmes délicesPascale Cartrain
The Big CheeseLiz Nixon
The Cracker BoxLiu Wong
Toms SpezialitätenKarin Josephs
Tortuga RestauranteMiguel Angel Paolino
Tradição HipermercadosAnabela Domingues
Trail's Head Gourmet ProvisionersHelvetius Nagy
VaffeljernetPalle Ibsen
Victuailles en stockMary Saveley
Vins et alcools ChevalierPaul Henriot
Die Wandernde KuhRita Müller
Wartian HerkkuPirkko Koskitalo
Wellington ImportadoraPaula Parente
White Clover MarketsKarl Jablonski
Wilman KalaMatti Karttunen
Wolski ZajazdZbyszek Piestrzeniewicz
Contact TitleAddress
City
Country
Sales RepresentativeObere Str. 57BerlinGermany
OwnerAvda. de la Constitución 2222México D.F.Mexico
OwnerMataderos 2312México D.F.Mexico
Sales Representative120 Hanover Sq.LondonUK
Order AdministratorBerguvsvägen 8LuleåSweden
Sales RepresentativeForsterstr. 57MannheimGermany
Marketing Manager24, place KléberStrasbourgFrance
OwnerC/ Araquil, 67MadridSpain
Owner12, rue des BouchersMarseilleFrance
Accounting Manager23 Tsawassen Blvd.TsawassenCanada
Sales RepresentativeFauntleroy CircusLondonUK
Sales AgentCerrito 333Buenos AiresArgentina
Marketing ManagerSierras de Granada 9993México D.F.Mexico
OwnerHauptstr. 29BernSwitzerland
Sales AssociateAv. dos Lusíadas, 23Sao PauloBrazil
Sales RepresentativeBerkeley Gardens 12 BreweryLondonUK
Order AdministratorWalserweg 21AachenGermany
Owner67, rue des Cinquante OtagesNantesFrance
Sales Agent35 King GeorgeLondonUK
Sales ManagerKirchgasse 6GrazAustria
Marketing AssistantRua Orós, 92Sao PauloBrazil
Accounting ManagerC/ Moralzarzal, 86MadridSpain
Assistant Sales Agent184, chaussée de TournaiLilleFrance
OwnerÅkergatan 24BräckeSweden
Marketing ManagerBerliner Platz 43MünchenGermany
Marketing Manager54, rue RoyaleNantesFrance
Sales RepresentativeVia Monte Bianco 34TorinoItaly
Sales ManagerJardim das rosas n. 32LisboaPortugal
Marketing ManagerRambla de Cataluña, 23BarcelonaSpain
Sales ManagerC/ Romero, 33SevillaSpain
Sales AssociateAv. Brasil, 442CampinasBrazil
Marketing Manager2732 Baker Blvd.EugeneUSA
Owner5ª Ave. Los Palos GrandesCaracasVenezuela
Accounting ManagerRua do Paço, 67Rio de JaneiroBrazil
Sales RepresentativeCarrera 22 con Ave. Carlos Soublette #8-35San CristóbalVenezuela
Sales RepresentativeCity Center Plaza 516 Main St.ElginUSA
Sales Associate8 Johnstown RoadCorkIreland
Marketing ManagerGarden House Crowther WayCowesUK
Sales AssociateMaubelstr. 90BrandenburgGermany
Sales Representative67, avenue de l'EuropeVersaillesFrance
Sales Manager1 rue Alsace-LorraineToulouseFrance
Marketing Assistant1900 Oak St.VancouverCanada
Marketing Manager12 Orchestra TerraceWalla WallaUSA
Sales RepresentativeMagazinweg 7Frankfurt a.M.Germany
Owner87 Polk St. Suite 5San FranciscoUSA
Accounting ManagerCarrera 52 con Ave. Bolívar #65-98 Llano LargoBarquisimetoVenezuela
OwnerAve. 5 de Mayo PorlamarI. de MargaritaVenezuela
Sales Manager89 Chiaroscuro Rd.PortlandUSA
Marketing ManagerVia Ludovico il Moro 22BergamoItaly
Sales AgentRue Joseph-Bens 532BruxellesBelgium
Marketing Assistant43 rue St. LaurentMontréalCanada
Marketing AssistantHeerstr. 22LeipzigGermany
Sales AssociateSouth House 300 QueensbridgeLondonUK
Sales AgentIng. Gustavo Moncada 8585 Piso 20-ABuenos AiresArgentina
Sales Representative2743 Bering St.AnchorageUSA
OwnerMehrheimerstr. 369KölnGermany
Owner265, boulevard CharonneParisFrance
Sales RepresentativeCalle Dr. Jorge Cash 321México D.F.Mexico
Sales ManagerGeislweg 14SalzburgAustria
Sales RepresentativeEstrada da saúde n. 58LisboaPortugal
Accounting ManagerRua da Panificadora, 12Rio de JaneiroBrazil
Marketing AssistantAlameda dos Canàrios, 891Sao PauloBrazil
Accounting ManagerTaucherstraße 10CunewaldeGermany
Sales RepresentativeAv. del Libertador 900Buenos AiresArgentina
Assistant Sales Representative2817 Milton Dr.AlbuquerqueUSA
Sales AssociateStrada Provinciale 124Reggio EmiliaItaly
Assistant Sales AgentAv. Copacabana, 267Rio de JaneiroBrazil
Sales ManagerGrenzacherweg 237GenèveSwitzerland
Accounting ManagerGran Vía, 1MadridSpain
OwnerErling Skakkes gate 78StavernNorway
Sales Representative187 Suffolk Ln.BoiseUSA
Sales Manager90 Wadhurst Rd.LondonUK
OwnerVinbæltet 34KobenhavnDenmark
Marketing Manager25, rue LauristonParisFrance
Sales ManagerP.O. Box 555LanderUSA
Accounting ManagerBoulevard Tirou, 255CharleroiBelgium
Marketing Manager89 Jefferson Way Suite 2PortlandUSA
Marketing Assistant55 Grizzly Peak Rd.ButteUSA
Marketing ManagerLuisenstr. 48MünsterGermany
OwnerAvda. Azteca 123México D.F.Mexico
Sales RepresentativeAv. Inês de Castro, 414Sao PauloBrazil
Sales Associate722 DaVinci Blvd.KirklandUSA
Sales ManagerSmagsloget 45ÅrhusDenmark
Sales Agent2, rue du CommerceLyonFrance
Accounting Manager59 rue de l'AbbayeReimsFrance
Sales RepresentativeAdenauerallee 900StuttgartGermany
Accounting ManagerTorikatu 38OuluFinland
Sales ManagerRua do Mercado, 12ResendeBrazil
Owner305 - 14th Ave. S. Suite 3BSeattleUSA
Owner/Marketing AssistantKeskuskatu 45HelsinkiFinland
Ownerul. Filtrowa 68WarszawaPoland

Configure Grid's fixing direction

This sample is designed for a larger screen size.

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

In this example, the Company Name and Contact Name columns are configured as fixed columns at the left. Columns also can be fixed to the right of the grid with the "fixingDirection" option.

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>
    <style>
        #configureGridCF {
            width: 100%;
            overflow: hidden;
            margin-top: 20px;
            background-color: #f3f3f3;
        }

        #fixingDirectionGridLabel {
            margin: 20px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }
        
        .settingsRS p {
            width:100%;
            overflow:hidden;
            margin-bottom:5px;
        }
        .ui-checkbox-container {
            float:left;
            margin-right:5px;
            margin-top: 0.5em;
        }
        .ui-igcheckbox-normal-on {
            top: auto;
            left: auto;
            margin-left: 1px;
            margin-top: 1px;
        }
        .delete-button
        {
            width: 100%;
            font-size: 1em;
            border: solid 1px #777;
            font-family: 'Segoe UI', Arial, sans-serif;
            color: #444;
        }
        .delete-button:hover
        {
            background-color: #d0edfa;
        }
    </style>
</head>
<body>

    <table id="grid"></table>

    <div id="configureGridCF">
        <h3 id="fixingDirectionGridLabel">Configure Grid's fixing direction</h3>
        <div class="settingsRS">
            <fieldset id="cfOptions" class="explorer">
                <p>
                    <input id="fixingDirectionRight">
                    <label for="multipleSelectionCheck">set 'fixingDirection' to 'left'</label>
                </p>
            </fieldset>
        </div>
    </div>

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

    <script>
        $(function () {
            $("#grid").igGrid({
                columns: [
                    { headerText: "", key: "ID", dataType: "string", width: "100px", template: "<input type='button' onclick='deleteRow(\"${ID}\")' value='Delete row' class='delete-button'/>" },
                    { headerText: "Company Name", key: "CompanyName", dataType: "string", width: "250px" },
                    { headerText: "Contact Name", key: "ContactName", dataType: "string", width: "200px" },
                    { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "200px" },
                    { headerText: "Address", key: "Address", dataType: "string", width: "200px" },
                    { headerText: "City", key: "City", dataType: "string", width: "150px" },
                    { headerText: "Country", key: "Country", dataType: "string", width: "150px" }
                ],
                autoGenerateColumns: false,
                dataSource: nwCustomersWithOrders,
                width: "100%",
                height: "400px",
                primaryKey: "ID",
                features: [
                    {
                        name: "ColumnFixing",
                        fixingDirection: "left",
                        columnSettings: [
                            {
                                columnKey: "CompanyName",
                                isFixed: true,
                                allowFixing: false
                            },
                            {
                                columnKey: "ContactName",
                                isFixed: true
                            },
                            {
                                columnKey: "ContactTitle",
                                allowFixing: false
                            }
                        ]
                    },
                    {
                        name: "Sorting",
                        columnSettings : [
                            {
                                columnKey: "ID",
                                allowSorting: false
                            }
                        ]
                    },
                    {
                        name: "Filtering",
                        columnSettings: [
                            {
                                columnKey: "ID",
                                allowFiltering: false
                            }
                        ]
                    }
                ]
            });

            $("#fixingDirectionRight").igCheckboxEditor({
                checked: true,
                valueChanged: function (evt, args) {
                    var fd = !args.newValue ? "right" : "left";
                    var grid = $("#grid"),
                        cols = grid.igGrid("option", "columns"),
                        fixedCols = [], i;
                    for (i = 0; i < cols.length; i++) {
                        // store all fixed columns
                        if (grid.igGrid("isFixedColumn", cols[i].key)) {
                            fixedCols.push(cols[i]);
                        }
                    }
                    grid.igGridColumnFixing("unfixAllColumns");
                    grid.igGridColumnFixing("option", "fixingDirection", fd);

                    for (i = 0; i < fixedCols.length; i++) {
                        // fix the stored columns using the new direction
                        grid.igGridColumnFixing("fixColumn", fixedCols[i].key);
                    }
                }
            });

        });

         function deleteRow(rowId) {
            var grid = $("#grid").data("igGrid");
            grid.dataSource.deleteRow(rowId);
            grid.commit();
        }
    </script>
</body>
</html>