Introduction

To add combobox in ag-grid first of all we have to have knowledge of cell render. Through cell render we can edit our ag-grid column with drop down or textbox.
We can bind our dropdown in two ways: statically and dynamically

In this I will show statically how to bind dropdown.



Now In This Image I inserted DropDown.

Firstly let's see the code part of this.
  1. $scope.gridOptions = {
  2. columnDefs: [{
  3. headerName: "CompanyName",
  4. field: "CompanyName",
  5. editable: true,
  6. width: 130
  7. }, {
  8. headerName: 'ProductName',
  9. field: "ProductName",
  10. editable: true,
  11. width: 130
  12. }, {
  13. headerName: "ProjectID",
  14. field: "ProjectID",
  15. editable: true,
  16. width: 100
  17. }, {
  18. headerName: "Status",
  19. field: "Status",
  20. editable: true,
  21. width: 100
  22. }, {
  23. headerName: "Delete",
  24. field: "Delete",
  25. editable: true,
  26. editable: false,
  27. width: 100,
  28. cellRenderer: customEditorImageWQ
  29. }, {
  30. headerName: "Update",
  31. field: "Update",
  32. editable: true,
  33. editable: false,
  34. width: 100,
  35. cellRenderer: customEditor
  36. }, {
  37. headerName: "CompanyName",
  38. field: "CompanyName",
  39. width: 150,
  40. cellRenderer: CustomCombobox
  41. }, ],
  42. rowData: null,
  43. enableColResize: true,
  44. enableSorting: true,
  45. rowSelection: 'multiple',
  46. angularCompileRows: true,
  47. rowDeselection: true,
  48. onRowClicked: RowClick,
  49. enableFilter: true,
  50. editable: true,
  51. suppressRowClickSelection: true,
  52. };
  54. function CustomCombobox(params) {
  55. //Find RowIndex
  56. var rowIndex = params.rowIndex;
  57. //FindColoumn Name
  58. var Column = params.eGridCell.attributes.colId;
  59. //FindGridData
  60. var WeldGridData = $scope.gridOptions.rowData;
  61. //create select element using javascript
  62. var eSelect = document.createElement("select");
  63. //Set attributes
  64. eSelect.setAttribute('class', 'custom-select form-control');
  65. eSelect.setAttribute('style', 'padding:0px');
  66. eSelect.setAttribute('name', params.colDef.field);
  67. eSelect.setAttribute('id', params.colDef.field + "_" + rowIndex);
  68. //get the value of the select option
  69. var value = params.data.CompanyID;
  70. //create the default option of the select element
  71. var eOption = document.createElement("option");
  72. eOption.text = "Select";
  73. eOption.value = "";
  74. eSelect.appendChild(eOption);
  75. if (params.colDef.field == "CompanyName") {
  76. CompanyName = $scope.CompanyList;
  77. var companyid = params.data.CompanyID;
  78. var eOptionVal = document.createElement("option");
  79. //Statical set data in grid ComboBox
  80. eOptionVal.text = "Angra";
  81. eOptionVal.value = 1;
  82. eSelect.appendChild(eOptionVal);
  83. var eOption = document.createElement("option");
  84. eOption.text = "Navcreation";
  85. eOption.value = "2";
  86. eSelect.appendChild(eOption);
  87. }
  88. return eSelect;
  89. }
This Is coding part in js file through this I bind my dropdown


If you want to know how to add dropdown dynamically then visit my blog.
Thanks for visiting; please do comment