field having null value is not showing in child grid

[RakhiS]

hi,

child grid with null value of one of the column is not displaying any columns. please help

[Rajapandi Ravi]

Hi RakhiS, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you are maintaining child Grid with null value in one of the Column and facing the problem. Based on your query we have prepared a sample and tried to reproduce your reported scenario at our end. But it works fine from our end. 

In the below sample, we have maintained the null value in the child Grid field “ShipRegion”. 

 

export class AppComponent { 

  @ViewChild("grid") 

  public grid: GridComponent; 

  public parentData: Object[]; 

  public childGrid: any; 

  public filterSettings: Object; 

 

  ngOnInit(): void { 

    this.toolbar = ["ExcelExport", "PdfExport", "CsvExport"]; 

    this.filterSettings = { type: "Menu" }; 

    this.parentData = employeeData; 

    this.childGrid = { 

      dataSource: orderDatas, 

      queryString: "EmployeeID", 

      allowPaging: true, 

      pageSettings: { pageSize: 6, pageCount: 5 }, 

      columns: [ 

        .  .  .  .  .  .  .  . 

        { field: "ShipRegion", headerText: "Ship Region", width: 150 } //null value field 

      ] 

    }; 

  } 

} 

 

Sample:  https://stackblitz.com/edit/angular-ugf6r7-yq7ryu?file=app.component.ts 

Screenshot: 

 

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 exact requirement scenario with a detailed description. 

2)        Please share the complete Grid rendering code. 

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

Regards, 

Rajapandi R 

[RakhiS]

Hi,

thanks for your reply!

but my data is coming in json format from db

public childGrid: GridModel = {

    queryString: 'invoiceId',

    queryCellInfo: this.tooltip,

    width: '80%',

    columns: [

      { field: 'billNo', headerText: 'Bill No', textAlign: 'Left', width: 120 },

      { field: 'ratePerCase', headerText: 'Rate/Case', textAlign: 'Right', width: 120, format: 'n2' },

      { field: 'qtyInCases', headerText: 'Qty Cases', textAlign: 'Left', width: 120 },

      { field: 'qtyLooseBottle', headerText: 'Qty Bottle', textAlign: 'Left', width: 120 },

      { field: 'qtyBulkLiters', headerText: 'Qty BL', textAlign: 'Left', width: 120, format: 'n2' },

      { field: 'batchNo', headerText: 'Batch No', textAlign: 'Left', width: 120 }

    ]

  };

 this.purchaseRegisterGrid.childGrid.dataSource = JSON.parse(JSON.stringify(data));

1. batchNo: null
2. billNo: "Bill 001"
3. invoiceId: 42
4. mfgDate: null
5. qtyBulkLiters: 0
6. qtyInCases: 10
7. qtyLooseBottle: 0
8. ratePerCase: 30
9. 
   
10. now in child grid I am getting no dat to display and this is because batch is null.
11. 
    
12. 
    
13. 
    
14. 
    
15. 
    
16. 
    

[Rajapandi Ravi]

Hi RakhiS, 

Thanks for the update 

Your reported problem occurs if the column type is not properly set. If the first row of a column contains undefined or null then column type needs to be defined for that as with this initial row data only the column type will be set and based on the column type the filtering and other Grid actions will be performed. 

So if null or undefined value is present for a column in the initial row data and column type is not set for that, then the type will be set as ‘null’ which causes problems as you reported. This is the Grid’s default behavior. So we suggest you to resolve this by setting the column type in-case the first row data has null or undefined value. 

More details on this can be checked in the below documentation link, 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-type  

Regards,
Rajapandi R 

[RakhiS]

I defined the column type as string,but unfortunately it is not working

[Rajapandi Ravi]

Hi RakhiS, 

Thanks for the update 

Before start providing a solution to your query we need more information for our clarification, Please share the below details that would be helpful for us to provide a better solution. 

1)        Please share your exact requirement scenario with a detailed description. 

2)        Please let us know the Syncfusion package version used in your application. 

3)        Please share the complete Grid rendering code. 

4)        Please share the Video demonstration of the problem. 

5)        Share a simple reproduceable sample if possible. 

Regards, 

Rajapandi R 

 

[RakhiS]

public childGrid: GridModel = {

    queryString: 'invoiceId',

    queryCellInfo: this.tooltip,

    width: '80%',

    columns: [

      { field: 'billNo', headerText: 'Bill No', textAlign: 'Left', width: 120 },

      { field: 'ratePerCase', headerText: 'Rate/Case', textAlign: 'Right', width: 120, format: 'n2' },

      { field: 'qtyInCases', headerText: 'Qty Cases', textAlign: 'Left', width: 120 },

      { field: 'qtyLooseBottle', headerText: 'Qty Bottle', textAlign: 'Left', width: 120 },

      { field: 'qtyBulkLiters', headerText: 'Qty BL', textAlign: 'Left', width: 120, format: 'n2' },

     

{ field: 'batchNo', headerText: 'Batch No', textAlign: 'Left', width: 120 , format: 'string' }

    ]

  };

 this.purchaseRegisterGrid.childGrid.dataSource = JSON.parse(JSON.stringify(data));  

1. 
   

Since the batch no is null, my child grid is not displaying ay data, 

when i comment this line of batch no from grid difination then other values are getting displayed.

After json.parse my data is like this which I copied from console:

1. batchNo: null  //from db this is my data
2. billNo: "Bill 001"
3. invoiceId: 42
4. mfgDate: null
5. qtyBulkLiters: 0
6. qtyInCases: 10
7. qtyLooseBottle: 0
8. ratePerCase: 30
9. 
   

I hope you are getting it now

[Rajapandi Ravi]

Hi RakhiS, 

Thanks for the update 

We have analyzed your query and we could see that you are facing a problem while maintaining a null value in Grid column. So based on your share code example we have prepared a sample and try to reproduce your reported problem. But it works fine from our end. Please refer the below code example, sample and screenshot for more information. 

 

this.childGrid = { 

      dataSource: JSON.parse(JSON.stringify(cusdatas)), 

      queryString: "invoiceId", 

      allowPaging: true, 

      pageSettings: { pageSize: 6, pageCount: 5 }, 

      columns: [ 

        { field: 'billNo', headerText: 'Bill No', textAlign: 'Left', width: 120 }, 

        { field: 'ratePerCase', headerText: 'Rate/Case', textAlign: 'Right', width: 120, format: 'n2' }, 

        { field: 'qtyInCases', headerText: 'Qty Cases', textAlign: 'Left', width: 120 }, 

        { field: 'qtyLooseBottle', headerText: 'Qty Bottle', textAlign: 'Left', width: 120 }, 

        { field: 'qtyBulkLiters', headerText: 'Qty BL', textAlign: 'Left', width: 120, format: 'n2' }, 

 

        { field: 'batchNo', headerText: 'Batch No', textAlign: 'Left', width: 120, format: 'string' } 

      ] 

    }; 

 

Sample: https://stackblitz.com/edit/angular-ugf6r7-otgey4?file=app.component.ts 

Screenshot:  

 

If issue is still not resolved please share us a simple sample application to replicate the issue or try reproducing it in the above provided sample so that we can check and provide proper solution for it. 

Regards, 

Rajapandi R