jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar jqxToolBar access to tools

This topic contains 11 replies, has 3 voices, and was last updated by  ivailo 8 years ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • jqxToolBar access to tools #73427

    dapu1975
    Participant

    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?

    jqxToolBar access to tools #73435

    ivailo
    Participant

    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

    jqxToolBar access to tools #73525

    dapu1975
    Participant

    Hi ivailo,

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

    Best Regards,
    Daniel Pust

    jqxToolBar access to tools #73552

    ivailo
    Participant

    Hi dapu1975,

    Try again. In my browser the example is ok.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    jqxToolBar access to tools #85077

    N.I.Alam
    Participant

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

    jqxToolBar access to tools #85078

    N.I.Alam
    Participant

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

    jqxToolBar access to tools #85093

    ivailo
    Participant

    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

    jqxToolBar access to tools #85182

    N.I.Alam
    Participant

    Thanks!

    jqxToolBar access to tools #85187

    N.I.Alam
    Participant

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

    jqxToolBar access to tools #85202

    ivailo
    Participant

    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

    jqxToolBar access to tools #85214

    N.I.Alam
    Participant

    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

    jqxToolBar access to tools #85274

    ivailo
    Participant

    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

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

You must be logged in to reply to this topic.