How To Add Combobox In Ag-Grid Or Edit Grid Coloumn With Combobox

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. };  
  53.   
  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
Ebook Download
View all
Learn
View all