Products

[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

[admin]

ok thanks

[admin]

Hi yb,
You can create the Form like that: https://www.htmlelements.com/angular/demos/form/template/ by using the same initialization process like in Angular Reactive Forms. Then you might not set the button’s ‘action’ property so your button will not submit the Form.
Another possible solution is to use Angular Reactive Forms directly. Our Angular components are integrated with Angular Reactive Forms and also with the Template Driven Forms so you have options here. An example of such integration is: https://www.htmlelements.com/angular/demos/dropdownlist/reactiveforms/.
Best regards,
Peter Stoev
Smart HTML Elements
https://www.htmlelements.com/

[Author]

Posts