Button in Command Column with content from datasource field

[Frank]

Hi 

I would like to put a button (with ccsClass:'e-link' ) in a command column , and the content of the button coming from a data field of the data source

I tried something like

let grid: Grid = new Grid({
    dataSource: employeeData,
    columns: [
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'right', width: 125 },
        { field: 'FirstName', headerText: 'Name', width: 120 },
        { headerText: 'Commands', width: 120, commands: [{ buttonOption: { content: '${Title}', cssClass: 'e-link', click: onClick } }]},
        ],
    height: 315
});      

but this does not work.

Thanks for your support!

Frank

[Isuriya Rajan]

Hi Frank, 

Thanks for contacting Syncfusion support, 

We can access the field value only inside the column  template. So for your requirement we suggest to use “template” column. Using the template you can get the field value for columns. In this sample we have used  template column and bound the button click event. You can customized your  code inside the click event . Refer the below sample link and documentation link for your reference. 

Sample Link: http://plnkr.co/edit/JUpwfZ9dDOEPQ32AF7JJ?p=preview 

Documentation Link: http://ej2.syncfusion.com/15.4.23/documentation/grid/columns.html?lang=typescript#column-template 

Regards, 

Isuriya R 

[Frank]

Hi Isuriya 

 thanks for your quick reply.

this works to put the link in the grid.

There are a couple of issue however :

- The button contents is for some reason put in CAPITAL letters 

- I am using the Aurelia Framework, and  have difficulties to attache the onclick handler to the button the way it is shown in your example 

To get the link/button to show I had to put the template definition into the definition of the grid 

( template : '<button ...... onclick:="myFunction()">${ShipCountry}</button>') 

but then it does not find the onclick handler. I think it has do do how Aurelia binds view and view-model - 

So it seems I am stuck and  urgently need the aurelia-bridge for ej2 ....  

Or do you have any other hint which could help me already ? 

Thanks

Frank

 

[Isuriya Rajan]

Hi Frank 

Please find the response for your queries. 

Query 1:  The button contents is for some reason put in CAPITAL letters  

 

Based on the material theme, the Button text should be capitalized in languages that have capitalization. So, we suggest you to override the text-transform CSS property by using cssClass property. Please refer the below code example,  

  

[index.ts]  

  

  

        let button: Button = new Button();  

        button = new Button({ isPrimary: true, cssClass:'textTransform' });  

        button.appendTo('#primarybtn');  

        };  

  

  

  

[CSS]  

  

  

        .textTransform {  

            text-transform: none;  

        }  

  

  

We have demonstrated this in Plunker, please check the below link.  

  

Sample: http://plnkr.co/edit/f4g989XHcrJXP8ZxeNOp?p=preview   

Documentation: http://ej2.syncfusion.com/15.4.23/documentation/button/api-button.html?lang=typescript#cssclass   

Query 2: I am using the Aurelia Framework, and  have difficulties to attache the onclick handler to the button the way it is shown in your example  

Currently we don’t have support with Aurelia in Essential JS 2 components. We have added this in the Essential Studio Volume 2, 2018 release road map which will be tentatively available by May 2018.  

Regards, 

Isuriya R