Serenity: SlickGrid requires a valid container

Created on 6 Sep 2018 · 3Comments · Source: serenity-is/Serenity

I have been trying to duplicate the CustomersOrdersGrid.ts from Northwind example.

I have customers and quotes So basically I simply duplicated them (of course my quotes has different fields then orders) . However I keep getting SlickGrid requires a valid container.

I have managed to be successful with the New quote to be in the form like Northwind - that works but this one is being a PIB.

slick.grid.js?v=6M8OpXnHoDAVrg-2SR7mAA2:281 Uncaught Error: SlickGrid requires a valid container, [object Object] does not exist in the DOM.
at init (slick.grid.js?v=6M8OpXnHoDAVrg-2SR7mAA2:281)
at new SlickGrid (slick.grid.js?v=6M8OpXnHoDAVrg-2SR7mAA2:5106)
at CustomersQuoteGrid.DataGrid.createSlickGrid (DataGrid.ts:388)
at CustomersQuoteGrid.DataGrid [as constructor] (DataGrid.ts:61)
at CustomersQuoteGrid.EntityGrid [as constructor] (EntityGrid.ts:7)
at CustomersQuoteGrid.QuoteGrid [as constructor] (QuoteGrid.ts:14)
at new CustomersQuoteGrid (CustomersQuoteGrid.ts:13)
at new CustomersDialog (CustomersDialog.ts:25)
at Function.Widget.create (Widget.ts:133)
at CustomersGrid.EntityGrid.createEntityDialog (EntityGrid.ts:273)

...
namespace MyProject.QUOTERDB {

    import fld = QuoteRow.Fields;

    @Serenity.Decorators.registerClass()
    export class QuoteGrid extends Serenity.EntityGrid<QuoteRow, any> {
        protected getColumnsKey() { return 'QUOTERDB.Quote'; }
        protected getDialogType() { return QuoteDialog; }
        protected getIdProperty() { return QuoteRow.idProperty; }
        protected getLocalTextPrefix() { return QuoteRow.localTextPrefix; }
        protected getService() { return QuoteService.baseUrl; }

        constructor(container: JQuery) {
            super(container);
        }
    }
}

/// <reference path="../Quote/QuoteGrid.ts" />

namespace MyProject.QUOTERDB {

 //   import fld = QuoteRow.Fields;
    import fld = CustomersRow.Fields;

    @Serenity.Decorators.registerClass()
    export class CustomersQuoteGrid extends QuoteGrid {
        protected getDialogType() { return CustomersQuoteDialog; }

        constructor(container: JQuery) {
            super(container);
        }

        protected getColumns(): Slick.Column[] {
            var cols = super.getColumns().filter(x => x.field !== fld.CompanyName);
            return super.getColumns().filter(x => x.field !== fld.CompanyName);  
        }

        protected initEntityDialog(itemType, dialog) {
            super.initEntityDialog(itemType, dialog);
            Serenity.SubDialogHelper.cascade(dialog, this.element.closest('.ui-dialog'));
        }

        protected addButtonClick() {
            this.editItem({ Id: this.customerID });
        }

        protected getInitialTitle() {
            return null;
        }

        protected getGridCanLoad() {
            return super.getGridCanLoad() && !!this.customerID;
        }

        private  _customerID: number; //string

        get customerID() {
            return this._customerID;
        }

        set customerID(value: number) {
            if (this._customerID !== value) {
                this._customerID = value;
                this.setEquality('Id', value);
                this.refresh();
            }
        }

    }
}

...

Source

stixoffire

Most helpful comment

On the example...

in the CustomerDialog.ts there is a line that set the proper container for the grid:
this.ordersGrid = new CustomerOrdersGrid(this.byId('OrdersGrid'));
This id has to match the id div on your template.html

Of course if does not match it will say that slickgrid does not have a valid container.