Tagged: , ,

This topic contains 9 replies, has 2 voices, and was last updated by Avatar GLMSDev 11 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #100999
    Avatar
    GLMSDev
    Participant

    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>

    #101000
    Avatar
    GLMSDev
    Participant

     

    #101002
    Avatar
    admin
    Keymaster

    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/

    #101006
    Avatar
    GLMSDev
    Participant

    https://stackblitz.com/edit/github-gfie78?file=src%2Fapp%2Fapp.component.ts does this works ?

    My data is coming from APIs so….

    #101009
    Avatar
    admin
    Keymaster

    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/

    #101011
    Avatar
    GLMSDev
    Participant

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

     

    #101012
    Avatar
    admin
    Keymaster

    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/

    #101013
    Avatar
    GLMSDev
    Participant

    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>
     

    #101015
    Avatar
    admin
    Keymaster

    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/

    #101017
    Avatar
    GLMSDev
    Participant

    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…

     

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.