jQWidgets Forums

jQuery UI Widgets Forums Grid Error message disapprearing in grid having % coumn width

This topic contains 12 replies, has 3 voices, and was last updated by  Peter Stoev 11 years, 2 months ago.

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

  • mallepaddi
    Participant

    Hi

    grid was created with 5 columns and their width are specified in percentage (%).

    Validation error messages are appearing as wanted but the problem was … error message was disappearing when we re-size browser dimensions.

    Everything seems to be fin with fixed column width and error message appearing even when the browser size was changed, only problem was with % column width.

    Please help.

    Thanks


    Dimitar
    Participant

    Hello mallepaddi,

    We were not able to reproduce the reported issue with the following example and jQWidgets version 3.0.3:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var url = "../sampledata/beverages.txt";
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'name' },
    { name: 'type' },
    { name: 'calories', type: 'int' },
    { name: 'totalfat' },
    { name: 'protein' },
    ],
    id: 'id',
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
    source: dataAdapter,
    theme: theme,
    editable: true,
    columns: [
    { text: 'Name', datafield: 'name', width: '30%' },
    { text: 'Beverage Type', datafield: 'type', width: '25%' },
    { text: 'Calories', datafield: 'calories', width: '15%',
    validation: function (cell, value) {
    if (value < 0 || value > 150) {
    return { result: false, message: "Calories should be in the 0-150 interval" };
    }
    return true;
    }
    },
    { text: 'Total Fat', datafield: 'totalfat', width: '15%' },
    { text: 'Protein', datafield: 'protein', width: '15%' }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    mallepaddi
    Participant

    Yes, It was working as expected if we have not mentioned jgrid width:100%, If i delete width property of grid then it’s being occupying the area of targeted area so i must specify width at grid level … at the same time i would like to mention width in % not in px for grid.

    Thanks


    Dimitar
    Participant

    Hi mallepaddi,

    We confirm the reported issue. Thank you for your feedback.

    Best Regards,
    Dimitar

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


    mallepaddi
    Participant

    Thanks for your reply … just to recap … grid width and column width must be %, then validation / popup error messages disappearing when we resize screen ..

    code something like …

    $(“#jqxgrid”).jqxGrid({
    width:’100%’,
    …….
    { text: ‘Supplier’, datafield: ‘supplier’, editable: false, width: ‘15%’},
    ……..
    { text: ‘Qty’, datafield: ‘qty’, width: ‘12%’, editable: true, cellsalign: ‘right’, align: ‘center’, columntype: ‘numberinput’,
    validation: function (cell, value) {
    return { result: false, message: “Quantity entered for selected product is invalid.” };
    }
    }
    ……………..
    }


    mallepaddi
    Participant

    Any update on reported issue ?


    Dimitar
    Participant

    Hi mallepaddi,

    We will fix the reported issue as soon as possible.

    Best Regards,
    Dimitar

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


    mallepaddi
    Participant

    Great, have you managed to replicate the same error at your end ?

    Looking forward for this fix, good luck.

    Thanks


    Dimitar
    Participant

    Hi mallepaddi,

    Yes, we have experienced the reported behaviour and confirm the issue.

    Best Regards,
    Dimitar

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


    mallepaddi
    Participant

    Hi

    Additional to above i have noticed one more bug in displaying error messages ..

    I am using “showvalidationpopup” to show error messages, it’s working fine when the grid doesn;t have vertical scroll bar and message showing at correct place …

    code : $(“#jqxgrid”).jqxGrid(‘showvalidationpopup’, event.args.rowindex, “qty”, “Enter Quantity for selected product.”);

    But the problem was with grid having vertical scroll bar, if i scroll all the way down then error message showing at wrong place …

    no scrolling … perfect ; scrolled .. display of message went wrong.

    please help

    Thanks


    Dimitar
    Participant

    Hi mallepaddi,

    Thank you for your feedback. We confirm this behaviour and will fix it as soon as possible.

    Best Regards,
    Dimitar

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


    mallepaddi
    Participant

    Hi

    Does the above issue fixed in 3.1.0 ?

    Thanks


    Peter Stoev
    Keymaster

    Hi mallepaddi,

    All changes can be found on this page: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/releasehistory/releasehistory.htm

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.