jQuery UI Widgets Forums Grid multiple image buttons in jqxGrid toolbar

This topic contains 2 replies, has 2 voices, and was last updated by  ali.kakhan 8 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • multiple image buttons in jqxGrid toolbar #79471

    ali.kakhan
    Participant

    I have jqxgrid with toolbar; I am trying to create three image button on the toolbar , how with the following code only one is getting added ( the first one ) and the rest are not. following is the code please update.

    `

    $(“#jqxgrid”).jqxGrid(
    {
    width: 1200,
    source: source,
    pageable: true,
    autoheight: true,
    filterable: true,
    sortable: true,
    theme: ‘energyblue’,
    autorowheight: true,
    selectionmode: ‘checkbox’,
    showtoolbar: true,
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $(“<div style=’margin: 5px;’></div>”);

    container.append(“<div style = ‘width:85px; height:40px;’ id=’IngInternalUser’> <img style=’height:20px; width:20px; float:left; margin:4px;’ src=’../_layouts/15/Images/excelIcon.png’/><div style=’float: left; margin: 4px;’>Excel </div></div>”);
    container.append(‘<div style = “width:85px;height:40px;” id=”IngFoodInspReview”> <img style=”height:20px;width:20px; float:left; margin:4px;” src=”../_layouts/15/Images/EmailIcon.png”/> <div style=”float: left; margin: 4px;”>Email</div></div>’);
    container.append(‘<div style = “width:85px;height:40px;” id=”jxgPrint”> <img style=”height:20px;width:20px; float:left; margin:4px;” src=”../_layouts/15/Images/printerIcon.png”/><div style=”float: left; margin: 4px;”>Print</div><div>’);

    toolbar.append(container);

    $(‘#IngInternalUser’).jqxButton();
    $(‘#IngFoodInspReview’).jqxButton();
    $(‘#jxgPrint’).jqxButton();

    },

    multiple image buttons in jqxGrid toolbar #79487

    Dimitar
    Participant

    Hello ali.kakhan,

    You just need to set float: left to your buttons so they appear next to each other:

    rendertoolbar: function(toolbar) {
        var me = this;
        var container = $("<div style='margin: 5px;'></div>");
    
        container.append("<div style = 'width:85px; height:40px; float: left;' id='IngInternalUser'> <img style='height:20px; width:20px; float:left; margin:4px;' src='../_layouts/15/Images/excelIcon.png'/><div style='float: left; margin: 4px;'>Excel </div></div>");
        container.append('<div style = "width:85px;height:40px; float: left;" id="IngFoodInspReview"> <img style="height:20px;width:20px; float:left; margin:4px;" src="../_layouts/15/Images/EmailIcon.png"/> <div style="float: left; margin: 4px;">Email</div></div>');
        container.append('<div style = "width:85px;height:40px; float: left;" id="jxgPrint"> <img style="height:20px;width:20px; float:left; margin:4px;" src="../_layouts/15/Images/printerIcon.png"/><div style="float: left; margin: 4px;">Print</div><div>');
    
        toolbar.append(container);
    
        $('#IngInternalUser').jqxButton();
        $('#IngFoodInspReview').jqxButton();
        $('#jxgPrint').jqxButton();
    
    }

    Best Regards,
    Dimitar

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

    multiple image buttons in jqxGrid toolbar #79489

    ali.kakhan
    Participant

    Hi Dimitar,

    Thank you, Its a small overlook but an expensive one, I really appreciate your assistance. It works fine as soon as I entered float : left in the main div of each button.

    thanks

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

You must be logged in to reply to this topic.