Grid

[vin]

i am getting this error and Portfolio Level Permission data is showing sometimes and does not show sometimes

I have 3 similar grids in 3 tabs

is this issue with column?

I am first loading the dataPortfolioAccessTypes

Then loading the grid data

And i have a modal in the bottom

 <e-column field='roleId' foreignKeyValue='name' foreignKeyField='id'

                                                        [dataSource]='dataPortfolioAccessTypes'

                                                        headerText='Portfolio Level Permission' textAlign='Left'

                                                        width=90></e-column>

<ejs-grid #grid (actionBegin)='actionBegin($event)'

                                                (actionComplete)="actionComplete($event)" (cellEdit)="cellEdit($event)"

                                                [dataSource]='portfolioAccessData' (rowSelected)='rowSelected($event)'

                                                [allowFiltering]='true' [filterSettings]='filterOptions'

                                                [allowPaging]='true' [allowSorting]='true' [pageSettings]='pageOptions'

                                                [editSettings]='editSettings' [toolbar]='toolbar'>

                                                <e-columns>

                                                    <e-column [allowEditing]='false' field='personageName'

                                                        headerText='Name' textAlign='Left' width=100></e-column>

                                                    <e-column [allowEditing]='false' field='personageJobTitle'

                                                        headerText='Title' textAlign='Left' width=100></e-column>

                                                    <e-column field='roleId' foreignKeyValue='name' foreignKeyField='id'

                                                        [dataSource]='dataPortfolioAccessTypes'

                                                        headerText='Portfolio Level Permission' textAlign='Left'

                                                        width=90></e-column>

                                               

                                                </e-columns>

                                            </ejs-grid>

   <ejs-dialog id='dialog' #ejDialog isModal='true' [visible]='visible' header='Add Users' width='70%'>

                    <app-new-portfolio-users [accessTypes]="accessTypes" [portfolioId]="portfolioId"

                        [programId]="programId" [projectId]="projectId"  [dummyData]="rand" [isPortfolio]="isPortfolio" [isProgram]="isProgram" [isProject]="isProject" >

                    </app-new-portfolio-users>

                </ejs-dialog>

[vin]

i am getting this error and Portfolio Level Permission data is showing sometimes and does not show sometimes

I have 3 similar grids in 3 tabs

is this issue with column?

I am first loading the dataPortfolioAccessTypes

Then loading the grid data

And i have a modal in the bottom

 <e-column field='roleId' foreignKeyValue='name' foreignKeyField='id'

                                                        [dataSource]='dataPortfolioAccessTypes'

                                                        headerText='Portfolio Level Permission' textAlign='Left'

                                                        width=90></e-column>

<ejs-grid #grid (actionBegin)='actionBegin($event)'

                                                (actionComplete)="actionComplete($event)" (cellEdit)="cellEdit($event)"

                                                [dataSource]='portfolioAccessData' (rowSelected)='rowSelected($event)'

                                                [allowFiltering]='true' [filterSettings]='filterOptions'

                                                [allowPaging]='true' [allowSorting]='true' [pageSettings]='pageOptions'

                                                [editSettings]='editSettings' [toolbar]='toolbar'>

                                                <e-columns>

                                                    <e-column [allowEditing]='false' field='personageName'

                                                        headerText='Name' textAlign='Left' width=100></e-column>

                                                    <e-column [allowEditing]='false' field='personageJobTitle'

                                                        headerText='Title' textAlign='Left' width=100></e-column>

                                                    <e-column field='roleId' foreignKeyValue='name' foreignKeyField='id'

                                                        [dataSource]='dataPortfolioAccessTypes'

                                                        headerText='Portfolio Level Permission' textAlign='Left'

                                                        width=90></e-column>

                                               

                                                </e-columns>

                                            </ejs-grid>

   <ejs-dialog id='dialog' #ejDialog isModal='true' [visible]='visible' header='Add Users' width='70%'>

                    <app-new-portfolio-users [accessTypes]="accessTypes" [portfolioId]="portfolioId"

                        [programId]="programId" [projectId]="projectId"  [dummyData]="rand" [isPortfolio]="isPortfolio" [isProgram]="isProgram" [isProject]="isProject" >

                    </app-new-portfolio-users>

                </ejs-dialog>

Any help?

[Rajapandi Ravi]

Hi vin, 

Greetings from syncfusion support 

Based on your query we have prepared a sample and tried to reproduce your reported problem. But it was unsuccessful. Please refer the below code example and sample for more information. 

