Using the Column Resizing feature of jQuery igGrid

Jordan Tsankov / Tuesday, November 29, 2011

Even though the igGrid does its job perfectly and exposes hundreds of data entries in an easily accessible for the user manner, sometimes this may not be the only thing you’re after. Maybe you’re after aesthetically-pleasing looks as well. We are not talking about styling ( since every control in the NetAdvantage for jQuery product is ThemeRoller-friendly and styles can be tinkered with and changed with little effort ). Instead, the subject of this blog is how to get…

…from here

…to here

…and meanwhile see how easy it is. Maybe it does not seem like much of a change but enabling users to alter the way data is shown means you actually care about the way data is shown. In some case, the default column width or the one you’ve manually set might not look okay – it’s better to let the user handle this for himself rather than forcing him to stick with what he’s got. This blog is specifically aimed at telling you how to enable column resizing on an igGrid widget.

In this sample solution, you can see everything in action, as well as a few ideas on how to change column width via user interaction.

Let’s get on with it !

Initial Work

In case you do not have an igGrid set up, I will very briefly guide you through getting one up.

Navigate to the folder where you have your Infragistics products installed. Then open up jQuery/. From the themes/ folder, copy all three folders into the Content/ or Styles/ folder in your project. Then go to jQuery/combined/min/ and copy the file ig.ui.min.js into your Scripts/ folder. The other two files – jquery-ui.min.js and jquery.min.js can be found in jQuery/demos/scripts/ if you have the jQuery samples installed.

When you’ve copied everything, link to the added files in the <head> tag of your page and you’re all set to experience some column resizing goodness.

What does it take?

Contrary to popular belief, not every neat feature has to cost you a limb or countless hours of caffeine-induced insomnia in order to get it to work. Column resizing is a great example, and just let me show you why!
Here’s what the difference is between a no-resize grid and a column-resize enabled one:

No resizing

gridTarget.igGrid({

                autoGenerateColumns: false,

                width: "600px",

                columns: [

                    { headerText: "Movie Name", key: "Name" },

                    { headerText: "Release Year", key: "ReleaseYear" },

                    { headerText: "Rating", key: "AverageRating" }

                ],

                features: [

                    { name: "Paging", pageSize: 5 }

                ],

                dataSource: jsonp

            });

Column resizing enabled

gridTarget.igGrid({

                autoGenerateColumns: false,

                width: "600px",

                columns: [

                    { headerText: "Movie Name", key: "Name" },

                    { headerText: "Release Year", key: "ReleaseYear" },

                    { headerText: "Rating", key: "AverageRating" }

                ],

                features: [

                    { name: "Paging", pageSize: 5 },

                    { name: "Resizing" } // this line enables column resizing

                ],

                dataSource: jsonp

            });

With that single line ( line 11 in second snippet ), everything falls in place and you can start manipulating column widths.

Column Resizing 101

With resizing enabled, you might wonder what does that mean, precisely. Well, for one, you can now click on any column separator and drag it around, thus changing the width of at least one column ( depending on which separator you’re using and whether any column was forced past the grid width ).

You are not, however, limited to only this means of resizing. You can also trigger a resize programmatically by using the following method:

   1: gridTarget.igGridResizing("resize", column, optionalParameter);

where “column” is either a zero-based index of the column you wish to resize or the column’s key that was specified when instantiating the column. The optional parameter, if provided, is a number that specifies the new width of the column, in pixels. If no optional parameter is provided, the column width will be set to the width of the cell within that column which has the longest value. You can use this method to enable the user to resize columns in many ways – refer to the attached sample project to see a few. Official samples are also available.

There is also a property you may specify that changes the way resizing works - deferredResizing. If it's off ( which it is by default ), the handle you're dragging will resize the column immediately, on the fly. If you, however, put deferredResizing on, whenever you drag a column separator you'll get a "ghost" handle which lets you select a new desired width. In this mode, the actual column separator will stay intact until you let go of the ghost handle - only when you let go of it will the separator snap to the position of the ghost handle. In the next code snippet you'll see how to turn deferredResizing on.

When it comes down to events, the Column Resizing feature of the igGrid widget comes with its own pair of events – columnResizing and columnResized. There are two ways to provide custom functionality for these – one is when initializing the resizing feature and one is late-binding functions to the selected event. Let’s see examples of both:

N.B. Due to the nature of how resizing works, you’re going to have troubles with countless alert dialogs popping up. To fix this, for the sake of this example, add the “deferredResizing: true” option as seen in line 11 in the snippet below.

Binding on initialization

gridTarget.igGrid({

                autoGenerateColumns: false,

                width: "600px",

                columns: [

                    { headerText: "Movie Name", key: "Name" },

                    { headerText: "Release Year", key: "ReleaseYear" },

                    { headerText: "Rating", key: "AverageRating" }

                ],

                features: [

                    { name: "Paging", pageSize: 5 },

                    { name: "Resizing", deferredResizing: true, columnSettings: [

                        {columnIndex: 0, minimumWidth: 20 },

                        { columnIndex: 1, minimumWidth: 20 },

                        { columnIndex: 2, minimumWidth: 20 }

                    ],

                        columnResized: function (evt, ui) {

                            alert("Column with key: " + ui.columnKey + " was resized to: " + ui.newWidth + "px.");

                        }

                    }

                ],

                dataSource: jsonp

            });

Binding post-initialization

gridTarget.bind("iggridresizingcolumnresized", function (evt, ui) {

    alert("Column with key: " + ui.columnKey + " was resized to: " + ui.newWidth + "px.");

});

Conclusion

This blog may have helped you with setting up the column resizing feature of an igGrid control you already had. Also, if you’ve wondered about ways to resize columns through code – hopefully this blog helped you with that as well. If not, your last hope is checking out this solution, which is an extensive example of manipulating column width.

A good idea would be to check the official examples on column resizing options and column resizing events.

igGridColumnResizing.zip