1. Home
  2. Forum
  3. Angular - EJ 2
  4. Drop Down edit in child grid is not displaying all data.

Drop Down edit in child grid is not displaying all data.

I am setting up a child grid. When I try to add an entry into the child grid, the drop down is showing only for of the possible 22 results. 


this.reviewInfoGridInstance = new Grid({
  dataSource: child1Data,
  height: 'auto',
  width: 'auto',
  load() {
    this.editSettings.allowAdding = reviewId === null;
    this.editSettings.allowEditing = reviewId !== null;
  },
  toolbar: ['Edit', 'Update', 'Cancel', 'Add'],
  editSettings: {
    allowEditing: false,
    allowAdding: false,
    allowDeleting: false,
    mode: 'Normal',
    showDeleteConfirmDialog: true,
  },
  columns: [
    {field: 'rwtLoannumber', headerText: 'RWT Loan #', allowEditing: false},
    {
      field: 'reviewType', headerText: 'Review Type', textAlign: 'Left', allowEditing: true, edit: {
        params: {
          allowFiltering: true,
          dataSource: this.reviewTypes,
          fields: {text: 'reviewTypeName', value: 'reviewTypeName'},
          query: new Query(),
          actionComplete: () => false,
        },
      }
    },
    {
      field: 'disaster', headerText: 'Disaster Type', textAlign: 'Left', allowEditing: true, edit: {
        params: {
          allowFiltering: true,
          dataSource: new DataManager(this.disasterType),
          fields: {text: 'disasterName', value: 'disasterName'},
          query: new Query(),
          actionComplete: () => false,
        }
      }
    },
    {
      field: 'createdDt',
      headerText: 'Created Date',
      format: 'MM/dd/yyyy',
      type: 'date',
      textAlign: 'Right',
      visible: false,
    },
    {field: 'createdBy', headerText: 'Created By', allowEditing: false},
    {
      field: 'status', headerText: 'Review Status', allowEditing: false, editType: 'dropdownedit', edit: {
        params: {
          allowFiltering: true,
          dataSource: new DataManager(this.reviewStatus),
          fields: {text: 'statusName', value: 'statusName'},
          query: new Query(),
          actionComplete: () => false,
        },
      }
    },
    {field: 'modifiedDt', headerText: 'Status Date', format: 'MM/dd/yyyy', type: 'date', allowEditing: false,},
    {field: 'statusComment', headerText: 'Comment', allowEditing: true,},
  ],
  actionBegin(args: AddEventArgs) {
    if (args.requestType === 'add') {
      (args.data as object)['rwtLoannumber'] = rwLoanNumber;
      that.setDropDownData();
    }

    if (args.requestType === 'beginEdit') {
      that.setDropDownData('edit');
    }
  },
  actionComplete(args) {
    if ("action" in args && args.requestType === 'save') {
      if (args.action === 'edit') {
        that.editReview(args, state);
      }
      if (args.action === 'add') {
        args.data['taskId'] = taskId;
        that.addReview(args);
      }
    }
  },
});
this.reviewInfoGridInstance.appendTo(element1);
const element2 = args.detailElement.querySelector('.childGrid2');

3 Replies
RS Rajapandiyan Settu Syncfusion Team February 25, 2022 10:12 AM UTC

Hi Maxwell, 

Thanks for contacting Syncfusion support. 

We have prepared a simple sample based on your code example and the dropdown shows all the unique values in the popup from its dataSource.  


The dropdown shows the values based on its dataSource. If you are having 22 unique values in its dataSource then the popup shows only 22 values. 


Note: If you want to change the dataSource of dropdown through the editParams, you need to set the editType as `dropdownedit` 

Let us know if you have any concerns. 

Regards, 
Rajapandiyan S 


MS Maxwell Sands February 28, 2022 11:15 PM UTC

Hey if you reread what I said, the dropdown is not showing all of the data in its dataSource. Here it is in the console with all the data in the dataSource, but it is only showing four items from the array. 


  1. allowEditing
    : true
  2. allowFiltering: true
  3. allowGrouping: true
  4. allowReordering: true
  5. allowResizing: true
  6. allowSearching: true
  7. allowSorting: true
  8. autoFit: true
  9. disableHtmlEncode: true
  10. edit: DefaultEditCell
    1. params:
      1. allowFiltering: true
      2. dataSource: Array(22)
        1. length: 22
  11. enableGroupByFormat: false
  12. field: "reviewType"
  13. foreignKeyField: "reviewType"
  14. headerText: "Review Type"
  15. index: 1
  16. showColumnMenu: true
  17. showInColumnChooser: true
  18. sortDirection: "Descending"
  19. textAlign: "Left"
  20. type: null
  21. uid: "grid-column53"
  22. visible: true
  23. width: undefined



RS Rajapandiyan Settu Syncfusion Team March 1, 2022 01:56 PM UTC

Hi Maxwell, 

Thanks for your update. 

We have prepared a simple sample with the shared dataSource and tried to replicate the reported behavior. But it was unsuccessful at our end. The dropdown shows all the unique data available in the dataSource. Find the below sample for your reference. 


Kindly share the below details to replicate the issue from our end. 

  1. Share the code of setDropDownData() and setDropDownData(‘edit’).
  2. Share the video demo of the reported behavior.
  3. Share the issue reproducible sample or try to make the issue in given sample.
  4. In your code example, you did not set the editType as dropdownedit to the ReviewType column. So, how could you edit the column using dropdown control?
  5. Share the complete code files (app.component.html & app.component.ts) and package.json file you have used.
  6. Do you changed the dropdown dataSource or applied any query to Dropdown control while editing a record?

Regards, 
Rajapandiyan S 


Loader.
Up arrow icon