How to implement custom component in ag-grid cell?

Question

I am working on AG-GRID Enterprise latest version and my need is to put the custom component in only 1 cell of AG-GRID, I am confused on how can I do it, please give my some hint.

This Grid is being used in angular project, so please help me in typescript code.

 {
    headerName: "Status", 
    field: "status", 
    suppressMovable: false,
    type: "drop down2",
    colId: 5,
    cellClass: "actions-button-cell", 
    cellEditor: 'dropdown', //Either this 
    cellEditorFramework:CustomDropdownComponent // or this
  },

with the custom component, I had to use this CSS to make the dropdown visible which makes it appear outward, and also it is appearing above the row selection.

 ::ng-deep .actions-button-cell { 
    overflow:visible; 
  }

::ng-deep .ag-row {
      z-index: 0;
  }

::ng-deep .ag-row.ag-row-focus {
      z-index: 1;
  }

::ng-deep  .ag-root,
::ng-deep .ag-body-viewport,
::ng-deep .ag-body-viewport-wrapper {
    overflow: visible;
}

Now, this looks bad and if I don't use the css above, the drop-down will be hidden within the row.

Secondly, let say I use cellEditor, I can't seem to integrate it with selectize jquery. Below is the dropdown code for cellEditor

   function getDropDown() {
  function DropDown() {}
  DropDown.prototype.init = function(params) {
    alert('here');
    this.select = document.createElement('select');
    // this.select.value = params.value;
    this.select.classList.add('email-select');
    this.select.style.height = '100%';
    this.select.style.width = '100%';
    $(this.select).selectize({
      valueField: 'name',
      labelField: 'name',
      placeholder: 'Select'
  ,    options: [
        {
            description: 'Nice Guy',
            name: 'Brian Reavis',
            imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
        }, 
        {
            description: 'Other nice guy',
            name: 'Nikola Tesla',
            imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
        }
      ]
  });
    // let option = document.createElement('option');
    // option.value = "One";
    // this.select.append= option;



  };
  DropDown.prototype.getGui = function() {
    return this.select;
  };
  DropDown.prototype.afterGuiAttached = function() {
    this.select.focus();
  };
  DropDown.prototype.getValue = function() {
    return this.select.value;
  };
  DropDown.prototype.destroy = function() {};
  DropDown.prototype.isPopup = function() {
    return false;
  };
  return DropDown;
}

This gives an error selective function does not exist and sometimes it works but doesn't fully apply selective on the select field. Kindly help me out with any of the two ways.

Expected Result:

I have identified two options. If I could find a solution for cellEditor, It would be great else just find a solution for the dropdown appearing a bit outward and above row selection. Thanks!

How to implement custom component in ag-grid cell?

0 Answers