TreeGrid dropdown column not working with edit params

[Hakan Björk]

Hi 

I have a dropdown column named "status" , with four possible values to select : (['Not started', 'In progress', 'Completed', 'Rejected']). ​But when I use edit prop to pass these options to column, the edit feature stops working on the whole grid.  It works if I remove edit prop from the ColumnModel. 

Here is code for my status column

import i18n from '../../../i18n'

import * as ej2Data from '@syncfusion/ej2-data'

import { StringMap } from '../../../types/common'

import { ColumnModel } from '@syncfusion/ej2-react-treegrid'

const { store, language } = i18n

const translations = (store.data[language]?.taskColumns || {}) as StringMap

const defaultTranslations: TaskColumnTranslations = {

titleHeaderText: 'Title',

descriptionHeaderText: 'Description',

statusHeaderText: 'Status',

priorityHeaderText: 'Priority',

managersHeaderText: 'Responsible Person',

plannedStartDateHeaderText: 'Planned start',

plannedEndDateHeaderText: 'Planned end',

lockPlannedStartDateHeaderText: 'Lock planned start',

lockPlannedEndDateHeaderText: 'Lock planned end',

actualStartDateHeaderText: 'Actual start',

actualEndDateHeaderText: 'Actual end',

rejectedDateHeaderText: 'Rejected date',

archivedDateHeaderText: 'Archived date',

creatorHeaderText: 'Creator',

suppliersHeaderText: 'Suppliers',

customersHeaderText: 'Customers',

workspacesHeaderText: 'Workspaces',

idHeaderText: 'Id',

}

const {

titleHeaderText = defaultTranslations.titleHeaderText,

descriptionHeaderText = defaultTranslations.descriptionHeaderText,

statusHeaderText = defaultTranslations.statusHeaderText,

priorityHeaderText = defaultTranslations.priorityHeaderText,

managersHeaderText = defaultTranslations.managersHeaderText,

plannedStartDateHeaderText = defaultTranslations.plannedStartDateHeaderText,

plannedEndDateHeaderText = defaultTranslations.plannedEndDateHeaderText,

lockPlannedStartDateHeaderText = defaultTranslations.lockPlannedStartDateHeaderText,

lockPlannedEndDateHeaderText = defaultTranslations.lockPlannedEndDateHeaderText,

actualStartDateHeaderText = defaultTranslations.actualStartDateHeaderText,

actualEndDateHeaderText = defaultTranslations.actualEndDateHeaderText,

rejectedDateHeaderText = defaultTranslations.rejectedDateHeaderText,

archivedDateHeaderText = defaultTranslations.archivedDateHeaderText,

creatorHeaderText = defaultTranslations.creatorHeaderText,

suppliersHeaderText = defaultTranslations.suppliersHeaderText,

customersHeaderText = defaultTranslations.customersHeaderText,

workspacesHeaderText = defaultTranslations.workspacesHeaderText,

idHeaderText = defaultTranslations.idHeaderText,

} = translations

export const columns: ColumnModel[] = [

{

field: 'id',

headerText: idHeaderText,

visible: false,

isPrimaryKey: true,

showInColumnChooser: false,

lockColumn: true,

},

{

field: 'title',

headerText: titleHeaderText,

lockColumn: true,

},

{

field: 'status',

headerText: statusHeaderText,

editType: 'dropdownedit',

edit: {

params: {

dataSource: new ej2Data.DataManager([

{ name: 'Not Started', value: 'Not Started' },

{ name: 'In Progress', value: 'In Progress ' },

{ name: 'Completed', value: 'Completed' },

{ name: 'Rejected', value: 'Rejected' },

]),

fields: { text: 'name', value: 'value' },

query: new ej2Data.Query(),

},

},

},

{

field: 'plannedStartDate',

headerText: plannedStartDateHeaderText,

editType: 'datepickeredit',

},

{

field: 'plannedEndDate',

headerText: plannedEndDateHeaderText,

editType: 'datepickeredit',

},

{

field: 'managers',

headerText: managersHeaderText,

},

{

field: 'actualStartDate',

headerText: actualStartDateHeaderText,

editType: 'datepickeredit',

visible: false,

},

{

field: 'actualEndDate',

headerText: actualEndDateHeaderText,

editType: 'datepickeredit',

visible: false,

},

{

field: 'description',

headerText: descriptionHeaderText,

visible: false,

},

{

field: 'priority',

headerText: priorityHeaderText,

visible: false,

},

{

field: 'lockPlannedStartDate',

headerText: lockPlannedStartDateHeaderText,

visible: false,

displayAsCheckBox: true,

type: 'boolean',

},

{

field: 'lockPlannedEndDate',

headerText: lockPlannedEndDateHeaderText,

visible: false,

displayAsCheckBox: true,

type: 'boolean',

},

{

field: 'rejectedDate',

headerText: rejectedDateHeaderText,

visible: false,

allowEditing: false,

},

{

field: 'archivedDate',

headerText: archivedDateHeaderText,

visible: false,

allowEditing: false,

},

{

field: 'creatorFullname',

headerText: creatorHeaderText,

visible: false,

},

{

field: 'suppliers',

headerText: suppliersHeaderText,

visible: false,

},

{

field: 'customers',

headerText: customersHeaderText,

visible: false,

},

{

field: 'workspaces',

headerText: workspacesHeaderText,

visible: false,

},

]

 It gives me the following error. 

