React Component in Grid Column

[Unknown]

Hello everyone, I'm working on a React Redux application.I'm having difficulties finding a way render my React Component in every row of a particular column in ej2-react-grids. The only way that I have found is to put my component into column template script, but then OnChange event won't fire.

What is the proper way of doing this? Thanks!

[Ramdhas Ueikattan]

Hi Marko Cuca, 

Event handler for the dropdown change can be add on the window. This will be fire on every drop down change done. Please refer the below code snippet. 

. . .  

<GridComponent allowPaging={true} pageSettings={{pageSize:8}} dataSource={data}> 

          <ColumnsDirective> 

            <ColumnDirective field='OrderID' headerText='Order ID'></ColumnDirective> 

            <ColumnDirective field='CustomerID' headerText='Customer ID'></ColumnDirective> 

            <ColumnDirective field='OrderDate' textAlign='right' format='yMd'></ColumnDirective> 

            <ColumnDirective field='ShipCountry' headerText='Ship Country'></ColumnDirective> 

            <ColumnDirective headerText='Template' template={`<div><select onchange='onChange()'><option> Select </option><option> DeSelect </option></select></div>`} > 

            </ColumnDirective> 

          </ColumnsDirective> 

          <Inject services={[Page]} /> 

        </GridComponent> 

. . . 

// Handler for drop down bind on window object. 

window.onChange = () =>{ 

  console.log(document.activeElement.value);  //Onchange event handler fires every drop down changes. 

} 

  

Regards, 

Ramdhas  Ueikattan. 

[Unknown]

Thanks Ramdhas, exactly what I needed. 

[Ramdhas Ueikattan]

  

Hi Marko, 

  

We are glad to know that given solution works. Please let us know if you need any further assistance. 

  

Regards, 

Ramdhas  Ueikattan 

[imam nawawi]

if i want to use comoponent in the tempalte={}

how can i do ?

because the template just can read html script, i try with <a> and <div> its working.

but when i used <ButtonComponent/> its not working

[Mohammed Farook J]

  

Hi Marko,  

 

By default, onChange event is not working button component.  You can use onClick event for button event. This is not meet your requirement please share the following details 

1. do you have render select tag inside of button?
2. Please share the full grid code example.

Regards, 

J Mohammed Farook