In my web app, I am trying to replace a number of Bootstrap tables with Ignite UI grid controls. At the end of each grid row there is a non-text Edit button with a glyphicon edit image.
In the existing version, I am using a glyphicon embedded within a span element to display the image within the button:
For the Ignite UI version, I am using a column template to set the HTML code but I cannot work out how to get the input element to display the glyphicon image.
{ headerText: "", key: "View", dataType: "string", unbound: true, template: "" },
The examples that I have come across to embed a button within an igGrid cell use elements and I am basing my code around these examples. I have tried using a element instead of the element to follow the original Bootstrap tables approach but, bizarrely, when the cell row button is clicked this acts as a form submit.
In the existing version, I am using a glyphicon embedded within a span element to display the image within the button and this works fine:
<button data-bind="click: vm.CPR.EditItem" class="btn btn-xs"><span class="glyphicon glyphicon-edit"></span></button>
Hello Charles,
This can be achieved by adding the image to the button and have no span inside of it. For example:
<style>button.glyphicon { background-image: url("icon.jpg"); background-size: cover;}button { width: 30px; height: 30px;}</style> ...{ headerText: "Edit", key: "EditCol", unbound: true, template: "<button class='glyphicon'></button> " }
...{ headerText: "Edit", key: "EditCol", unbound: true, template: "<button class='glyphicon'></button> " }
I have attached a sample, demonstrating how this can be done.
Please feel free to contact me if you have further questions.
Regards,Ivaylo HubenovEntry-level developer