Grid Column Template with ProgressBar -> Cannot read property 'getBoundingClientRect' of null

[Laurin S]

Hi, I want to display a ProgressBar in a cell of my Grid. Using the template property of the column I'm getting the following error:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

    at ProgressBarComponent.ProgressBar.setSecondaryElementPosition (progressbar.js:140)

    at ProgressBarComponent.ProgressBar.renderAnnotations (progressbar.js:110)

    at ProgressBarComponent.ProgressBar.renderElements (progressbar.js:119)

    at ProgressBarComponent.ProgressBar.controlRendering (progressbar.js:81)

    at Observer.<anonymous> (progressbar.js:77)

    at Observer.notify (observer.js:84)

    at ProgressBarComponent.ComponentBase.trigger (component-base.js:183)

    at ProgressBarComponent.ProgressBar.render (progressbar.js:77)

I'm currently using this code inside my Grid:

 <ColumnsDirective>

        <ColumnDirective

          field="progress"

          headerText="Progress"

          template={(e) => {

            return <ProgressBarComponent type="Linear" value={20} />;

          }}

        />

      </ColumnsDirective>

[Rajapandiyan Settu]

Hi Laurin, 

 

Greetings from Syncfusion support. 

 

In the dataBound event of Grid, you can render the progressBar control in the grid cell. Refer to the below code example and sample for more information. 

 

dataBound: https://ej2.syncfusion.com/react/documentation/api/grid/#databound 

 

 

export class SparkGrid extends SampleBase { 

  ----- 

  renderSparkline() { 

    setTimeout(() => { 

      for (let i = 1; i < 21; i++) { 

        let linearProgress1 = new ProgressBarComponent({ 

          type: "Linear", 

          height: "60", 

          value: 100, 

          animation: { 

            enable: true, 

            duration: 2000, 

            delay: 0 

          } 

        }); 

        linearProgress1.appendTo("#spkline" + i); 

      } 

    }, 500); 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            dataSource={orderdata} 

            dataBound={this.renderSparkline.bind(this)} 

          > 

            <ColumnsDirective> 

              <ColumnDirective 

                headerText="Tax per annum" 

                template={props => { 

                  return <div id={"spkline" + props.EmployeeID} />; 

                }} 

                textAlign="Center" 

                width="100" 

              /> 

            </ColumnsDirective> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

 

 

Sample: https://stackblitz.com/edit/react-vebknw-lccyox?file=index.js  

 

Please refer to the below demo sample which illustrates how to render the chart control in EJ2 grid. 

 

Demo: https://ej2.syncfusion.com/react/demos/#/material/sparkline/spark-grid  

progressBar: https://ej2.syncfusion.com/javascript/documentation/progress-bar/es5-getting-started/ 

Note: If paging is enabled in the grid, then render the chart control in dataBound event of grid instead of created event.  

Please get back to us if you need further assistance on this. 

 

Regards,   

Rajapandiyan S 

[Elias]

I have the same issue but on Angular. What is the proper way to draw and update ejs-grid + ejs-progressbar using Angular?

[Mohammed Farook J]

Hi Elias, 

 

Thanks for your patience.  

 

 

We have created a sample based on your requirement is ‘Grid with Progress-bar’ by using dataBound event of Grid. Please find the sample for your reference. 

Sample : https://stackblitz.com/edit/angular-muhtox  

 

 

Regards, 

J Mohammed Farook  

[Mehvish Fatma]

Hi Elias, 

 

Thanks for your patience.  

 

 

We have created a sample based on your requirement is ‘Grid with Progress-bar’ by using dataBound event of Grid. Please find the sample for your reference. 

Sample : https://stackblitz.com/edit/angular-muhtox  

 

 

Regards, 

J Mohammed Farook  

Hi.

I tried the stackblitz link you have posted, but I am facing the same issue in the stackblitz example when the screen size is changed. Multiple errors of  'Cannot read property 'getBoundingClientRect' of null'  are being logged each time the screen changes. Can you please tell me how this can be fixed

[Rajapandiyan Settu]

Hi Mehvish, 

 

Thanks for contacting Syncfusion support. 

 

Based on the provided information we could understand that you are facing problem with the sample shared in the previous update. We tried to reproduce the same from our end unfortunately could not as the Chart components were rendered properly on resizing the screen. Please find the below video demo based on this for your reference, 

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/grid_chart_resize-1051947686.zip 

 

So please share us the below details to validate further on this, 

 

1. Let us know the replication procedure for reproducing the problem.
2. Video demo of the problem.
3. Share your browser and machine specification details where the problem is reproduced.

 

Regards,   

Rajapandiyan S 

[Mehvish Fatma]

Hi Mehvish, 

 

Thanks for contacting Syncfusion support. 

 

Based on the provided information we could understand that you are facing problem with the sample shared in the previous update. We tried to reproduce the same from our end unfortunately could not as the Chart components were rendered properly on resizing the screen. Please find the below video demo based on this for your reference, 

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/grid_chart_resize-1051947686.zip 

 

So please share us the below details to validate further on this, 

 

1. Let us know the replication procedure for reproducing the problem.
2. Video demo of the problem.
3. Share your browser and machine specification details where the problem is reproduced.

 

Regards,   

Rajapandiyan S 

Hi Rajapandiyan,

The issue occurs when you navigate to page 2 from page 1 on the grid, and then change the screen size. I am attaching a screenshot of the error.

[Rajapandiyan Settu]

Hi Mehvish, 

Thanks for your update.  

We have validated your reported scenario. We have considered this as a bug and logged a defect report as “Console error while rendering progress bar inside grid”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and the fix will be available in our upcoming weekly patch release which is expected to be rolled out on 31^st March 2021. We appreciate your patience until then. You can keep track of the bug from the feedback portal below. 

Feedback Link : https://www.syncfusion.com/feedback/23209/ 

Regards, 

Rajapandiyan S 

[Baskaran S]

  

Hi Mehvish, 

  

Thanks for being patience. 

  

We are glad to announce that our v19.1.64 patch release is rolled out, we have added the fix for the reported issue and is available for download under the following link.  

  

Npm Packages: https://www.npmjs.com/~syncfusionorg 

Sample:  https://stackblitz.com/edit/angular-muhtox-dwkq21?file=main.ts 

  

We appreciate your patience in waiting for this release. Let me know, if you need further assistance.  

  

Regards,  

Baskaran S