|
[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>
| 
