Ive used this code to try to ad a buton to an unbound column
.Columns(column => {
column.Unbound("View").Width("100px").Template("<input type='button' onclick='viewDetail(${Detaild})' value='View' class='fa fa-binoculars'/>");
display columns here.......
})
and an associated js function
but as soo n as i ad this, the grid stops rendering
whats the best way to add buttons in an igGrid ?
Hello Mark,
Thank you for posting in our community.
The way you are setting the template for the unbound column seems correct. I created a small sample and I am attaching it for your reference. In my app I am adding a templated unbound column with "View" button. When clicked this button calls a function with the rowID as a parameter. For example:
.Columns(col => { col.For(c => c.ProductID).HeaderText("ProductID").Hidden(false); col.For(c => c.Name).HeaderText("Name"); col.For(c => c.ReleaseDate).HeaderText("ReleaseDate"); col.For(c => c.ProductNumber).HeaderText("Product Number"); col.Unbound("TmpCol").HeaderText("Details").Width("100px").Template("<input type='button' onclick='viewDetails(${ProductID})' value='View'/>"); })
Please have a look at this sample and let me know if you need any further assistance afterwards.
thanks for your help, I managed to get it to work in the end
column.Unbound("View").Width("100px").Template("<input type='button' onclick='viewContract(${ContractId})' value='View' class='btn btn-primary' />").HeaderText("").Width("75px");
but i now have a different problem
this bit
onclick='viewContract(${ContractId})' doesnt actually get the id, I have a simple bit of javascript to test it and the value is nullfunction viewContract(ContractId) { alert(ContractId); }the alert say the value is undefined. I need to get the underlying primary key of the selected row (the primary key is ContractId). How would I get this ?
I was not able to reproduce the behavior that you described on my side with the sample previously attached in this thread. Can you please modify the app in order to reproduce the issue or attach a sample of your own whether I can observe the described behavior. This is going to be highly appreciated and will help me investigate this matter further.
Please feel free to continue sending updates to this case at any time.
If I place the ContractId column in the grid (its visible) it works. But I dont want to se the primary key listed in the grid so I addd this line
feature.Hiding().ColumnSettings(settings => settings.ColumnSetting().ColumnKey("ContractId").Hidden(true));
this hid the column while still allowing me access to the underlying value. The problem now is that it shows a hiding mechanism in the header of the grid. I dont want to see this, I just dont want any reference at all to the underlying contractId to show up in the grid but I need to access it in code. Is there a better way than hiding the column ?
In order to set a column to be hidden and still have no hiding indicator in grid`s headers the allowHiding option for you ID column can be set to false in the Hiding columnSettings.
features.Hiding().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("ProductID").AllowHiding(false).Hidden(true); });
Please let me know if you have any additional questions regarding this matter.