Add additional buttons to jqxWindow header

[bouyoulMember]

Hello,

I am trying to add expanding capability to the jqxWindow control: Basically, I would like to have the functionality of the jqxExpander (the arrow button, expanding/collapsing the widget) AND the functionality of the jqxWindow (the close button, drag the widget around, close) on the same widget.

Can it be done in a simple way ? If yes, how do I extend jqxWindow to do what I want ? If no, what are my options?

Thanks.

B.

[Peter StoevKeymaster]

Hi bouyoul,

I am happy to tell you that the requested feature is already supported. You need to set the jqxWindow’s ‘showCollapseButton’ property to true.

For example:

$('#window').jqxWindow({ showCollapseButton: true, height: 300, width: 500});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bouyoulMember]

OK. Thanks!

(by the way, the option is not listed on http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxwindow/jquery-window-api.htm).

[Peter StoevKeymaster]

Thanks, bouyoul. We must have missed it. We will add it the next update of the help docs.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[luesakParticipant]

Great stuff!

However, I would also like to add a reload button into the window header… or some other buttons for that matter. How can this be achieved?

Thanks!

Kim

[sheng63Participant]

Hello, i hope can help

The jqx-window id is “theWin”, i put 2 button: for fullscreen and for maximize the jqx-window (btnWindowFull, and btnWindowMax), and add a custom class with custom icons

So, in some place of your code, after DOM ready – of course:

$("<div id='btnWindowFull' style='float: left; width:16px; height:16px; margin-right:5px;' class=\"jqx-icon-full\"></div>").insertBefore("#theWin.jqx-window-close-button");
    $("<div id='btnWindowMax' style='float: left; width:16px; height:16px; margin-right:5px;' class=\"jqx-icon-expand\"></div>").insertBefore("#theWin.jqx-window-close-button");

…

and when I open the jqx-window

…

$("#theBtn").on('click', function () {
 $("#theWin.jqx-window-close-button-background").css("width", "58px");
        setTimeout(function () { $("#theWin.jqx-window-close-button-background").css("width", "58px"); }, 1000);
        $("#theWin.jqx-window-close-button").css({ float: "left", width: "16px", height: "16px" });
});

By the way: jQWidgets v3.5.0 (2014-Sep-15)

Regards

[fresherParticipant]

Hi sheng 63

I have 2 windows follwing code..

<div id=’jqxWidget’>
<div id=”docking”>
<div>
<div id=”window1″ style=”height: 220px;”>
<div>
Stacked Chart
</div>
<div>
<ucChart:StackedChart ID=”chartControl” runat=”server” />
</div>
</div>
<div id=”window2″ style=”height: 220px”>
<div>
Bubble Chart
</div>
<div>
<ucBubbleChart:BubbleChart ID=”BubbleChart1″ runat=”server” />
</div>
</div>
</div>
</div>

I would like to add a maximize button , I have added following code in my page doc ready function

$(“<div id=’btnWindowFull’ style=’float: left; width:16px; height:16px; margin-right:5px;’ class=\”jqx-icon-full\”></div>”).insertBefore(“#window1.jqx-window-close-button”);
$(“<div id=’btnWindowMax’ style=’float: left; width:16px; height:16px; margin-right:5px;’ class=\”jqx-icon-expand\”></div>”).insertBefore(“#window1.jqx-window-close-button”);

$(“#theBtn”).on(‘click’, function () {
$(“#window1.jqx-window-close-button-background”).css(“width”, “58px”);
setTimeout(function () { $(“#theWin.jqx-window-close-button-background”).css(“width”, “58px”); }, 1000);
$(“#window1.jqx-window-close-button”).css({ float: “left”, width: “16px”, height: “16px” });
});

I coud’nt understand where to add “theBtn ” control , could you please elaborate the process of adding a custom button in jqxwindow header step wise !

Thanks..!

[Author]

Posts