On react TypeScript Getting error while click on grid Dropdown

[Karan Patel]

I am trying to bind the Grid with Dropdown, and when I click on the grid Drop down, I get the below error.

For binding the grid Dropdown data source I used the below code 

var teamParams  : IEditCell = {

  params: {

    actionComplete: () => false,

    allowFiltering: true,

    dataSource: sportsData,

    fields: { text: "TeamDescr", value: "id" },

    query: new Query()

  }

}

Grid Code 

 <GridComponent id='FirstGrid' actionBegin={actionBegin}  dataSource={rData.list.filter(x=>x.isActive==true)} ref={g => firstGrid = g} height='768' allowFiltering={true}   filterSettings={filterOptions} toolbarClick={toolbarClick} allowExcelExport={true} allowSorting={true} allowGrouping={true}   editSettings={editOptions} toolbar={toolbarOptions}  allowPaging={true}  >

    <ColumnsDirective>

    <ColumnDirective field='id' editType='numericedit' headerText='ID' width='120' textAlign='Left' visible={false}>

    </ColumnDirective>

       <ColumnDirective field='gender'  headerText='Gender'  editType= 'dropdownedit' width='200' edit={teamParams}  textAlign='Left' />

     

   

    <ColumnDirective field='firstName'  headerText='First Name' width='200' format='C2' textAlign='Left' />  

    <ColumnDirective field='middleName'  headerText='Middle Name' width='200' format='C2' textAlign='Left' />

    <ColumnDirective field='lastName'  headerText='Last Name' width='200' format='C2' textAlign='Left' />

    <ColumnDirective field='email'  headerText='Email' width='200' format='C2' textAlign='Left' />

    <ColumnDirective field='note'  headerText='Note' width='200' format='C2' textAlign='Left' />

    <ColumnDirective field='position'  headerText='Position' width='200' format='C2' textAlign='Left' />

    <ColumnDirective field='Department'  headerText='department' width='200' format='C2' textAlign='Left' />

    <ColumnDirective field='note'  headerText='Note' width='200' format='C2' textAlign='Left' />

    <ColumnDirective field='phoneNumber' editType='numericedit' headerText='Phone' width='120' textAlign='Left'></ColumnDirective>

      <ColumnDirective field='isActive'   editType="booleanedit" headerText='IsActive' width='120' format='C2' textAlign='Left' />  

      <ColumnDirective field='lastModifiedAt' editType="datepickeredit"  headerText='Last Modified At'  width='200' textAlign='Left' />

      <ColumnDirective field='lastModifiedBy'  headerText='Last Modified by' width='200' format='C2' textAlign='Left' visible={false}/>          

      <ColumnDirective field='createdAt' editType="datepickeredit" headerText='Created At' width='120' textAlign='Left' visible={false}></ColumnDirective>

      <ColumnDirective field='createdBy'  headerText='Created By'  width='130' textAlign='Left' />

     

     

        </ColumnsDirective>

    <Inject services={[Page, Sort, Filter, Edit, Toolbar, Group, ExcelExport]} />

  </GridComponent>

 I attached my Index.tsx file for your reference. Can you please suggest any way to overcome this? When I am looking to find the solution on the syncfusion forum, other users face the same issues.

Note - I attached two file if I used the Index working.txt code then the drop down is working but if used the index.txt using const approach it's giving me an error. 

Attachment: src_c1c0378c.7z

[Karan Patel]

Why still I not getting any update on this 

[Joseph Christ Nithin Issack]

Hi Karan,

  Greetings from Syncfusion support.

Based on your query, when you use class component you are able to provide additional params to the dropdown like adding custom data source to the dropdown list edit template, but when you use functional component, you are facing an issue. Currently we are validating your query, we will provide further details on or before 6^th October, 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Joseph Christ Nithin Issack]

Hi Karan,

  Sorry for the inconvenience caused.

  Cuurrently we are validating your query, we will provide further details on or before 10th October, 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Karan Patel]

Hello, Joseph Thank you for updating me but now we are trying to implement this same functionality with react typescript  function instated of class . So, can you please provide the sample code for grid with function. 

Thank you 

[Joseph Christ Nithin Issack]

Hi Karan,

Sorry for the inconvenience caused.

  Based on your query, you want to change the datasource of the edit template dropdown. We are preparing the sample with typescript functional component. We will provide the issue details on 11^th October 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Joseph Christ Nithin Issack]

Hi Karan,

  Thanks for your patience.

   As per your request, we have prepared a sample to add custom datasource for the dropdown edit, in a functional component in react typescript. Please refer the below sample for more details.

  Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FUNCTI~1-1443499244

Please get back to us for further details.

Regards,

Joseph I.