Announcement

**Hirn** · 20 May 2024, 05:43

there are no such errors in the SNAPSHOT_v13.1d_2024-04-06 version

**Isomorphic** · 20 May 2024, 16:05

Please re-read our response in your other thread here. You need to either call SC.defineClass(), or explicitly extend one of our existing React wrapper classes when creating a custom component class, not both. Our documentation shows each approach, but they are mutally exclusive. In the case of your sample code, defineClass() will work fine so there's no need to complicate the situation.

**Hirn** · 20 May 2024, 20:34

In the case of your sample code, defineClass() will work fine so there's no need to complicate the situation.

I have given only an example where the error manifests itself, removing all the rest of the functionality of my class. Therefore, just defineClass() does not suit me.

You need to either call SC.defineClass(), or explicitly extend one of our existing React wrapper classes when creating a custom component class, not both. Our documentation shows each approach, but they are mutally exclusive.

I tried defining my class as described in the documentation without using SC.defineClass(), but then I can't override the properties of the inherited class. For example, properties like gridComponents, neither as static class properties nor as explicit object properties. Here is my example of class definition. I did everything as you advised, but it doesn't work.

Code:

import { SC, ReactComponent, TreeGrid } from 'smartclient-pro/react';
class NoticesTreeGrid extends TreeGrid {
    static IS_CLASS = true;
    constructor(props) {
        super(props);
    }
    static defaultFields = [
        { name: "command", title: "Command" },
        { name: "argument 1", title: "Argument 1" },
        { name: "argument 2", title: "Argument 2" }];
    static gridComponents = ["header", "filterEditor", "body"];
}
ReactComponent.registerClass("NoticesTreeGrid", NoticesTreeGrid);
export default NoticesTreeGrid;

Here is an excerpt from the documentation

If on the other hand, you want to integrate a completely custom React class around your SmartClient subclass, you'll have to do a bit more work by first defining the React class yourself like:

// ... standard imports (see first sample)
import { Canvas } from 'smartclient-eval/react';
class MyCanvas extends Canvas {
static ISC_CLASS_NAME = "MyCanvas";
static IS_CLASS = true;
// ... your custom code
}
and then registering it by calling
ReactComponent.registerClass("MyCanvas", MyCanvas);
...
...
Note that ISC_CLASS_NAME declares the name of the underlying SmartClient framework class used by your new React component. So if you've not defined such a custom subclass (e.g. via SmartClient framework method isc.defineClass() then you should exclude that line.

**Hirn** · 20 May 2024, 21:14

I've redone the example https://smartclient.com/smartclient-...gridComponents And it doesn't work
All the errors I described are shown in this example

Code:

import React, { Component } from 'react';
import { TreeGrid, TGField } from 'smartclient-pro/react';
class App extends Component {
  constructor(param) {
    super(param);
  };
  render() {
    return (
      <TreeGrid width="500" height="300"  showFilterEditor="true">
        <fields>
          <TGField name="countryCode" title="Code" width="50" />
          <TGField name="countryName" title="Country" />
          <TGField name="capital" title="Capital" />
          <TGField name="continent" title="Continent" />
        </fields>
        <gridComponents>
          <value>header</value>
          <value>filterEditor</value>
          <value>body</value>
        </gridComponents>
      </TreeGrid>
    );
  }
}
export default App;

So it's not about my component after all?

**Isomorphic** · 21 May 2024, 16:06

Originally posted by Hirn View Post

I tried defining my class as described in the documentation without using SC.defineClass(), but then I can't override the properties of the inherited class. For example, properties like gridComponents, neither as static class properties nor as explicit object properties. Here is my example of class definition. I did everything as you advised, but it doesn't work.

If you need to manually define the React wrapper class and also customize the underlying SmartClient class, then you'd need to call isc.defineClass() first to define the new SmartClient class in JavaScript, like this:

Code:

import 'smartclient-pro/release';
import { SC, ReactComponent, TreeGrid } from 'smartclient-pro/react';

let isc = window.isc;
isc.defineClass("NoticesTreeGrid", isc.TreeGrid).addProperties({
    autoFetchData: false,
    loadDataOnDemand: false,
    canEdit: false,
    showFilterEditor: true,
    showHover: true,
    cascadeSelection: false,
    defaultFields: [
        { name: "command", title: "Command" },
        { name: "argument 1", title: "Argument 1" },
        { name: "argument 2", title: "Argument 2" }],
    gridComponents: ["header", "filterEditor", "body"]
});
class NoticesTreeGrid extends TreeGrid {
    static ISC_CLASS_NAME = "NoticesTreeGrid";
    static IS_CLASS = true;
    static PROPERTY_TYPES = {};
    constructor(props) {
        super(props);
    }
}
ReactComponent.registerClass("NoticesTreeGrid", NoticesTreeGrid);
export default NoticesTreeGrid;

Announcement

REACT custom TreeGrid errors

Comment

Comment

Comment

Comment

Comment