Serenity: Dynamically hide Columns plus column header drop down menu

[sayuga]

I was reading up on the SlickGrid documentation and I was noticing the ColumnPicker function and was wondering if you happen to have it implemented in the the serenity grid builder. I also wondered about the heading menu option with the ability to use it in lieu of the drop downs as a filter option.

[volkanceylan]

Any SlickGrid function can be used but you need to have a good knowledge of javascript and especially how to implement in Saltarelle plus where to intercept, e.g. GetSlickOptions.

I didn't use that plugin, i have another column picker dialog that might be available as a sample in future versions.

[sayuga]

hmm..I'm not quite that capable yet so I'll leave it alone for now then. Thanks for the info. I look forward to the future upgrades.

[auareve]

Hi..... please excuse me for reopen this, I can't find the another dialog for column picker, some guide?

[volkanceylan]

There is no guide, yet.

[auareve]

Thanks for the fast reply Volkan!!
You can tell me where is the dialog to try figure out how used it? If i had succes, i can help with the guide! ;)

[volkanceylan]

Sorry but there is no such dialog or code. You need to see SlickGrid samples, but i didn't try.

[auareve]

Ok, then i have to try with this:

https://volkanceylan.gitbooks.io/serenity-guide/content/howto/how_to_use_a_third_party_plugin_with_serenity.html

And implement the column picker function?

[volkanceylan]

It is different topic actually.

[auareve]

Ok Volkan, thanks for the help

[auareve]

Well, for any interested in this:

You have to create a file name SlickGridControls.cs in MyApp.Script\Common\Helper\ with the following code:

namespace SInCo

{
    using Serenity;
    using System.Collections.Generic;
    using System.Runtime.CompilerServices;

    [Imported]
    [ScriptName("ColumnPicker")]
    [ScriptNamespace("Slick.Controls")]
    public class SlickColumnPicker
    {
        public SlickColumnPicker(List<SlickColumn> columns, SlickGrid grid, SlickGridOptions options) { }
    }
}

In the XYZGrid add this:

        private SlickColumnPicker columnPicker;

        protected override SlickGrid CreateSlickGrid()
        {
            //return base.CreateSlickGrid();
            var grid = base.CreateSlickGrid();
            columnPicker = new SlickColumnPicker(grid.GetColumns(), grid, grid.GetOptions());
            grid.RegisterPlugin(columnPicker);
            return grid;
        }

And for last, in the _LayoutHead.cshtml add:

...
<link rel="home" id="ApplicationPath" href="~/" />
@Html.Stylesheet("~/Content/slick.columnpicker.css")
@Html.Stylesheet("~/Content/font-open-sans.css")
...

and...

...
@Html.Script("~/Scripts/pace.js")
@foreach (var x in CommonIncludes.Scripts) { @Html.Script(x) }
@Html.Script("~/Scripts/SlickGrid/Controls/slick.columnpicker.js")
@Html.Script("~/Scripts/jquery.cropzoom.js")
...

The result.....

[Estrusco]

Great, thank you for post.

[ramveersgh]

@auareve
Thanks for sharing the information. Its really a good feature.
But i am getting error
Uncaught TypeError: plugin.init is not a function in slick.grid.js?v=FEnnM2Vd4W4YNQ5zyFhR9g2:536

but commenting grid.RegisterPlugin(columnPicker); works for me as follow -

        protected override SlickGrid CreateSlickGrid()
        {
            var grid = base.CreateSlickGrid();
            SlickColumnPicker columnPicker = new SlickColumnPicker(grid.GetColumns(), grid, grid.GetOptions());
            //grid.RegisterPlugin(columnPicker); //this line was giving error.
            return grid;
        }

Again thanks for sharing the information.

[auareve]

@ramveersgh yes!! My mistake

The plugin need a little modification, you have to change the line on the bottom of the file MyApp.Web\Scripts\SlickGrid\Controls\slick.columnpicker.js:

    return {
      "getAllColumns": getAllColumns,
      "destroy": destroy
    };

and add:

    return {
        init: init,
        "getAllColumns": getAllColumns,
        "destroy": destroy
    };

[ramveersgh]

@auareve
Ok, Thanks for update!!!
But how to prevent the changes being loose when updating the serenity to new version?

[auareve]

As changes are made in the script and not in Serenity, while not update SlickGrid no problem... I think ;)

[volkanceylan]

Now we have a Serenity specific column picker.