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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Passing extra parameter dialogTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

144005 Apr 14,2019 06:12 AM UTC Apr 16,2019 09:20 AM UTC React - EJ 2 1
loading
Tags: Grid
Ali Rahighi
Asked On April 14, 2019 06:12 AM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon