jQuery UI Widgets Forums Angular Initialising jqxinput in jqxwindow pop up in Docking layout

This topic contains 2 replies, has 2 voices, and was last updated by  benjamin.deve 2 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • benjamin.deve
    Participant

    hello,
    I have a context menu that pops up and when choose an option a pop up window come up with a input field.
    when I try to initialise the input field by using jqwidgets.createInstance inside a popup window within a Docking Layout but i get this error. maybe its a small thing im missing, im not sure.

    The instance for the input is – const windowInputInstance – not working
    the instance for the window is – const windowEditInstance – working fine

    here is the ERROR;

    DockingLayoutComponent.html:2 ERROR Error: jqxInput: Missing Text Input in the Input Group
    at b.(anonymous function).render (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxinput.js:7:1153)
    at b.(anonymous function).createInstance (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxinput.js:7:766)
    at Object.a.jqx.applyWidget (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:7670)
    at HTMLDivElement.eval (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:12098)
    at Function.each (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:7:6099)
    at init.each (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:7:2367)
    at init.a.fn.(anonymous function) [as jqxInput] (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:12021)
    at Object.createInstance (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:683)
    at Object.initContent (webpack-internal:///../../../../../src/app/docking-layout/docking-layout.component.ts:139:65)
    at b.(anonymous function).initContent (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxlayout.js:7:19939)

    my HTML CODE IS HERE (Taken from the Docking layout IDE example):
    <!–documentGroup–>
    <div data-container=”Document1Panel”>
    <div style=”padding: 5px;”>
    <div id=”Document1TextArea” style=”padding: 10px;”></div>
    <div id=”myWindowEdit”>
    <div>Rename Folder</div>
    <div style=”overflow: hidden”>
    <table>
    <tbody>
    <tr>
    <td align=’right’>New Name: </td>
    <td align=’left’>
    <div id=”firstNameEdit”></div>
    </td>
    </tr>

    <tr>
    <td align=’right’></td>
    <td style=”padding-top: 10px” align=’right’>
    <div id=”saveBtn” style=”float: left”></div>
    <div id=”cancelBtn” style=”float: left”></div>

    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>

    </div>
    </div>

    my Docking layout initialisation is HERE:
    contentContainer: ‘Document1Panel’,
    initContent: () => {
    /*
    * This the initialisation of the context menu inside the grid view
    * */
    const menuGridInstance = jqwidgets.createInstance(‘#myMenuGridView’, ‘jqxMenu’,
    {
    width: 120, height: 80, autoOpenPopup: false, mode: ‘popup’
    });

    /*
    * This the initialisation of the window where a user can customise a new folder name inside the grid view
    * */
    const windowEditInstance = jqwidgets.createInstance(‘#myWindowEdit’, ‘jqxWindow’,
    {
    width: 300, height: 120, modalOpacity: ‘0.01’,
    resizable: false, isModal: true, autoOpen: false
    });

    /*
    * This the initialisation of the buttons sued in the window when a user edits a folder
    * */
    const windowInputInstance = jqwidgets.createInstance(‘#firstNameEdit’, ‘jqxInput’,
    {
    width: 200, height: 50
    });

    menuGridInstance.addEventHandler(‘itemclick’, event => {
    const item = event.args.innerText;
    switch (item) {
    case ‘Add Item’:

    this.fileSystemService.addGridItem(gridItemParent);

    break;
    case ‘Remove Item’:

    this.fileSystemService.removeGridItem(gridItemParent);

    break;
    case ‘Rename’:
    // do some validation here and open window
    windowEditInstance.open();
    break;
    }
    });

    }


    Ivo Zhulev
    Participant

    Hi benjamin,

    Check this topic:
    https://www.jqwidgets.com/community/topic/jqxinput-missing-text-input-in-the-input-group/

    I don’t see your HTML tag for the input in the code provided. So please check this out.

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/


    benjamin.deve
    Participant

    Thank you,

    I got it to work now.
    I had a missing input tag (<input type=”text”/>) in my declaration.

    This is the docking-layout instance.
    ———————————-
    contentContainer: ‘DocumentPanel’,
    initContent: () => {
    const inputInstance = jqwidgets.createInstance (
    ‘#myInput’,
    ‘jqxInput’,
    { width: 200, height: 50});
    }

    HTML section
    ——————–
    <div data-container=DocumentPanel”>
    <div id=”myInput”>
    <input type=”text”/>
    </div>
    </div>

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

You must be logged in to reply to this topic.