How can jqxGrid render toolbar with jqxDatetimeInput within one row?

[douglas168Participant]

Hi all,

I am trying to add jqxDatetimeInput to jqxGrid toolbar but it keeps render with line break. How can jqxGrid render toolbar with jqxDatetimeInput within one row?

Before inserting jqxDatetimeInput, all buttons and text are rendered within one row.

Now with jqxDateTimeInput appended to toolbar, the toolbar is render with line break on ‘searchStartDate’ and ‘searchEndDate’ such that the toolbar is:

<ADD>
<SEARCHSTARTDATE>
<SEARCHENDDATE>
<SEARCHBOX><SEARCHBUTTON><CLEARFILTERINGBUTTON><EXCELEXPORT>

below is part of the jqxGrid code:
#####################
# CODE
#####################

rendertoolbar: function (toolbar) {
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input style=”margin-left: 20px;” id=”addrowbutton” type=”button” value=”ADD” />’);
container.append(‘<input style=”margin-left: 20px;” id=”searchStartDate”/>’);
container.append(‘<input style=”margin-left: 20px;” id=”searchEndDate”/>’);
container.append(‘<input style=”margin-left: 20px;” id=”searchbox” type=”text” />’);
container.append(‘<input style=”margin-left: 1px;” id=”searchbutton” type=”button” value=”SEARCH” />’);
container.append(‘<input style=”margin-left: 5px;” id=”clearfilteringbutton” type=”button” value=”SHOW ALL” />’);
container.append(‘<input style=”margin-left: 50px;” id=”excelExport” type=”button” value=”EXPORT TO EXCEL” />’);

$(“#addrowbutton”).jqxButton({template: ‘success’, height: ’30px’, width: ’80px’});
$(“#searchStartDate”).jqxDateTimeInput({
theme: ‘fresh’,
width: ‘100px’, height: ’20px’, formatString: “yyyy-MM-dd HH:mm:ss”, showTimeButton: false
});
$(“#searchEndDate”).jqxDateTimeInput({
theme: ‘fresh’,
width: ‘100px’, height: ’20px’, formatString: “yyyy-MM-dd HH:mm:ss”, showTimeButton: false
});

[HristoParticipant]

Hello douglas168,

I would like to suggest you look at this example:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?light
You could try to use this approach to implement there the jqxDateTimeInput.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[douglas168Participant]

Thank you again Hristo! I used the example to redo the toolbar and it is working now. Appreciate the help!

[Author]

Posts