Hi,
I m looking for an example to set up a template column ( button with click event handling) on an Ignite UI grid which is already bound to a kncout model.
The primary problem i am facing is in setting the template with appropriate quotation marks for the unbound column . If we look at the History column in the code below you would be able to understand my problem.
data-bind="igGrid: {dataSource: vmDetails.actions,autoGenerateColumns: false,autoCommit: false,primaryKey: 'Id',columns: [{ headerText: 'ActionID', key: 'Id', dataType: 'number'},{ headerText: 'Action Description', key: 'ActionDescription', dataType: 'string'},{ headerText: 'Target Action Date', key: 'TargetActionDate', dataType: 'date',format: 'dd-MMM-yyyy'},{ headerText: 'Action Owner', key: 'ActionOwner',dataType: 'string'}, { headerText: 'Completed Date', key: 'CompletedDate', dataType: 'date', format: 'dd-MMM-yyyy' },{ headerText: 'Status', key: 'Status', dataType: 'number' },{ headerText: 'History', key: 'Delete', unbound: true, template : '<button onclick='deleteRow(${ProductID})'>History</button>'},{ headerText: 'Action Category', key: 'ActionCategory' , dataType: 'string' }],
Regards,
Nilav Ghosh
Hi nilovgosh,
Have you tried something like this:
{ headerText: 'History', key: 'Delete', unbound: true, template : "<button onclick='deleteRow(${ProductID})'>History</button>"}
Hi Troy,
Thanks for your suggestion . However in my case the double quotes in the template cause a syntax error when trying to render the page.
The exact issue is that since my iggrid is bound to a knockout model, the whole grid structure and properties are already inside quotes in the data-bind attribute. I am unable to get a way to place the history column as shown by you with an additional pair of quotes
I have added a attachment with the snapshot to help you understand better.
Thanks,
Nilav
I managed to solve the problem on my own. Heres what i used
{ headerText: 'History', key: 'Delete', unbound: true, template : '<button onclick=deleteRow(${Id})>History</button>'}