<ejs-tab #tab id="tab_wizard" heightAdjustMode="None" height=390 showCloseButton=false> 

            <e-tabitems> 

                <e-tabitem [header]='headerText[1]' disabled=true>       

                    <ng-template #content> 

                        <div id='selectTrain'> 

                            <ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]="pageSettings"  

    [allowSorting]='true'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [validationRules]='orderidrules' isPrimaryKey='true'></e-column> 

            <e-column field='CustomerID' headerText='Customer Name' width='150' 

            foreignKeyValue='ContactName' foreignKeyField='CustomerID' [dataSource]='customerData' [validationRules]='orderidrules'></e-column> 

            .  .  .  .  .  .  .  .  .  .  .  .  . 

            .  .  .  .  .  .  .  .  .  .  .  .  . 

        </e-columns> 

    </ejs-grid> 

                            <br /> 

                        </div> 

                    </ng-template> 

                </e-tabitem> 

            </e-tabitems> 

        </ejs-tab> 

Sample: https://stackblitz.com/edit/angular-psf7gh?file=app.component.html 

Screenshot: 

 

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution.  

1)       Share us your exact requirement scenario with detailed description.  

2)       Please share your syncfusion package version. 

3)       Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R 

[vin]

Hi vin, 

Greetings from syncfusion support 

Based on your query we have prepared a sample and tried to reproduce your reported problem. But it was unsuccessful. Please refer the below code example and sample for more information. 

<ejs-tab #tab id="tab_wizard" heightAdjustMode="None" height=390 showCloseButton=false> 

            <e-tabitems> 

                <e-tabitem [header]='headerText[1]' disabled=true>       

                    <ng-template #content> 

                        <div id='selectTrain'> 

                            <ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]="pageSettings"  

    [allowSorting]='true'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [validationRules]='orderidrules' isPrimaryKey='true'></e-column> 

            <e-column field='CustomerID' headerText='Customer Name' width='150' 

            foreignKeyValue='ContactName' foreignKeyField='CustomerID' [dataSource]='customerData' [validationRules]='orderidrules'></e-column> 

            .  .  .  .  .  .  .  .  .  .  .  .  . 

            .  .  .  .  .  .  .  .  .  .  .  .  . 

        </e-columns> 

    </ejs-grid> 

                            <br /> 

                        </div> 

                    </ng-template> 

                </e-tabitem> 

            </e-tabitems> 

        </ejs-tab> 

Sample: https://stackblitz.com/edit/angular-psf7gh?file=app.component.html 

Screenshot: 

 

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution.  

1)       Share us your exact requirement scenario with detailed description.  

2)       Please share your syncfusion package version. 

3)       Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R 

In your sample  https://stackblitz.com/edit/angular-psf7gh?file=app.component.html

where is    field='roleId' foreignKeyValue='name' foreignKeyField='id'

<ejs-grid #availableTrain width="100%">

                                <e-columns>

                                    <e-column field='TrainNo' headerText='Train No' width=120 type='number'></e-column>

                                    <e-column field='Name' headerText='Name' width=140></e-column>

                                    <e-column field='Departure' headerText='Departure' width=120></e-column>

                                    <e-column field='Arrival' headerText='Arrival' width=140></e-column>

                                    <e-column field='Availability' headerText='Availability' width=140 type='number'></e-column>

                                </e-columns>

                            </ejs-grid>

[Rajapandi Ravi]

Hi vin, 

Sorry for the inconvenience. 

It may be the stackblitz issue. Now we have modified the sample. Please refer the below code example and sample for more information. 

<ejs-tab #tab id="tab_wizard" heightAdjustMode="None" height=390 showCloseButton=false> 

            <e-tabitems> 

                <e-tabitem [header]='headerText[1]' disabled=true>       

                    <ng-template #content> 

                        <div id='selectTrain'> 

                            <ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]="pageSettings"  

    [allowSorting]='true'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [validationRules]='orderidrules' isPrimaryKey='true'></e-column> 

            <e-column field='CustomerID' headerText='Customer Name' width='150' 

            foreignKeyValue='ContactName' foreignKeyField='CustomerID' [dataSource]='customerData' [validationRules]='orderidrules'></e-column> 

            .  .  .  .  .  .  .  .  .  .  .  .  . 

            .  .  .  .  .  .  .  .  .  .  .  .  . 

        </e-columns> 

    </ejs-grid> 

                            <br /> 

                        </div> 

                    </ng-template> 

                </e-tabitem> 

            </e-tabitems> 

        </ejs-tab> 

Sample: https://stackblitz.com/edit/angular-psf7gh-kqbuge?file=app.component.html 

Screenshot: 

 

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution.  

1)       Share us your exact requirement scenario with detailed description.  

2)       Please share your syncfusion package version. 

3)       Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards,
Rajapandi R