multiple image buttons in jqxGrid toolbar

[ali.kakhanParticipant]

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();

},

[DimitarParticipant]

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/

[ali.kakhanParticipant]

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

[Author]

Posts