Demos

[admin]

Hi GLMSDev,
The variable this.grid is undefined, when you try to use it. This basically means that your app.component.html template reference #grid or something else which you use is not bound to a ViewChild in your app.component.ts or the moment when you try to refer to that variable is before the Angular view is initialized. My suggestion would be to take a look and get started from: https://www.htmlelements.com/docs/grid/#angular.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Thanks for the tip. I tried this and it showed me only 4 columns, but i have many more columns in it. also, it just expanded the grid width…and no scroll bar in left side of section

[admin]

Thanks. How do i make sure that view/grid is loaded properly. at the moment i have put below to make sure, all the columns are loaded properly.
 
<div>
<div><div *ngIf=”columns.length>0; else loading;”></div>
<div><divid=”gridContainer”></div>
<div><smart-grid[dataSource]=”dataSource”[columns]=”columns”[sorting]=”sorting”</div>
<div>[filtering]=”filtering”[behavior]=”behavior”[appearance]=”appearance”[onCommand]=”onCommand”#gridid=”grid”></smart-grid></div>
<div></div></div>
<div></div></div>
<div><ng-template#loading>Loading data…</ng-template></div>
</div>
 

[admin]

Hi GLMSDev,
This basically means that a variable called “this.grid” is not defined in your code. You are probably trying to use it before the View is loaded.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Thanks for the prompt reply. I tried now i am getting undefined error “<span style=”text-decoration: underline;”>ERROR TypeError: Cannot read property ‘beginUpdate’ of undefined</span>”
 

[admin]

Hi GLMSDev,
Thanks for sharing the information.
Running the sample I get:

Error in /turbo_modules/@angular/compiler@7.0.0/bundles/compiler.umd.js (1098:21)
Unexpected value 'undefined' declared by the module 'AppModule'

For the performance part, I see that many properties are set dynamically. Please, not that when you need to set multiple properties at once, it is best to call grid.beginUpdate(); before setting the properties and after that use grid.endUpdate();. Otherwise, each setting triggers a new render cycle and instead of 1 render, it ends up with N Renders, where N is the number of property settings.
Unfortunately, using the provided sample code I was not able to reproduce the described “dancing” behavior on expand/collapse. It could be somehow related to the applied templates to the columns, but as i am unable to run the sample, I cannot test this scenario.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

My problem is not Gantt bar showing improperly, that works alright. My issue is left side of the Gantt.Where i have multiple columns which does not show i can only see 3-4 column max.
Below is the code for gantt…
<div>

<div><div*ngIf=”taskColumns.length>0; else loading;”></div>
<div><smart-gantt-chart#ganttChart[view]=”view”[dataSource]=”dataSource”[taskColumns]=”taskColumns”></smart-gantt-chart></div>
<div></div></div>
<div><ng-template#loading>Loading data…</ng-template></div>

</div>
<div>
<div>

<div>constructor(private http:HttpClient) { }</div>
<div>dataSource1: Array<object>;</div>
<div>dataSource: Array<object>;</div>
<div>taskColumns:GanttChartTaskColumn[]=[];</div>
<div>items=[];</div>
<div>headerTemplate = ‘headerTemplate’;</div>
<div>view = ‘month’;</div>
<div>durationUnit = ‘day’;</div>
<div>treeMin = 300;</div>
<div>hideTimelineHeaderDetails = true;</div>

</div>
</div>

[admin]

https://stackblitz.com/edit/github-gfie78?file=src%2Fapp%2Fapp.component.ts does this works ?
My data is coming from APIs so….

[admin]

Hi GLMSDev,
Thanks for writing and for trying our products.
Could you please create a Stackblitz sample, which we will be able to test and debug? The posted code unfortunately is not very readable and we would not be able to test using it. A Stackblitz template from which you can start is: https://stackblitz.com/github/htmlelements/smart-webcomponents-angular/tree/master/grid/overview
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

 

[admin]

Hi Hristofor, thank you so much for your reply.
I checked my package.json and I already have smart-webcomponents-react@7.7.2 installed.
I didn’t manage to get the CSS imported as shown in this example as it causes loader error.
AppPage is a common layout.

