We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Passing extra parameter dialogTemplate

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}
               ....
               ...
          } }

1 Reply

HJ Hariharan J V Syncfusion Team April 16, 2019 09:20 AM UTC

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')); 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Hariharan 


Loader.
Live Chat Icon For mobile
Up arrow icon