jQuery UI Widgets Forums Grid Grouping grid causes problems in modal window

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  sdalby 11 years, 5 months ago.

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

  • sdalby
    Member

    Hi

    I have a jqxGrid that is grouped and an initial group field is set. It is populated inside a modal jqxWindow.

    When it is displayed, the group value is blank and the top bar reserved to show group column is overlapped by the grid.

    * When I dont have an initial value there are no issues.
    * If I cancel the grouping and set it again, there is no problem
    * If I move it out of the model window, there is no problem.

    It is not the first time I have tried that controls causes problems when populated inside a jqxWindow.

    Can you figure out what is wrong?

    Here is the code

            <div id="TransferredCurenciesWindow">
    <div>Transferred currencies</div>
    <div>
    <div>
    <div id="jqxgridTransferCurrencies" style="margin: 25px"></div>
    </div>
    </div>
    </div>
    function defineTransferredCurrenciesWindow() {
    var width = 1300;
    var height = 850;
    $('#TransferredCurenciesWindow').jqxWindow({ height: height, maxHeight: height, width: width, maxWidth: width, theme: 'classic', autoOpen: false, isModal: true, animationType: 'none' });
    }
    function openTransferredCurrenciesWindow(currencyTransferId) {
    callServerAsync('CurrencyImportWebService.asmx/GetCurrencyDetails', { currencyTransferId: currencyTransferId, preferredLanguage: startParameters.preferredLanguage }, function (result) {
    showTransferredCurrenciesWindow(result.d);
    });
    }
    function showTransferredCurrenciesWindow(currencyList) {
    var source =
    {
    localdata: currencyList,
    datatype: "array"
    };
    var numberWidth = 120;
    var timeStampWidth = 150;
    $("#jqxgridTransferCurrencies").jqxGrid(
    {
    width: 1200,
    height: 730,
    source: source,
    groupable: true,
    columns: [
    { text: 'Company', datafield: 'Company', width: 100 },
    { text: 'Currency', datafield: 'Currency', width: 100 },
    { text: 'Base currency', datafield: 'BaseCurrency', width: 100 },
    { text: 'Buy rate', datafield: 'BuyRate', cellsalign: 'right', width: numberWidth },
    { text: 'Sell rate', datafield: 'SellRate', cellsalign: 'right', width: numberWidth },
    { text: 'Default spread', datafield: 'DefaultSpread', cellsalign: 'right', width: numberWidth },
    { text: 'Buy rate', datafield: 'BuyRate', cellsalign: 'right', width: numberWidth },
    { text: 'Middle rate', datafield: 'MiddleRate', cellsalign: 'right', width: numberWidth },
    { text: 'Buy time', datafield: 'BuyTimeStamp', cellsalign: 'right', width: timeStampWidth },
    { text: 'Sell time', datafield: 'SellTimeStamp', cellsalign: 'right' }
    ],
    });
    $('#TransferredCurenciesWindow').jqxWindow('open');
    }
    • This topic was modified 11 years, 5 months ago by  sdalby.

    sdalby
    Member

    Please disregard, without understanding the logic behind, it works if I open the window before defining the grid.


    Peter Stoev
    Keymaster

    Hi sdalby,

    Any widget hosted in jqxWindow should be initialized in the jqxWindow’s initContent callback function.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    sdalby
    Member

    Hi Peter

    It is really good news if this is the reason to all the problems, I have encountered. Can you verify that this is the general way to do it:

    function defineTransferredCurrenciesWindow() {
    var width = 1400;
    var height = 850;
    $('#TransferredCurenciesWindow').jqxWindow({ height: height, maxHeight: height, width: width, maxWidth: width, theme: 'classic', autoOpen: false, isModal: true, animationType: 'none', initContent: function() {
    var numberWidth = 120;
    var timeStampWidth = 150;
    $("#jqxgridTransferCurrencies").jqxGrid(
    {
    width: 1300,
    height: 735,
    groupable: true,
    columns: [
    { text: 'Company', datafield: 'Company', width: 100 },
    { text: 'Currency', datafield: 'Currency', width: 100 },
    { text: 'Base currency', datafield: 'BaseCurrency', width: 100 },
    { text: 'Buy rate', datafield: 'BuyRate', cellsalign: 'right', width: numberWidth },
    { text: 'Sell rate', datafield: 'SellRate', cellsalign: 'right', width: numberWidth },
    { text: 'Default spread', datafield: 'DefaultSpread', cellsalign: 'right', width: numberWidth },
    { text: 'Buy rate', datafield: 'BuyRate', cellsalign: 'right', width: numberWidth },
    { text: 'Middle rate', datafield: 'MiddleRate', cellsalign: 'right', width: numberWidth },
    { text: 'Buy time', datafield: 'BuyTimeStamp', cellsalign: 'right', width: timeStampWidth },
    { text: 'Sell time', datafield: 'SellTimeStamp', cellsalign: 'right' }
    ],
    groups: ['Company']
    });
    }
    });
    }
    function openTransferredCurrenciesWindow(currencyTransferId) {
    callServerAsync('CurrencyImportWebService.asmx/GetCurrencyDetails', { currencyTransferId: currencyTransferId, preferredLanguage: startParameters.preferredLanguage }, function (result) {
    showTransferredCurrenciesWindow(result.d);
    });
    }
    function showTransferredCurrenciesWindow(currencyList) {
    var source =
    {
    localdata: currencyList,
    datatype: "array"
    };
    $("#jqxgridTransferCurrencies").jqxGrid({ source: source });
    $('#TransferredCurenciesWindow').jqxWindow('open');
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.