Passing extra parameter dialogTemplate

[Ali Rahighi]

Hi

Is there any way to pass extra objects to dialogTemplate?
I want to access to my wrapper class and it's props that implements the grid but according to following code "this" is undefined 

typically this refers to the class but why is undefined here?

class List extends React.Component {

constructor(props, state) {

          this.dialogTemplate = this.dialogTemplate.bind(this);

     }

dialogTemplate(props){

console.log(this); // this is undefined

return<MyForm/>

}

     toolbarOptions = ['Search', 'ExcelExport', 'Print', 'Add', 'Edit', 'Delete', 'Update', 'Cancel'];

      editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true , mode: 'Dialog', template: this.dialogTemplate };

      render() {

      return <GridComponent allowSorting={true}

          editSettings={this.editOptions}

               ....

               ...

          } }

[Hariharan J V]

Hi Ali, 

 

Greetings from Syncfusion. 

 

Query: Is there any way to pass extra objects to dialogTemplate? I want to access to my wrapper class and it's props that implements the grid but according to following code "this" is undefined  typically this refers to the class but why is undefined here? 

 

We have validated your query and you can achieve your requirement by using below way. Please find the below code example and sample for your reference. 

 

[code example] 

... 

 

export class DialogTemplate extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.toolbarOptions = ['Add', 'Edit', 'Delete']; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: this.dialogTemplate.bind(this) }; 

        this.validationRules = { required: true }; 

        this.orderidRules = { required: true, number: true }; 

        this.pageSettings = { pageCount: 5 }; 

    } 

    dialogTemplate(props) { 

      console.log(this);    

        return (<DialogFormTemplate {...props}/>); 

    } 

    ... 

   } 

    render() { 

        return (<div className='control-pane'> 

        <div className='control-section'> 

          <GridComponent dataSource={orderData} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionComplete={this.actionComplete.bind(this)}> 

            ... 

         </GridComponent> 

 

        </div> 

      </div>); 

    } 

} 

export class DialogFormTemplate extends React.Component { 

    ... 

} 

 

render(<DialogTemplate />, document.getElementById('sample')); 

 

Sample link: https://stackblitz.com/edit/react-rhjpzs-yyea1y?file=index.js  

 

Please get back to us if you need further assistance. 

 

Regards, 

Hariharan