jQuery UI Widgets Forums Getting Started Icons for buttons in grid tool bar does not appear

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • stianh
    Participant

    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?


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.