JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Grid Dancing….. :)
- This topic has 9 replies, 2 voices, and was last updated 4 years, 1 month ago by admin.
-
AuthorPosts
-
August 25, 2020 at 7:05 am #100999adminKeymaster
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- Grid Dances (basically collapses automatically) once i manually expand the grid
- addEventListener of undefined
- that.grid.expandAllRows(); is not working (after loading of data it should have automatically expanded)
- 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>
August 25, 2020 at 7:07 am #101000adminKeymaster
August 25, 2020 at 7:17 am #101002adminKeymasterHi 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/August 25, 2020 at 8:13 am #101006adminKeymasterhttps://stackblitz.com/edit/github-gfie78?file=src%2Fapp%2Fapp.component.ts does this works ?
My data is coming from APIs so….August 25, 2020 at 10:09 am #101009adminKeymasterHi 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/August 25, 2020 at 1:01 pm #101011adminKeymasterThanks 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>”
August 25, 2020 at 2:53 pm #101012adminKeymasterHi 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/August 26, 2020 at 5:38 am #101013adminKeymasterThanks. 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>
August 26, 2020 at 6:04 am #101015adminKeymasterHi 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/August 26, 2020 at 2:18 pm #101017adminKeymasterThanks, 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…
-
AuthorPosts
- You must be logged in to reply to this topic.