1. Home
  2. Forum
  3. Angular - EJ 2
  4. dynamic columns

dynamic columns

Hi

I am using *ngFor for rendering the columns.

But when I am navigating to another url then screen is going blank.





Going to another url:-




In console:-




When columns are not dynamic then everything goes well.


Kindly 


7 Replies
RR Rajapandi Ravi Syncfusion Team July 29, 2021 12:13 PM UTC

Hi Namita, 

Greetings from syncfusion support 

From your update, we could see that you are facing a script error when using ngFor for rendering the columns while navigating to another URL. Based on your We have prepared a sample and checked your reported problem and try to reproduce the problem at our end. But it was unsuccessful. While navigating another URL we have not faced any script error. Please refer to the below sample and video demo for more information. 



If you still face the issue, please share the below details that would be helpful for us to provide a better solution.  

1)    Please share your Syncfusion package version 

2)    If you are facing any script error in the console window, please share the screenshot. 

3)    Please replicate the issue with our above attached sample or share any issue reproducible sample. 
 
Regards,
Rajapandi R 
 


NA Namita July 29, 2021 03:56 PM UTC

Hi,

Thanks for your reply.

I am still facing the issue. My data is containing %, numeric values and other characters as well. I want to render all as a string.


I am using dynamic column rendering in other modules as well. There it is working fine. I guess because data is containg special characters, this issue is coming.


Namita


RR Rajapandi Ravi Syncfusion Team July 30, 2021 07:56 AM UTC

Hi Namita, 

Thanks for the update 

Before we start providing solution on your query, we need some information for our clarification. So please share the below details that would be helpful for us to provide better solution. 

1)       Please share your sample datasource structure, we would like to check how you are defining % and special characters. 

2)       Please share your complete Grid rendering code, we would like to check how you are rendering columns dynamically. So please share your component.ts and component.html file. 

3)       Please share at what case you are navigating to another page and also please share the code example. 

4)       If possible, please share any issue reproducible sample that would be helpful for us to validate the problem. 

5)       Please share issue scenario in video demonstration format. 

Regards, 
Rajapandi R 


NA Namita August 3, 2021 05:18 AM UTC

Hi


  1. My data source format is:-



2. I want to print every column as string.

My Grid rendering is:-

 <ejs-grid *ngIf="showOnlyReport" #ViewReportGrid id='ViewReportGrid' [dataSource]="ReportData"

              [allowExcelExport]='true' [allowPdfExport]='true' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)'

              gridLines='Both' allowFiltering='true' [filterSettings]='filterSettings' height="400" [allowResizing]='true'>

      <!--<ejs-grid [dataSource]="ReportData">-->


      <e-columns>

        <e-column *ngFor="let item of HeaderList" field='{{item}}'

                  headerText='{{item}}'

                  width=150>

        </e-column>

      </e-columns>


      <!--<e-columns>


    <div *ngFor="let item of HeaderList">

      <e-column [field]="item" [headerText]="item" width="130"></e-column>

    </div>

  </e-columns>-->


    </ejs-grid>


    3.  After executing above grid when I am going another page through Menus.




After clicking another menu, following screen is coming with mentioned(in previous message.) console error.


This is my report. I just want every columnshould render as string without considering its format



han






RR Rajapandi Ravi Syncfusion Team August 5, 2021 01:26 PM UTC

Hi Namita, 

Thanks for the update 

Based on your shared datasource structure, we have prepared a sample and try to reproduce your reported problem. But it was unsuccessful. While navigating another page the Grid binding properly with your datasource structure. Please refer the below code example and sample for more information. 

 
export class GridNormalComponent { 
  public data: any = sampleData; 
  public columns: any; 
 
  ngOnInit(): void { 
    this.columns = [{ field: "KPI", headerText: "KPI", width: "90" }, 
    { field: "Weightage", headerText: "Weightage", width: "90" }, 
    { field: "UOM", headerText: "UOM", width: "90" }, 
    { field: "Threshold", headerText: "Threshold", width: "90" }, 
    { field: "Periods", headerText: "Periods", width: "90" }] 
  } 
} 
 


Please share the below details that would be helpful for us to provide better solution.  

1)       Please share your complete Grid rendering code, we would like to check how you are rendering columns dynamically. So please share your component.ts and component.html file.  

2)       If possible, please share any issue reproducible sample that would be helpful for us to validate the problem.  

3)       Please share issue scenario in video demonstration format. 

Screenshot: 

 

Regards,
Rajapandi R 
 


NA Namita August 9, 2021 01:46 AM UTC

Hi


Can we schedule a call please?


Thanks


RR Rajapandi Ravi Syncfusion Team August 9, 2021 12:23 PM UTC

Hi Namita, 
 
We have created a new incident under your Direct trac account. We suggest you follow up with the incident for further updates. Please log in using the below link.    
   
   
Regards, 
Rajapandi R 


Loader.
Up arrow icon