Uncaught TypeError: col.edit.create is not a function

    at EditRender.getEditElements (edit-renderer.js:227:1)

    at EditRender.update (edit-renderer.js:39:1)

    at Observer.<anonymous> (batch-edit.js:963:1)

    at Observer.notify (observer.js:104:1)

    at Grid.Base.trigger (base.js:190:1)

    at BatchEdit.editCellExtend (batch-edit.js:941:1)

    at BatchEdit.editCell (batch-edit.js:890:1)

    at BatchEdit.dblClickHandler (batch-edit.js:101:1)

    at Observer.notify (observer.js:101:1)

    at Grid.Component.notify (component.js:269:1)

    at Grid.dblClickHandler (grid.js:3833:1)

[Pon Selva Jeganathan]

Hi Hakan,

Thanks for contacting syncfusion forum.

Query: Script error thrown while using the dropdown column with edit params

We checked your query by preparing sample based on your code example, but we were unable to reproduce the issue at our end.

Please refer to the below sample,

https://stackblitz.com/edit/react-veu3px-5vz2mb?file=index.js,data.js,index.html

Still if you are facing the issue, kindly get back to us with the below requested details,

1. Share the complete tree grid code example
2. Kindly share the edit settings details.
3. Share the treegrid’s package version details.
4. If possible, share the issue reproducible sample or reproduce the issue on shared sample.
5. Share the screenshot/ video demo of your issue.

The provided information will be helpful to provide you response as early as possible. 

Regards,

Pon selva

[Hakan Björk]

Hi Pon,

Thanks for your reply. 

As you suggested I have re-created the problem in the StackBlitz Project here

As you requested:

1. Share the complete tree grid code example
   • I have created StackBlitz Project to share the treegrid code
     
2. Kindly share the edit settings details.
3. Share the treegrid’s package version details.
   "@syncfusion/ej2-react-treegrid": "^20.1.55"
4. If possible, share the issue reproducible sample or reproduce the issue on shared sample.
   • done
     
5. Share the screenshot/ video demo of your issue.

[Pon Selva Jeganathan]

Hi Hakan,

Thanks for the update.

We are able to reproduce the issue (Script error thrown while editing in the dropdown column (status column)) at our end. We are validating this query with high priority. And We will update you with further details by 23rd May 2022.  Until then we value your patience. Meanwhile, we will contact you if any details are required.

Regards,
Pon selva

[Pon Selva Jeganathan]

Hi Hakan,

We appreciate your patience.

On further validation, we have confirmed this issue as a bug and logged defect report for the same “Script error thrown while editing in the dropdown column in which Persistence enabled”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle) and including the defect fix in our weekly patch release which is expected to be rolled out by June 15^th, 2022.

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. Until then we appreciate your patience.

Feedback Link: https://www.syncfusion.com/feedback/35100/script-error-thrown-while-editing-in-the-dropdown-column-in-which-persistence

Regards,

Pon selva

[Pon Selva Jeganathan]

Hi Hakan,

We appreciate your patience.

We are glad to inform that v20.1.60 has been rolled out and the fix for the issue “Script error thrown while editing in the dropdown column in which Persistence enabled” has been included in this weekly patch release. Kindly upgrade into v20.1.60 to resolve the problem.

Kindly get back to us for further assistance.

Regards,

Pon selva