edit column of Grid by dropdownlist

[Franky Lee]

Hi

I use your example about 

https://ej2.syncfusion.com/vue/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/

and change a simple case

<template>

<div id="app">

<ejs-grid ref='grid' :dataSource='data' :editSettings='editSettings' 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-columns>

</ejs-grid>

</div>

</template>

<script>

import Vue from "vue";

import { GridPlugin, Edit } from "@syncfusion/ej2-vue-grids";

import { cascadeData } from './datasource.js';

let country= [

{ countryName: 'United States', countryId: '1' },

{ countryName: 'Australia', countryId: '2' },

{ countryName: 'India', countryId: '3' }

];

Vue.use(GridPlugin);

export default {

data: () => {

return {

data: cascadeData,

editSettings: { allowEditing: true},

countryParams: {

params: {

allowFiltering: true,

dataSource: country,

fields: {text:"countryName",value:"countryName"},

}

}

};

},

provide: {

grid: [Edit]

}

}

</script>

<style>

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

</style>

But is does not work,

Is there any error in this code ?

Thanks

[Ajith Govarthan]

Hi Franky, 

 

Thanks for contacting Syncfusion support. 

 

Based on your update you have mentioned that you have changed the simple case in the sample from the documentation. We have checked your code example and found that you have not defined the query property in the edit params. 

 

So we suggest you to set the query params to filter the data in the dropdown. So, please share the purpose of removing the query parameter in the edit params and also share more details regarding your requirement. 

 

For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.vue 

 

<template> 

  <div style="height: 80vh"> 

        <ejs-grid 

          :dataSource="data" 

          :toolbar="toolbar" 

          :editSettings="editing" 

          :pageSettings="pageSettings" 

          :selectionSettings="selectOptions" 

        > 

          <e-columns> 

            <e-column 

              field="OrderID" 

              headerText="Order ID" 

              textAlign="Right" 

              clipMode="EllipsisWithTooltip" 

            ></e-column> 

            <e-column 

              field="CustomerID" 

              headerText="Customer Name" 

              clipMode="EllipsisWithTooltip" 

            ></e-column> 

            <e-column 

              field="OrderDate" 

              headerText="Order Date" 

              format="yMd" 

              textAlign="Right" 

              clipMode="EllipsisWithTooltip" 

            ></e-column> 

            <e-column 

              field="Freight" 

              headerText="Freight" 

              format="C2" 

              textAlign="Right" 

              clipMode="EllipsisWithTooltip" 

            ></e-column> 

            <e-column 

              field="ShipName" 

              headerText="Ship Name" 

              clipMode="EllipsisWithTooltip" 

            ></e-column> 

            <e-column 

              field="ShipCountry" 

              headerText="Ship Country" 

              editType='dropdownedit' :edit='countryParams' 

              clipMode="EllipsisWithTooltip" 

            ></e-column> 

          </e-columns> 

        </ejs-grid> 

      </div> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Edit, 

  Page, 

  Toolbar, 

  ContextMenu, 

} from "@syncfusion/ej2-vue-grids"; 

import { gridData } from "./data"; 

import { Query } from "@syncfusion/ej2-data"; 

let country = [ 

  { countryName: "United States", countryId: "1" }, 

  { countryName: "Australia", countryId: "2" }, 

  { countryName: "India", countryId: "3" }, 

]; 

Vue.use(GridPlugin); 

 

export default Vue.extend({ 

  data: () => { 

    return { 

      data: gridData, 

      pageSettings: { pageSize: 5 }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 

 

      editing: { 

        allowAdding: true, 

        allowDeleting: true, 

        allowEditing: true, 

        showDeleteConfirmDialog: true, 

      }, 

      selectOptions: { type: "Multiple" }, 

      countryParams: { 

        params: { 

          allowFiltering: true, 

          dataSource: country, 

          fields: { text: "countryName", value: "countryName" }, 

          query: new Query(), 

          actionComplete: () => false, 

        }, 

      }, 

    }; 

  }, 

  provide: { 

    grid: [Edit, Page, Toolbar, ContextMenu], 

  }, 

}); 

 

window.addEventListener("resize", function () { 

  debugger; 

  if (document.getElementsByClassName("e-grid")[0]) { 

    let gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

    gridObj.refresh(); 

  } 

}); 

</script> 

 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

 

/* .e-pager .e-icon-last::before { 

  content: "\E897"; 

} */ 

</style> 

 

Sample Link: https://codesandbox.io/s/vue-template-forked-lwezd?file=/src/App.vue:0-3011 

 

UG-Links: 

https://ej2.syncfusion.com/vue/documentation/grid/edit/#cell-edit-type-and-its-params 

https://ej2.syncfusion.com/vue/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/  

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G. 

[Franky Lee]

Hi, Ajith

Thanks for your help.

It can work when I add the "query: new Query()".

It seems to be the origin of the error.

I deleted this code in previous work because I considered it's not necessary.

And I will be more carefully.

Thanks again.

Franky

[Ajith Govarthan]

Hi Franky, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

please get back to us if you need further assistance. 

Regards, 

Ajith G.