Grid SlickGrid Column Picker (by marcobisio)

This is a (very) quick guide on how to activate the "column picker" functionality on the SlickGrid jQuery component.

Note that the following guide it's aimed only to the TypeScript versions of Serenity.

Here we go:

1) Add slick.columnpicker.d.ts file in Scripts\typings\slickgrid folder (you have to create the last level).

Such file will be something like this:

    declare namespace Slick.Controls {
        class ColumnPicker {
            constructor(columns: Slick.Column[], grid: Slick.Grid, options?: Slick.Controls.ColumnPickerOptions);
        }
    
        interface ColumnPickerOptions {
            fadeSpeed?: number;
        }
    }

2) Override the createSlickGrid() method (in your xyzGrid.ts) in the following way:

    protected createSlickGrid(): Slick.Grid {
        let grid = super.createSlickGrid();
        let columnPicker = new Slick.Controls.ColumnPicker(grid.getColumns(), grid);
        return grid;
    }

3) Add the following instruction in your _LayoutHead.cshtml (just before your MyProject.Web.js line):

    @Html.Script("~/Scripts/SlickGrid/Controls/slick.columnpicker.js")

4) Add the following instruction in your _LayoutHead.cshtml (just after your slick.grid.css line):

    @Html.Stylesheet("~/Content/slick.columnpicker.css")

And here it is the final result:

That's all folks!