Grid Dancing….. :)

[admin]

Hi guys,
I have just started evaluating this grid for my next project and i found Grid is full of rich functionalities. Once i have bounded the grid with data it shows up but every time i click on the node to expand. it collapses it self. Don’t know why that is happening.
However, after sometime it works normally….
Below is my angular code for the same

1. Grid Dances (basically collapses automatically) once i manually expand the grid
2. addEventListener of undefined
3.  that.grid.expandAllRows(); is not working (after loading of data it should have automatically expanded)
4. rendering is slow (when i add checkboxes…. as per code once data is bounded it load checkboxes, is there a way to enable checkboxes from HTML

Below code is at OnInit() function
<div>

<div>this.http.get(‘/api/Project’).subscribe(result => {</div>
<div>result[“result”].forEach(__=>{</div>
<div>varpId=__[“id”];</div>
<div>__[“Id”]=pId;</div>
<div>__[“Team”]=null;</div>
<div>if(__[“id”]==__[“ParentProjectId”]){</div>
<div>__[“ParentProjectId”]=null;</div>
<div>}</div>
<div>this.items.push(__);</div>
<div>this.http.get(‘/api/Fields’).subscribe(__=>{</div>
<div>__[“result”][0].Fields.forEach(element=>{</div>
<div>if(!element.HomeGridHidden){</div>
<div>varstr=element.Name+”:string”;</div>
<div>this.dbfields.push(str);</div>
<div>if(element.hasOwnProperty(‘Format’)){</div>
<div>//column with indicator</div>
<div>this.columns.push({label:element.Name,dataField:element.Name,columnGroup:’Name’,formatFunction(settings: any){</div>
<div>constrowId = settings.row;</div>
<div>constcolumnDataField = settings.column;</div>
<div>consttemplate = settings.template;</div>
<div></div>
<div>if (settings.value ==”On Track”) {</div>
<div>settings.cell.background = ‘#00A45A’;</div>
<div>settings.cell.color = ‘#fff’;</div>
<div>}</div>
<div>elseif (settings.value ==”Off Track”)</div>
<div>{</div>
<div>settings.cell.background = ‘#FFFDE1’;</div>
<div>settings.cell.color = ‘#333’;</div>
<div>}</div>
<div>elseif (settings.value ==”At Risk”)</div>
<div>{</div>
<div>settings.cell.background = ‘#DF3800’;</div>
<div>settings.cell.color = ‘#fff’;</div>
<div>}</div>
<div>settings.value;</div>
<div>}</div>
<div>});</div>
<div>}</div>
<div>elseif(element.Name==”Name”){</div>
<div>//hyper link</div>
<div>this.columns.push({label:element.Name,dataField:element.Name,columnGroup:’Name’,width:250,formatFunction(settings: any){</div>
<div>constrowId = settings.row;</div>
<div>constcolumnDataField = “ProjectType”;</div>
<div>project.id=rowId;</div>
<div>project.Name=settings.row.data.Name;</div>
<div>settings.template = ‘<div style=”display: flex; align-items: center;”>’+</div>
<div>//’‘ +</div>
<div>’‘+settings.value + ‘</div>’;</div>
<div>}</div>
<div>});</div>
<div>}else{</div>
<div>//normal column</div>
<div>this.columns.push({label:element.Name,dataField:element.Name,columnGroup:’Name’,width:50});</div>
<div>}</div>
<div>}</div>
<div>});</div>
<div>this.dataSource = newSmart.DataAdapter(</div>
<div>{</div>
<div>dataSource:this.items,</div>
<div>dataFields:this.dbfields,</div>
<div>keyDataField:’Id’,</div>
<div>parentDataField:’ParentProjectId’,</div>
<div>id:’Id'</div>
<div>});</div>
<div></div>
<div>this.appearance = {alternationCount:2,alternationStart: -1,</div>
<div>showRowHeader:true,</div>
<div>showRowHeaderSelectIcon:true,</div>
<div>showRowHeaderFocusIcon:true,</div>
<div>showRowHeaderEditIcon:true,</div>
<div>autoShowColumnFilterButton:false</div>
<div>};</div>
<div></div>
<div>this.sorting = {enabled:true,mode:’many’};</div>
<div>this.filtering = {enabled:true};</div>
<div>this.editing = {enabled:true,mode:’cell’};</div>
<div>this.behavior = {columnResizeMode:’growAndShrink’}</div>
<div>this.header={visible:true,template:’#toolbarTemplate’};</div>
<div>this.loadPage=true;</div>
<div>// init code.</div>
<div>constthat = this;</div>
<div>letrowId = null;</div>
<div>that.grid.addEventListener(‘contextmenu’,function(event: MouseEvent){</div>
<div>event.stopPropagation();</div>
<div>event.preventDefault();</div>
<div>that.menu.open(event.pageX,event.pageY);</div>
<div>returnfalse;</div>
<div>});</div>
<div>that.menu.addEventListener(‘itemClick’,function(event: CustomEvent){</div>
<div>if (rowId === undefined) {</div>
<div>return;</div>
<div>}</div>
<div></div>
<div>if (event.detail.item.getAttribute(‘data-id’) === ‘projectinfo’) {</div>
<div>//that.grid.beginEdit(rowId, null);</div>
<div>//this.gotoDetails(‘/proj-info’,project.id,project.Name);</div>
<div>this.router.navigate([‘/proj-info’,project.id,project.Name]).then( (e)=>{</div>
<div>if (e) {</div>
<div>console.log(“Navigation is successful!”);</div>
<div>}else{</div>
<div>console.log(“Navigation has failed!”);</div>
<div>}</div>
<div>});</div>
<div>}elseif (event.detail.item.getAttribute(‘data-id’) === ‘resources’) {</div>
<div>that.grid.beginEdit(rowId,null);</div>
<div>}elseif (event.detail.item.getAttribute(‘data-id’) === ‘financials’) {</div>
<div>that.grid.beginEdit(rowId,null);</div>
<div>}elseif (event.detail.item.getAttribute(‘data-id’) === ‘issues’) {</div>
<div>that.grid.beginEdit(rowId,null);</div>
<div>}elseif (event.detail.item.getAttribute(‘data-id’) === ‘risks’) {</div>
<div>that.grid.beginEdit(rowId,null);</div>
<div>}</div>
<div>else{</div>
<div>//that.grid.deleteRow(rowId);</div>
<div>}</div>
<div>});</div>
<div>that.grid.addEventListener(‘rowClick’,function(event: CustomEvent){</div>
<div>if (event.detail.originalEvent.which === 3) {</div>
<div>constrow = event.detail.row;</div>
<div>rowId = row.id;</div>
<div>project.id=rowId;</div>
<div>project.Name=row.data.Name;</div>
<div>event.detail.originalEvent.stopPropagation();</div>
<div>}</div>
<div>});</div>
<div>that.grid.addEventListener(‘rowDragging’,function(event: CustomEvent){</div>
<div>event.detail.data.data();</div>
<div>event.detail.data.feedbackLine.style.display = ‘none’;</div>
<div>});</div>
<div>that.grid.addEventListener(‘rowDragEnd’,function(event: CustomEvent){</div>
<div>constrow = event.detail.row;</div>
<div>constpointerEvent = event.detail.originalEvent;</div>
<div>});</div>
<div>that.grid.appearance.showColumnHeaderLines = false;</div>
<div>that.grid.checkBoxes.hasThreeStates=false;</div>
<div>that.grid.checkBoxes.visible=true;</div>
<div>that.grid.appearance.showColumnLines = false;</div>
<div>that.grid.appearance.showRowLines = false;</div>
<div>that.grid.expandAllRows();</div>
<div>});</div>
<div>});</div>
<div>});</div>

</div>

[admin]

 

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

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 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]

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

[Author]

Posts