Serenity: how to add a plugin in slickgrid

Created on 23 Jan 2017 · 9Comments · Source: serenity-is/Serenity

how can someone add any custom plugin such as

https://github.com/naresh-n/slickgrid-column-group

in serenity 2.0.

issue #447 has some insight about this subject but it is before the type script is implemented in serenity.

my question is how to do it in type script.

Source

mrajalko

Most helpful comment

found solution for this.

added js file and css file in Scripts/SlickGrid/Plugins folder.
In section head of the cshtml file added lines as under.

@section Head {

<link rel="stylesheet" href="~/Scripts/SlickGrid/Plugins/slick.columngroup.css">
<script src="~/Scripts/SlickGrid/Plugins/slick.columngroup.js"></script>

}

modified serenity.CoreLib.d.ts and added lines as under

declare namespace Slick {
class ColumnGroup {
constructor();
enableColumnGrouping(): void;
disableColumnGrouping(): void;
}
}

modified interface Column as under

interface Column {
asyncPostRender?: Slick.AsyncPostRender;
behavior?: any;
cannotTriggerInsert?: boolean;
cssClass?: string;
defaultSortAsc?: boolean;
editor?: Function;
field: string;
focusable?: boolean;
formatter?: Slick.ColumnFormatter;
headerCssClass?: string;
id?: string;
maxWidth?: any;
minWidth?: number;
name?: string;
rerenderOnResize?: boolean;
resizable?: boolean;
selectable?: boolean;
sortable?: boolean;
toolTip?: string;
width?: number;
format?: (ctx: Slick.FormatterContext) => string;
referencedFields?: string[];
sourceItem?: SyberLib.PropertyItem;
sortOrder?: number;
groupTotalsFormatter?: (p1?: GroupTotals, p2?: Column) => string;
visible?: boolean;
groupName?: string;
}

modified *grid.ts and added lines some lines in "protected createSlickGrid()" as under

var plugin = new Slick.ColumnGroup();
grid.registerPlugin(plugin);

var columns = grid.getColumns();

        //grid.registerPlugin(new Slick.columng);

        for (let col of columns) {
            //console.log(col);
            if (col.field == "AccountCode" || col.field == "AccountName") col.groupName = "Account";
            if (col.field == "AcOpeningDrAmt" || col.field == "AcOpeningCrAmt") col.groupName = "Opening";
            if (col.field == "AcTransactionVoucherDrAmt" || col.field == "AcTransactionVoucherCrAmt") col.groupName = "Transaction";
            if (col.field == "CLOSINGBALANCEDR" || col.field == "CLOSINGBALANCECR") col.groupName = "Closing";
        }

        plugin.enableColumnGrouping();

i would try and post a sample soon.

mrajalko on 23 Jan 2017

👍3 😄2

All 9 comments