Products

[admin]

Hi Gerhard,
This is very strange. Do you have an example which shows this kind of error?
Also, alternatively you can take a look at Smart.Input which is more simple version of the TextBox regarding the auto-complete and edit modes functionality of the component.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Ronak,
I would suggest the following:
1. Instead of the link to navigate to a page, make it to call a function.
2. In that function use the Angular Routing API to handle the click.
We have a help tutorial about using angular routing which might help you: https://www.htmlelements.com/docs/angular-routing-tabs/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
Please, refer to: https://www.htmlelements.com/docs/angular-http-crud/
Hope it helps you.
Regards,
Peter
Smart UI Team
Htmlelements.com

[admin]

Hi Ronak,
Could you share a stackblitz example? You can use this template for your example: https://stackblitz.com/github/htmlelements/smart-webcomponents-angular/tree/master/grid/overview
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

I have used code from here, i have not changed anything  https://www.htmlelements.com/angular/demos/gantt/resource-timeline-mode-diagram
Just use below JSON as datasource.
 
<div>
<div>dataSource: Array<object> = [</div>
<div>{</div>
<div>label:’Development’,</div>
<div>synchronized:true,</div>
<div>expanded:true,</div>
<div>disableResources:true,</div>
<div>type:”project”/* Project */,</div>
<div>tasks: [</div>
<div>{</div>
<div>label:’User Interface Design’,</div>
<div>dateStart:’2020-02-01′,</div>
<div>dateEnd:’2020-02-10′,</div>
<div>progress:0,</div>
<div>type:”task”/* Task */,</div>
<div>resources: [{</div>
<div>id:’megan’,</div>
<div>label:’Megan’,</div>
<div>},</div>
<div>{</div>
<div>id:’parth’,</div>
<div>label:’parth’,</div>
<div>}]</div>
<div>},</div>
<div>{</div>
<div>label:’Controllers & Event’,</div>
<div>dateStart:’2020-02-10′,</div>
<div>dateEnd:’2020-02-20′,</div>
<div>progress:0,</div>
<div>type:”task”/* Task */,</div>
<div>resources:’megan'</div>
<div>}</div>
<div>]</div>
<div>}</div>
<div>];</div>
</div>

[admin]

Thanks, will there be a release where this limitation will be handled ? actually,  i have quite few fields against tasks and i am wondering how can i handle this…
 
Thanks once for prompt reply.

[admin]

Thanks, i could solve the issue. by removing the <div><div *ngIf=”columns.length>0; else loading;”></div> and moving all properties setting to ngAfterViewInit. however,  i was wondering how do i creating a loading effect on the page while grid is loading data into it…
 

[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….

[Author]

Posts