Grouping grid causes problems in modal window

[sdalbyMember]

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

[sdalbyMember]

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

[Peter StoevKeymaster]

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

[sdalbyMember]

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

[Author]

Posts