jQuery UI Widgets › Forums › Getting Started › Icons for buttons in grid tool bar does not appear
Tagged: Button, buttons, data table, datatable, icon, icons, jqxdatatable, toolbar
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 4 months ago.
-
Author
-
Hi There,
I am trying to work though a couple of the demos so see if jqwidgets are what I need.
My issue at the moment is that only the add button shows in my dataTable tool bar.
Code:
//append buttons
var container =$ (“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px’><div style=’margin: 4px; width: 16px; height 16px;’></div></div>”;
var addButton = $(buttonTemplate);
var editButton = $(buttonTemplate);
var deleteButton = $(buttonTemplate);
var cancelButton = $(buttonTemplate);
var updateButton = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({ cursor: “pointer”, enableDefault: false, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add” });
editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
editButton.jqxTooltip({ position: ‘bottom’, content: “Edit” });
deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete” });
cancelButton.jqxButton({ cursor: ‘pointer’, disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel” });The table shows fine – the Plus icon appears, but no other icons.
When I change the other icons to ‘jqx-icon-plus’ the plus icon appears for all buttons.
When I rename the plus.png to icon-edit.png it still does not appear when the jqx-icon-edit is called.
When I remove the png files I get an error in the console (just to check they are stored in the correct place)Any suggestions?
Any suggestions?
Hello stianh,
As you can see from the demo Inline Row, all icons show up as expected with the latest version (3.5.0). Please update and try again.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.