2

I am new to SlickGrid. I have to display the parent and child list records using SlickGrid. By default slick grid should display the parent records. There should be action to expand and collapse the child records in the parent record. When I click the action in the parent record it should show corresponding child records at below of the parent record.

I have referred this link

Here i shared my code snippet for your reference

gridOption

  {
   autoResize: {
    containerId: "demo-container",
    sidePadding: 10,
  },
  enableAutoSizeColumns: true,
  enableAutoResize: true,
  enableExport: true,
  enableFiltering: true,
  enableTreeData: true, 
  treeDataOptions: {
    columnId: 'productname',
   levelPropName: 'indent',
    parentPropName: 'pfm123'
  },
 
  headerRowHeight: 45,
  rowHeight: 40,
  contextMenu: {
    iconCollapseAllGroupsCommand: "mdi mdi-arrow-collapse",
    iconExpandAllGroupsCommand: "mdi mdi-arrow-expand",
    iconClearGroupingCommand: "mdi mdi-close",
    iconCopyCellValueCommand: "mdi mdi-content-copy",
    iconExportCsvCommand: "mdi mdi-download",
    iconExportExcelCommand:
      "mdi mdi-file-excel-outline text-success has-text-success",
    iconExportTextDelimitedCommand: "mdi mdi-download",
  },
  gridMenu: {
    iconCssClass: "mdi mdi-menu",
    iconClearAllFiltersCommand: "mdi mdi-filter-remove-outline",
    iconClearAllSortingCommand: "mdi mdi-swap-vertical text-danger",
    iconExportCsvCommand: "mdi mdi-download",
    iconExportExcelCommand:
      "mdi mdi-file-excel-outline text-success has-text-success",
    iconExportTextDelimitedCommand: "mdi mdi-download",
    iconRefreshDatasetCommand: "mdi mdi-sync",
    iconToggleFilterCommand: "mdi mdi-flip-vertical",
    iconTogglePreHeaderCommand: "mdi mdi-flip-vertical",
  },
  headerMenu: {
    iconClearFilterCommand: "mdi mdi mdi-filter-remove-outline text-danger",
    iconClearSortCommand: "mdi mdi-swap-vertical",
    iconSortAscCommand: "mdi mdi-sort-ascending",
    iconSortDescCommand: "mdi mdi-flip-v mdi-sort-descending",
    iconColumnHideCommand: "mdi mdi-close",
  },
   };}

columnDefinition

[
  {
    id: 'customername',
    name: 'Customer Name',
    field: 'customername',
    width: 220,
    cssClass: 'cell-title',
    filterable: true,
    sortable: true,
    queryFieldSorter: 'id',
    type: FieldType.string,
    formatter: Formatters.tree
  },

  { 
     id: 'orderamount',
     name: 'order Amount',
     field: 'orderamount',
     minWidth: 90,
     filterable: true },
     {
      id: 'orderdate',
      name: 'Orderdate',
      field: 'orderdate',
      minWidth: 60,
      type: FieldType.dateIso,
      filterable: true, sortable: true,
      filter: { model: Filters.compoundDate },
      formatter: Formatters.dateIso,
      },
        {
      id: 'productname',
      name: 'Product Name',
      field: 'productname',
      width: 220,
      cssClass: 'cell-title',
      filterable: true,
      sortable: true,
      queryFieldSorter: 'id',
      type: FieldType.string

      },

     { 
     id: 'price',
     name: 'Price',
     field: 'price',
     minWidth: 90,
     filterable: true 
      },
      { 
      id: 'quantity',
      name: 'Quantity',
      field: 'quantity',
      minWidth: 90,
      filterable: true 
}];

DataSet

 [
  {
    id: 0,
    indent: 0,
    customername: "customer1",
    orderamount: "50300",
    orderdate: "dec15",
  },
  {
    id: 1,
    indent: 1,
    pfm123: 0,
    productname: "Laptop",
    quantity: "1",
    price: "50000",
  },
  {
    id: 5,
    indent: 2,
    pfm123: 1,
    productname: "Keyboard",
    quantity: "1",
    price: "300",
  },
  {
    id: 2,
    indent: 0,
    customername: "customer2",
    orderamount: "10500",
    orderdate: "dec16",
  },
  {
    id: 3,
    indent: 1,
    pfm123: 2,
    productname: "Mobile",

    price: "10000",
    quantity: "1",
  },
  {
    id: 4,
    indent: 1,
    pfm123: 2,
    productname: "HeadPhone",
    quantity: "1",
    price: "500",
  },
];

Current output

enter image description here

Expected Output

enter image description here

Murugan
  • 49
  • 3
  • You might be confused of where to start but if you're expecting someone to answer you and do the entire work for you, you're probably mistaking. You should at least try something and post what you've tried in your question (right now it looks like you've tried, well nothing)... Anyway, the first thing I see is that there are no link at all between your parent/child, you need some kind of parentId foreign key in your data and then you'll be able to build a grid with Angular-Slickgrid Tree Data. – ghiscoding Dec 16 '20 at 14:17
  • Thanks for your reply. I have updated the question with more details. Please have a look on it. – Murugan Dec 18 '20 at 08:41
  • By looking at the second print screen, you seem to be asking on how to use Row Detail to show another grid. However Row Detail was created to show details of a row **not** for showing another grid, it is just not supported and was never intended to be used for that. – ghiscoding Dec 18 '20 at 19:55

0 Answers0