jqxToolBar access to tools

[dapu1975Participant]

I would like to change the background color of a jqxInput which is placed on a jqxToolBar.

Is this possible?

Can anyone give a hint how?

[ivailoParticipant]

Hi dapu1975,

Yes, it’s possible. You can add class directly to the jqxInput.
Here is the jqwidgets example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[dapu1975Participant]

Hi ivailo,

while clicking the link an editor will open but without the example.

Best Regards,
Daniel Pust

[ivailoParticipant]

Hi dapu1975,

Try again. In my browser the example is ok.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[N.I.AlamParticipant]

Hi,
I am trying to create a dropdownlist in a toolbar, but i need to access to the tool later on in my code, so when i try to set an id to the tool it gets disabled, can you please tell me what to do.

$(“#jqxToolBar”).jqxToolBar({
theme: “energyblue”,
width: “100%”,
height: 35,
tools: “button | custom”,
initTools: function(type, index, tool, menuToolIninitialization) {
switch (index) {
case 0:
tool.text(“A”);
break;
case 1:
var source = [“New”];
tool.id=’ABCD’
tool.jqxDropDownList({
source: source,
width: ‘200px’,
});
tool.on(‘select’, function(event) {});
break;
}
}
});

[N.I.AlamParticipant]

I have tried this method too, but this also disables the tool:

$(“#jqxToolBar”).jqxToolBar({
theme: “energyblue”,
width: “100%”,
height: 35,
tools: “button | custom”,
initTools: function(type, index, tool, menuToolIninitialization) {
switch (index) {
case 0:
tool.text(“A”);
break;
case 1:

var ddlist = $(“<div id=” + ‘ABCD’ + “></div>”);
ddlist.attr(“title”, “Select project settings”);
tool.append(ddlist);
var source = [“New”];
ddlist.jqxDropDownList({
source: source,
width: ’200px’,
});
ddlist.on(‘select’, function(event) {});
break;
}
}
});

[ivailoParticipant]

Hi N.I.Alam,

If you want to change the id of the widget – change it’s id attribute via tool.attr("id", "ABCD");
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[N.I.AlamParticipant]

Thanks!

[N.I.AlamParticipant]

Hi,
I am not able to hide a tool in the toolbar. In the following example i create a dropdownlist and then hide it, but if i resize the page to a smaller size , so that the ‘three lines’ menu tool appears, it shows the dropdownlist, which i had formerly hidden.
Thanks

$(“#jqxToolBar”).jqxToolBar({
theme: “energyblue”,
width: “100%”,
height: 35,
tools: “button | dropdownlist”,
initTools: function(type, index, tool, menuToolIninitialization) {
switch (index) {
case 0:
tool.text(‘A’);
break;
case 1:
var source = [‘New’];
// tool.id=’ABCD’;
tool.attr(“id”, “ABCD”);
tool.jqxDropDownList({
source: source,
width: ‘200px’
});
if (menuToolIninitialization === false) {
// return { menuTool: false };
} else {
return {
minimizable: false
};
}
}
}
});
$( ‘#ABCD’ ).hide();

[ivailoParticipant]

Hi N.I.Alam,

To achieve this, you can set visibility:hidden; of the item via external class.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[N.I.AlamParticipant]

Hi,
I tried this and it works fine, but the problem i see now is that it shows empty space where the tool was hidden, e:g if I have Tool0, Tool1 and Tool2 , and I hide Tool1, i see an empty space between tool 0 and 2. they are not placed together, also in the demo above if you resize the page after hiding the tool, the ‘three lines’ menu appear event though we have no tool to display and it shows and empty menu. If I use the display property instead of visibility, the tool shows up again after resizing.

Can you please suggest some other solution.

Thanks

[ivailoParticipant]

Hi N.I.Alam,

If you use display:none, you have to set it each time when the menu is resized.
To detect resizes you can use jqxResponse.

Best Regards,
Ivailo Ivanov
jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts