1. Home
  2. Forum
  3. Vue
  4. Using dropdown for a column in grid

Using dropdown for a column in grid

I have got a dropdown added for a column in a grid. basically works ok. Am using code similar to this example

https://ej2.syncfusion.com/vue/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/

What I want though is that when I click in the cell to edit it, that the dropdown popup shows immediately so I can start editing. As it is at the moment, the cell gets focus but I have to click in it again to activate the popup. 

I tried adding a focus event handler to the drop down when it was created. It sort of worked but not 100%:

self.dropDownList = new ejs.dropdowns.DropDownList({     
      focus: function (e) {        
          this.showPopup();     
      } ,


I also tried to show pup after appending the dropdown. This did show the dropdown but the popup immediately closed again.

self.dropDownList.appendTo(args.element);
setTimeout(function () {
     self.dropDownList.showPopup();                        
},1000);


7 Replies
PG Praveenkumar Gajendiran Syncfusion Team July 16, 2021 12:43 PM UTC

Hi Jeff,

Greetings from Syncfusion support. 
Based on your query and provided information, we could see that you want to use cascading dropdown and open the dropdown popup initially. You can open the DropDown popup by calling the DropDown’s showPopup method in the Grid’s actionComplete event when the requestType as “beginEdit” as demonstrated in the below code example,

Please refer the below code example and sample for more information. 
 
Code Example: 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
      :actionComplete="actionComplete" 
      height="273px" 
    > 
      <e-columns> 
        <e-column 
          field="OrderID" 
          headerText="Order ID" 
          :isPrimaryKey="true" 
          textAlign="Right" 
          width="100" 
        ></e-column> 
        <e-column 
          field="CustomerID" 
          headerText="Customer ID" 
          width="120" 
        ></e-column> 
        <e-column 
          field="ShipCountry" 
          headerText="ShipCountry" 
          editType="dropdownedit" 
          :edit="countryParams" 
          width="150" 
        ></e-column> 
        <e-column 
          field="ShipCity" 
          headerText="Ship City" 
          editType="dropdownedit" 
          :edit="stateParams" 
          width="150" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids"; 
import { DropDownList } from "@syncfusion/ej2-dropdowns"; 
import { Query } from "@syncfusion/ej2-data"; 
import { data } from "./datasource.js"; 

let country = [ 
  { countryName: "United States", countryId: "1" }, 
  { countryName: "Australia", countryId: "2" }, 
]; 
let state = [ 
  { stateName: "New York", countryId: "1", stateId: "101" }, 
  { stateName: "Virginia ", countryId: "1", stateId: "102" }, 
  { stateName: "Washington", countryId: "1", stateId: "103" }, 
  { stateName: "Queensland", countryId: "2", stateId: "104" }, 
  { stateName: "Tasmania ", countryId: "2", stateId: "105" }, 
  { stateName: "Victoria", countryId: "2", stateId: "106" }, 
]; 
let countryElem, stateElem, countryObj, stateObj; 
Vue.use(GridPlugin); 
export default { 
  data: () => { 
    return { 
      data: data, 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
      }, 
      countryParams: { 
        create: () => { 
          countryElem = document.createElement("input"); 
          return countryElem; 
        }, 
        read: () => { 
          return countryObj.text; 
        }, 
        destroy: () => { 
          countryObj.destroy(); 
        }, 
        write: () => { 
          countryObj = new DropDownList({ 
            dataSource: country, 
            fields: { value: "countryId", text: "countryName" }, 
            change: () => { 
              stateObj.enabled = true; 
              let tempQuery = new Query().where( 
                "countryId", 
                "equal", 
                countryObj.value 
              ); 
              stateObj.query = tempQuery; 
              stateObj.text = null; 
              stateObj.dataBind(); 
            }, 
            placeholder: "Select a country", 
            floatLabelType: "Never", 
          }); 
          countryObj.appendTo(countryElem); 
        }, 
      }, 
      stateParams: { 
        create: () => { 
          stateElem = document.createElement("input"); 
          return stateElem; 
        }, 
        read: () => { 
          return stateObj.text; 
        }, 
        destroy: () => { 
          stateObj.destroy(); 
        }, 
        write: () => { 
          stateObj = new DropDownList({ 
            dataSource: state, 
            fields: { value: "stateId", text: "stateName" }, 
            enabled: false, 
            placeholder: "Select a state", 
            floatLabelType: "Never", 
          }); 
          stateObj.appendTo(stateElem); 
        }, 
      }, 
    }; 
  }, 
  methods: { 
    actionComplete(args) { 
      if (args.requestType === "beginEdit") { 
        countryObj.showPopup(); // open ship country dropdown popup initially. 
      } 
    }, 
  }, 
  provide: { 
    grid: [Edit, Toolbar], 
  }, 
}; 
</script> 
<style> 
</style> 
  

Please get back to us if you need further assistance. 
  
Regards 
Praveenkumar G 


JB Jeff Butterworth July 18, 2021 11:56 PM UTC

Give this a test. The actionComplete fires when edit mode is Normal but I am using Batched (sorry should have specified that but didn't think would make a difference).

Also, the popup should only fire when I move into that cell. At the moment, the popup opens regardless of what column you clicked in.

I tried using the cellEdit event. But it fires  BEFORE the dropdown is written (the write() method I mean) so the dropdown is not yet available.

So no solution yet unfortunately.

 


PG Praveenkumar Gajendiran Syncfusion Team July 22, 2021 11:45 AM UTC

Hi Jeff,

Thanks for your update. 
Based on your query and provided information, we could see that your requirement is to open the dropdown popup initially while using batch editing feature in Grid. For this, we suggest you to call the DropDown’s showPopup method in the DropDown’s created event as demonstrated in the below code example,

Please refer the below code example and sample for more information. 
 
Code Example: 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
      height="273px" 
    > 
      <e-columns> 
        <e-column 
          field="OrderID" 
          headerText="Order ID" 
          :isPrimaryKey="true" 
          textAlign="Right" 
          width="100" 
        ></e-column> 
        <e-column 
          field="CustomerID" 
          headerText="Customer ID" 
          width="120" 
        ></e-column> 
        <e-column 
          field="ShipCountry" 
          headerText="ShipCountry" 
          editType="dropdownedit" 
          :edit="countryParams" 
          width="150" 
        ></e-column> 
        <e-column 
          field="ShipCity" 
          headerText="Ship City" 
          editType="dropdownedit" 
          :edit="stateParams" 
          width="150" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids"; 
import { DropDownList } from "@syncfusion/ej2-dropdowns"; 
import { Query } from "@syncfusion/ej2-data"; 
import { data } from "./datasource.js"; 

let country = [ 
  { countryName: "United States", countryId: "1" }, 
  { countryName: "Australia", countryId: "2" }, 
]; 
let state = [ 
  { stateName: "New York", countryId: "1", stateId: "101" }, 
  { stateName: "Virginia ", countryId: "1", stateId: "102" }, 
  { stateName: "Washington", countryId: "1", stateId: "103" }, 
  { stateName: "Queensland", countryId: "2", stateId: "104" }, 
  { stateName: "Tasmania ", countryId: "2", stateId: "105" }, 
  { stateName: "Victoria", countryId: "2", stateId: "106" }, 
]; 
let countryElem, stateElem, countryObj, stateObj, tempQuery; 
Vue.use(GridPlugin); 
export default { 
  data: () => { 
    return { 
      data: data, 
      toolbar: ["Add", "Delete", "Update", "Cancel"], 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
        mode: "Batch", 
      }, 
      countryParams: { 
        create: () => { 
          countryElem = document.createElement("input"); 
          return countryElem; 
        }, 
        read: () => { 
          return countryObj.text; 
        }, 
        destroy: () => { 
          countryObj.destroy(); 
        }, 
        write: (args) => { 
          countryObj = new DropDownList({ 
            dataSource: country, 
            fields: { value: "countryId", text: "countryName" }, 
            created: () => { 
              countryObj.showPopup(); 
            }, 
            change: () => { 
              tempQuery = new Query().where( 
                "countryId", 
                "equal", 
                countryObj.value 
              ); 
            }, 
            placeholder: "Select a country", 
            floatLabelType: "Never", 
          }); 

          countryObj.appendTo(countryElem); 
        }, 
      }, 
      stateParams: { 
        create: () => { 
          stateElem = document.createElement("input"); 
          return stateElem; 
        }, 
        read: () => { 
          return stateObj.text; 
        }, 
        destroy: () => { 
          stateObj.destroy(); 
        }, 
        write: () => { 
          stateObj = new DropDownList({ 
            dataSource: state, 
            query: tempQuery, 
            created: () => { 
              stateObj.showPopup(); 
            }, 
            fields: { value: "stateId", text: "stateName" }, 
            placeholder: "Select a state", 
            floatLabelType: "Never", 
          }); 
          stateObj.appendTo(stateElem); 
        }, 
      }, 
    }; 
  }, 
  methods: {}, 
  provide: { 
   grid: [Edit, Toolbar], 
  }, 
}; 
</script> 
<style> 
</style> 
  

Please get back to us if you need further assistance. 
  
Regards 
Praveenkumar G 


JB Jeff Butterworth July 23, 2021 12:44 AM UTC

Hi  Praveenkumar 

Close....

Your sample works but I couldn't work out why it didn't work in my code. 

Turns out If you add:

allowFiltering: true,


when you create the dropdown in the write() method, it no longer works. This is the case in your sample as well. 

Since I need the filtering, this is unfortunately its still not a solution.


Regards

Jeff

 


RS Rajapandiyan Settu Syncfusion Team July 26, 2021 01:55 PM UTC

Hi Jeff,  
  
Thanks for your update.  
  
We can reproduce the reported behavior (“showPopup method does not working if we enable allowFiltering in the dropdown”) at our end. Currently, we are checking the feasiblity to achieve this and validating it in our source. So, we will update the further details on Jul 28th 2021. 
 
Until then, we appreciate your patience.  
  
Regards,  
Rajapandiyan S  


PG Praveenkumar Gajendiran Syncfusion Team July 28, 2021 09:54 AM UTC

Hi Jeff,

Thanks for your patience.

We validated your reported scenario and we can reproduce the reported behavior at our end. We have confirmed this is an issue from our side and logged a bug for the same as “Cell Edit Template is not working when using dropdown component with allowfiltering”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on August 18, 2021.  
    
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
    
Regards,  
Praveenkumar G 


PG Praveenkumar Gajendiran Syncfusion Team August 12, 2021 05:17 PM UTC

Hi Jeff, 
Sorry for the inconvenience.

We checked further on your reported issue, for that we suggest you to use the below solution to resolve your reported issue at your end.

In that solution, we are prevent the Grid save action in the Grid’s cellSave event when the dropdown popup is in open state as demonstrated in the below code example.

Please check the below sample and code example for more information.

Code Example: 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      id="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
      :cellSave="cellsave" 
      height="273px" 
    > 
      <e-columns> 
       .... 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 

Vue.use(GridPlugin); 
export default { 
  data: () => { 
    return { 
      data: gridData, 
      toolbar: ["Add", "Delete", "Update", "Cancel"], 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
        mode: "Batch", 
      }, 
      countryParams: { 
        .... 
      }, 
      stateParams: { 
       ....
    }; 
  }, 
  methods: { 
    cellsave: function (args) { 
      var gridObj = this.$refs.grid.ej2Instances; 
      var popElem = document.getElementById(gridObj.element.id + args.columnName + "_popup"); 
      if (popElem && popElem.classList.contains("e-popup-open")) { 
        args.cancel = true; 
      } 
    }, 
  }, 
  provide: { 
    grid: [Edit, Toolbar], 
  }, 
}; 
</script> 

We have modified previous provided sample based on this for your reference,

Sample: https://codesandbox.io/s/requirements-forked-vlwe4?file=/src/App.vue 
Please get back to us if you need further assistance.

Regards,
Praveenkumar G 


Loader.
Up arrow icon