Tree view doesnt display child data or arrows when used in Salesforce LWC

[rahul-boinepally]

Hello,

Thanks for building slickgrid and making it open sourced. I am trying to use the treegrid functionality in Salesforce LWC but it always loads the parent data and never loads child data. I cannot see the arrows as well. I used both Parent/child relationship dataset and Hierarchal datasets but no luck.

The result is (with missing arrows and child data)

This is sample code for Parent/child relationship

export const initializeGrid = (comp) => {
  const gridContainerElement = comp.template.querySelector(`.user-grid`);
  sgb = new Slicker.GridBundle(gridContainerElement, initContactColumns, initGridOptions);
};

export const loadGrid = (data) => {
  debugger;
  if (sgb) {
    sgb.dataset = data;
  }
};

data looks like :

[
    {
        "Company": "test10",
        "Id": "0",
        "Industry": "test20"
    },
    {
        "Company": "test11",
        "Id": "1",
        "Industry": "test21",
        "parentId": "test10"
    },
    {
        "Company": "test12",
        "Id": "2",
        "Industry": "test22",
        "parentId": "test10"
    },
    {
        "Company": "test13",
        "Id": "3",
        "Industry": "test23"
    },
    {
        "Company": "test14",
        "Id": "4",
        "Industry": "test24",
        "parentId": "test13"
    },
    {
        "Company": "test15",
        "Id": "5",
        "Industry": "test25",
        "parentId": "test13"
    }
]

const initGridOptions = {
  useSalesforceDefaultGridOptions: true, // enable this flag to use regular grid options used for SF project
  autoResize: {
    container: ".grid-container"
  },
  enableCellNavigation: true, 
  editable: true,

  enableAutoSizeColumns: true,
  enableAutoResize: true,
  enableExcelExport: true,
  enableFiltering: true,

  multiColumnSort: false,
  enableTreeData: true, 
  treeDataOptions: {
    columnId: "Company",
    parentPropName: "parentId",
    // this is optional, you can define the tree level property name that will be used for the sorting/indentation, internally it will use "__treeLevel"
    levelPropName: "treeLevel",
    // indentMarginLeft: 20,
    initiallyCollapsed: true,
    initialSort: {
      columnId: "Company",
      direction: "ASC"
    }
  }

and cols :

let initContactColumns = [
  {
    id: "Company",
    name: "Company",
    field: "Company",
    minWidth: 100,
    width: 200,
    sortable: true,
    filterable: true,
    type: "string",
    formatter: Formatters.tree,
    exportCustomFormatter: Formatters.treeExport
  },
  {
    id: "Industry",
    name: "Industry",
    field: "Industry",
    minWidth: 100,
    width: 150,
    sortable: true,
    filterable: true,
    type: "string"
    // formatters: [{ name: FORMATTER.HYPERLINK.name }]
  }

This is sample code for Hierarchal.

export const initializeGrid = (comp) => {
  const gridContainerElement = comp.template.querySelector(`.user-grid`);
  sgb = new Slicker.GridBundle(gridContainerElement, initContactColumns, initGridOptions);
};

export const loadGrid = (data) => {
  debugger;
  if (sgb) {
    sgb.dataset = data;
  }
};

data looks like :

[
    {
        "Company": "testComp0",
        "Id": "0",
        "Industry": "testIndus0",
        "TestData": [
            {
                "Company": "testComp00",
                "Id": "00",
                "Industry": "testIndus00"
            },
            {
                "Company": "testComp01",
                "Id": "01",
                "Industry": "testIndus01"
            }
        ]
    },
    {
        "Company": "testComp3",
        "Id": "3",
        "Industry": "testIndus3",
        "TestData": [
            {
                "Company": "testComp30",
                "Id": "30",
                "Industry": "testIndus30"
            },
            {
                "Company": "testComp31",
                "Id": "31",
                "Industry": "testIndus31"
            }
        ]
    }
]

let initContactColumns = [
  {
    id: "Company",
    name: "Company",
    field: "Company",
    minWidth: 100,
    width: 200,
    sortable: true,
    filterable: true,
    type: "string",
    formatter: Formatters.tree
  },
  {
    id: "Industry",
    name: "Industry",
    field: "Industry",
    minWidth: 100,
    width: 150,
    sortable: true,
    filterable: true,
    type: "string"  }

//.. options

const initGridOptions = {
  useSalesforceDefaultGridOptions: true, // enable this flag to use regular grid options used for SF project
  enableFiltering: true,
  multiColumnSort: false,
  enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
  treeDataOptions: {
    columnId: "Company",
    parentPropName: "TestData",
    // this is optional, you can define the tree level property name that will be used for the sorting/indentation, internally it will use "__treeLevel"
    levelPropName: "treeLevel",
    // indentMarginLeft: 20,
    initiallyCollapsed: true,
    initialSort: {
      columnId: "Company",
      direction: "ASC"
    }

[ghiscoding]

First of all this feature is a Slickgrid-Universal feature which is not even available in here, you posted your question in the wrong project. Second you're missing a treeFormatter on the column that holds the Tree, the Formatter is essential since that is what creates the collapsing/expanding icon and without a Formatter the column is just a regular column. Please read the Tree Data - Wiki carefully and if something is missing then let me know but in the correct project, thanks