Wrapper for components - Question

[stuartbloom]

Love the bridge, but wondering if it is possible to create a wrapper for them; for example I make extensive use of the ej-grid element and every one of them has a page-settings attribute set to the same thing.

Can I create my own simple wrapper that will have this as a default and not require every view to implement it? Would make it easy to change it in one place should I wish.

Thanks in advance

[mariaantony-gnanasekaran]

@stuartbloom Sure, you can create your own wrapper around ej-grid component and use it in your application according to your need.

Follow the below step to create grid wrapper around ej-grid component.

• Create a grid wrapper by creating (say) grid-wrapper as custom element with default ejGrid view.

[grid-wrapper.html]

<template>
    <div>
        <ej-grid e-data-source.bind="datasource" e-allow-paging=true>
            <ej-column e-field="CustomerName"></ej-column>
            <ej-column e-field="OrderDate" e-format="{0:MM/dd/yyyy}"></ej-column>
            <ej-column e-field="Freight" e-format="{0:C}" e-text-align="right"></ej-column>
        </ej-grid>
    </div>
</template>

. [grid-wrapper.js]

import { customElement, bindable } from 'aurelia-framework';
@customElement('grid-wrapper')

export class Gridwrapper {
  @bindable datasource;

  constructor() {

  }
}

In this wrapper, we have declared datasource as bindable property.so, you can bound different datasource per view. If you’re wish to use same grid data for all view, then remove bindable property from the above code snippet

• Make grid-wrapper as global resource so, you can use this wrapper anywhere in your application.

[main.js]

aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.useAll())
    .globalResources('grid-wrapper');

• Use the grid wrapper in your application

[sample.html]

<template>
    <h1>ejGrid sample</h1>
    <grid-wrapper datasource.bind="data">
    </grid-wrapper>
</template>

. [sample.js]

export class Sample {
    constructor() {
        this.data = [{
            CustomerName: "VINET", OrderDate: new Date(8364186e5), Freight: 32.38
        },
        {
            CustomerName: "TOMSP", OrderDate: new Date(836505e6), Freight: 11.61
        },
        {
            CustomerName: "HANAR", OrderDate: new Date(8367642e5), Freight: 65.83
        }]
    }
}

we have bounded data object to datasource. So the resulting grid will have this data object as datasource

[stuartbloom]

@mariaantony-gnanasekaran thanks, that is very informative. The only thing I have is that my grids will have different data sources as well as a set of different columns.....

[mariaantony-gnanasekaran]

@stuartbloom FYI, you need to bind column in order to set different columns per view

Refer the below code snippet to have different set of column as well as data source

[grid-wrapper.html]

<template>
    <div>
        <ej-grid e-data-source.bind="datasource" e-allow-paging=true e-columns.bind="column">
        </ej-grid>
    </div>
</template>

[grid-wrapper.js]

import { customElement, bindable } from 'aurelia-framework';
@customElement('grid-wrapper')

export class Gridwrapper {
  @bindable datasource;
  @bindable column;

  constructor() {

  }
}

[sample.html]

<template>
    <h1>ejGrid sample</h1>
    <grid-wrapper datasource.bind="data" column.bind="column">
    </grid-wrapper>
</template>

[sample.js]

export class Grid {
    constructor() {
        this.column=[{field:"CustomerName"},{field:"OrderDate",format:"{0:MM/dd/yyyy}"},{field:"Freight",format:"{0:C}"}] ;

        this.data = [{
            CustomerName: "VINET", OrderDate: new Date(8364186e5), Freight: 32.38
        },
        {
            CustomerName: "TOMSP", OrderDate: new Date(836505e6), Freight: 11.61
        },
        {
            CustomerName: "HANAR", OrderDate: new Date(8367642e5), Freight: 65.83
        }]
    }
}

[stuartbloom]

@mariaantony-gnanasekaran ahhh, of course, i forgot you could bind columns to an object. Awesome way of doing this; thanks :)