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

Unable to import CommandClickEventArgs

Thread ID:

Created:

Updated:

Platform:

Replies:

149480 Nov 27,2019 10:01 AM UTC Dec 3,2019 06:07 AM UTC React - EJ 2 7
loading
Tags: Grid
Jemuel V Abrian
Asked On November 27, 2019 10:01 AM UTC

Hi,

I am trying to create custom command on a button inside a grid, however upon following the example below i am not able to import the CommandClickEventArgs.
Please advise, thanks.



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 28, 2019 11:28 AM UTC

Hi Jemuel, 

Thanks for contacting Syncfusion support, 

We have validated the reported problem with provided the information but, it is unsuccessful. We have created a sample with CommandClickEventArgs using in the commandClick event of Grid and we are used the latest version(v17.3.29) of Syncfusion packages. Please refer the below sample for more information. 


If still you are facing same error, could you share the below details to us it will help to validate further. 

  1. If possible to share issue reproduced sample.
  2. Share the Syncfusion packages.
  3. Video demonstrate of the reported problem.

Regards, 
Seeni Sakthi Kumar S 


Jemuel V Abrian
Replied On November 29, 2019 02:00 AM UTC

Hello,

Thanks for the reply, by the way i am using v16.2.41 as per my package.json.
Anyways i have found a different way on putting a button inside a cell and calling a method upon click.
For reference and hopefully help someone below is the code.



Regards,
Jem


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 2, 2019 07:03 AM UTC

Hi Jemuel, 

We have validated your query with provided the information and we suspect that you have bind the button on Grid column with click event using template feature. You can access the click event of custom command button using commandClick event. Please refer the below code example and sample for more information. 
 
[index.cshtml] 
  public customcommands: CommandModel[] = [ 
    { 
      buttonOption: { 
        content: 'Details', cssClass: 'e-flat' 
      } 
    } 
  ]; 
commandClick(args: CommandClickEventArgs){ 
  console.log(args) 
}  
<GridComponent id='gridcomp' dataSource={data} allowPaging={true} pageSettings={{ pageCount: 5 }} editSettings={this.editSettings} commandClick={this.commandClick.bind(this)}> 
            <ColumnsDirective> 
              <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey={true} validationRules={this.validationRule}></ColumnDirective> 
               
              <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={this.validationRule}></ColumnDirective> 
              <ColumnDirective headerText='Commands' width='120' commands= {this.customcommands}></ColumnDirective> 
              <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit'></ColumnDirective> 
              <ColumnDirective field='OrderDate' headerText='Order Date' editType='datepickeredit' format='yMd' width='170'></ColumnDirective> 
                 <ColumnDirective field='CustomerID' headerText='Customer ID' template={ 
              (props)=>(<button style={{backgroundColor:'blue', 
              borderRadius:'9px', 
              color:'#FFFFFF', 
              fontFamily:'Arial', 
              fontSize:'12px', 
              fontWeight:'bold', 
              padding:'7px 26px', 
              textDecoration:'none' 
              }} onClick={(e)=>{ 
                e.preventDefault(); 
                this.downlodFile(props); 
              }}> 
              {props.decision} 
              </button>) 
            }             
             width="180" ></ColumnDirective> 
              <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' edit={this.editparams}></ColumnDirective> 
              <ColumnDirective headerText='Manage Records' width='160' commands={this.commands}></ColumnDirective> 
            </ColumnsDirective> 
            <Inject services={[Page, CommandColumn, Edit]}/> 
          </GridComponent> 




Please get back to us, if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 


Jemuel V Abrian
Replied On December 2, 2019 07:28 AM UTC

HI Seeni Sakthi Kumar Seeni Raj,

This goes back to my original issue wherein i cannot import the CommandClickEventArgs.
I have found another way to trigger an event from a button inside a grid (in my previous reply).
Anyways, thanks for the prompt reply and looking to my issue.

Thank you,
Jem

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 3, 2019 05:06 AM UTC

Hi Jemuel, 

Thanks for the update. We could see you have achieved your requirement using the native element click event.  

Please get back to us, if you require further assistance. 

Regards,  
Seeni Sakthi Kumar S 


Jemuel V Abrian
Replied On December 3, 2019 05:22 AM UTC

Hi Seeni Sakthi Kumar S,

Thanks for looking at my issue.

Thanks,
Jem

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 3, 2019 06:07 AM UTC

Hi Jem,

You are welcome.

Regards,  
Seeni Sakthi Kumar S 


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