- This topic has 9 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
-
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>
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>”
- You must be logged in to reply to this topic.