Products

[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/

[admin]

Hi Peter,
The onReady is called when the Menu is rendered and this is bound to the Angular’s lifecycle after the view is initialized i.e it should work.
Another possible solution could be to data bind the Menu to a dataSource by using initialization similar to Angular’s Reactive Forms. We have an example about binding a menu to a data source here: https://www.htmlelements.com/angular/demos/menu/data-source/
Best regards,
Peter Stoev
jQWidgets Team
https://www.jqwidgets.com/

[admin]

I wanted to use the button of the library and specify with function to call something likee that:
<smart-form-control  align="right" control-type="button" label="Submit"  class="primary" (click)="myFunc($event)"></smart-form-control>

[admin]

Hi davout,
window.Smart.License = “the license key”; is enough for unlocking a npm package. This code line should be placed in app.module.ts in case of Angular, App.jsx after the imports in case of App.jsx or after the imports in case of Javascript.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi yb,
If you do not define a submit button in your Form, you can manually submit it by calling form.submit();
Hope this helps.
Best regards,
Peter Stoev
Smart HTML Elements
https://www.htmlelements.com/

[Author]

Posts