...
const AppPage = ({
  children, screen, notReady, routeParams,
}) => (
  <div className="app-page-container">
    <UserSessionModal />
    <LoadingBar className="loading-bar fixed-top" />
    <AppBar />
    <div className="app-page-body">
      <Sidebar screen={screen} routeParams={routeParams} />
      <div className="app-page-content">{ notReady || children }</div>
    </div>
    <div className="app-page-footer">
      <AppFooter />
    </div>
    <ModuleTracker screen={screen} />
  </div>
);
export default AppPage;

This is my App.jsx:

...
const App = () => (
  <Provider store={Store}>
    <ErrorGlobalPage>
      <ThemeProvider />
      <PersistGate
        persistor={reduxPersistor}
      >
        <Localization>
          <ToastContainer
            hideProgressBar
            position="bottom-right"
            draggable={false}
          />
          <Socket />
          <Routes />
        </Localization>
      </PersistGate>
    </ErrorGlobalPage>
  </Provider>
);
export default App;

This is my index.jsx

...
ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

[admin]

Hi davout,
Could you please look at this example: https://www.htmlelements.com/angular/demos/dropdownlist/reactiveforms/.
The example includes a code which enables or disables a smart-button within an Angular Reactive form depending on conditions.
Best regards,
Peter Stoev
jQWidgets Team
https://www.jqwidgets.com/

[admin]

<div>
<div>Below is my source code:</div>
<div></div>
<div>import * as React from ‘react’;</div>
<div>import AppPage from ‘common/layout/appPage’;</div>
<div>import { Grid, Smart } from ‘smart-webcomponents-react/grid’;</div>
<div>const ProjectCategoryPage = () => {</div>
<div>  const dataSource = new Smart.DataAdapter({</div>
<div>    dataSource: [</div>
<div>      {</div>
<div>        EmployeeID: 1,</div>
<div>        FirstName: ‘Nancy’,</div>
<div>        LastName: ‘Davolio’,</div>
<div>        ReportsTo: 2,</div>
<div>        Country: ‘USA’,</div>
<div>        Title: ‘Sales Representative’,</div>
<div>        HireDate: ‘1992-05-01 00:00:00’,</div>
<div>        BirthDate: ‘1948-12-08 00:00:00’,</div>
<div>        City: ‘Seattle’,</div>
<div>        Address: ‘507 – 20th Ave. E.Apt. 2A’,</div>
<div>      },</div>
<div>    ],</div>
<div>    keyDataField: ‘EmployeeID’,</div>
<div>    parentDataField: ‘ReportsTo’,</div>
<div>    id: ‘EmployeeID’,</div>
<div>    dataFields: [</div>
<div>      ‘EmployeeID: number’,</div>
<div>      ‘ReportsTo: number’,</div>
<div>      ‘FirstName: string’,</div>
<div>      ‘LastName: string’,</div>
<div>      ‘Country: string’,</div>
<div>      ‘City: string’,</div>
<div>      ‘Address: string’,</div>
<div>      ‘Title: string’,</div>
<div>      ‘HireDate: date’,</div>
<div>      ‘BirthDate: date’,</div>
<div>    ],</div>
<div>  });</div>
<div>  const columns = [</div>
<div>    {</div>
<div>      label: ‘First Name’,</div>
<div>      dataField: ‘FirstName’,</div>
<div>      width: 200,</div>
<div>    },</div>
<div>  ];</div>
<div>  return (</div>
<div>    <AppPage screen=”administration.projectCategory”></div>
<div>      <div className=”col-12″></div>
<div>        <Grid</div>
<div>          id=”grid”</div>
<div>          dataSource={dataSource}</div>
<div>          columns={columns}</div>
<div>        /></div>
<div>      </div></div>
<div>    </AppPage></div>
<div>  );</div>
<div>};</div>
<div>export default ProjectCategoryPage;</div>
</div>

[admin]

This is the screenshot of the grid

[admin]

Hello Hristo,
that’s exactly what I need. The 12 hour format ist very untypical here in Germany.
Thank you.
Another great feature would be the minuteInterval from the TimePicker for the DateTimePicker. Just something that I can set the steps of the timepicker to a certain value. Like this demo:
https://www.htmlelements.com/demos/timepicker/settings/
That would make the DateTimePicker really user-friendly.
 
Best Regards,
Gerhard

[Author]

Posts