How to use the grid in a StencilJS project?

[jwillmer]

I saw it is build based on stencil but there is no reference on how to include it in a stencil project. And I'm struggling getting it to work.

[kswailscoil]

@jwillmer
I've been working on StencilJS implementation --- the filter plugin is my current crux but this should at least get you up and started if not already. My implementation took hack-ish attempts; hopefully someone will come along and give a proper instruction for StencilJS:

`
import { Component, h, State } from '@stencil/core';
import state from '../../global/store';
import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces';

@component({
tag: 'wcs-oss',
styleUrl: '../quote.css',
shadow: false,
})
export class WcsOss {
@State() gridSource: RevoGrid.DataSource;
@State() gridColumns: RevoGrid.ColumnData;

async componentWillLoad() {
await this.prepData();
}

async prepData() {
this.gridSource = state.outsideServices.map(oc => (
{
partNumber: oc.partNumber,
ossCode: oc.ossCode,
description: oc.description,
vendorCode: oc.vendorCode,
unitPrice: oc.price,
minCharge: oc.minimumCharge,
surcharge: oc.surcharge,
date: oc.date,
}
));
this.gridColumns = [
{
prop: 'partNumber',
name: 'Part Number',
readonly: true,
order: 'asc',
size: 250,
},
{
prop: 'ossCode',
name: 'OSS Code',
readonly: true,
size: 200,
},
{
prop: 'description',
name: 'Description',
readonly: true,
size: 500,
},
{
prop: 'vendorCode',
name: 'Vendor Code',
readonly: true,
size: 200,
},
{
prop: 'unitPrice',
name: 'Unit Price',
readonly: false,
filter: 'number',
size: 150,
},
{
prop: 'minCharge',
name: 'Min. Charge',
readonly: false,
size: 150,
},
{
prop: 'surcharge',
name: 'Surcharge',
readonly: false,
size: 150,
},
{
prop: 'date',
name: 'Date',
readonly: true,
size: 200,
},
];
}

render() {
const style = {
width: '100%',
height: '750px',
};
return [
<app-header titleName={'Outside Services | ' + state.outsideServices.length} />,

<ion-card class={'ion-padding'}>
<revo-grid
id={'revo-grid-oss'}
class={'ossControl'}
source={this.gridSource}
columns={this.gridColumns}
filter={true}
style={style}
theme={'material'}
/>

,
];
}
}
`

[kswailscoil]

@jwillmer
How did your solution work out?

We're still struggling with Filters in a StencilJS app. Any help is much appreciated!

[jwillmer]

@kswailscoil I currently work on other tasks. I haven't tested your implementation. I still hope that the maintainer might react on this issue ;)

[kswailscoil]

@jwillmer Appreciate the live communications!

My team is persistent but we must be missing something simple; I'll keep watching this, too.

[jwillmer]

Maybe @islarky88 or @m2a2x could help us. Seams they where quiet active in the past months.

[islarky88]

I saw it is build based on stencil but there is no reference on how to include it in a stencil project. And I'm struggling getting it to work.

i'm not familiar with stencil sorry. afaik, revogrid is framework agnostic. have you tried the simple install based on the guide here? https://revolist.github.io/revogrid/guide/installing.html

filter={true} does removing the line work but without filters?
filter={false} does adding false for filter work but without filters?

could you try passing an empty object? filter={{}}

or maybe

this.filterOptions = {
  disableDynamicFiltering: true,
};

<revo-grid
id={'revo-grid-oss'}
class={'ossControl'}
source={this.gridSource}
columns={this.gridColumns}
filter={this.filterOptions}
style={style}
theme={'material'}
/>

[kswailscoil]

@islarky88 Thank you for the comment;

I've tried all of these suggestions and many others. I believe it's my StencilJS lifecycle implementation and must be doing something incorrectly. I've been able to use a Vanilla JS + HTML implementation with no issues;

If anyone has an understanding of a Stencil JS implementation I would really appreciate an assist. This is such a great library and would like to keep supporting it.

@revolist Thank you for your hard work in creating and maintaining this.