jQuery UI Widgets Forums Grid "validation" event for check box

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • "validation" event for check box #31559

    mallepaddi
    Participant

    Hi

    Shall we use below event for “checkbox”,

    I need to validate field values entered in a grid row when the check box of that row is checked…

    validation: function (cell, value) {
    ……
    }

    please help ..

    Thanks

    "validation" event for check box #31599

    Dimitar
    Participant

    Hello mallepaddi,

    Here is an example on the matter:

    <!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/jqxdata.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    // prepare the data
    var data = generatedata(200, true);
    var source =
    {
    localdata: data,
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'available', type: 'bool' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
    ],
    datatype: "array"
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    editable: true,
    theme: theme,
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Available', datafield: 'available', threestatecheckbox: false, columntype: 'checkbox', width: 70 },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right',
    validation: function (cell, value) {
    var checked = $('#jqxgrid').jqxGrid('getcellvalue', cell.row, "available");
    if (checked == true) {
    if (value > 10) {
    return { result: false, message: "Quantity should be greater than 10." };
    } else {
    return true;
    };
    } else {
    return true;
    };
    }
    },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    We hope it is helpful to you.

    Best Regards,
    Dimitar

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

    "validation" event for check box #31603

    mallepaddi
    Participant

    Hi

    Thanks for sharing code …

    But Above code works when we are editing “Quantity” field ( with “Checkbox” checked )

    But my scenario is … Message should be shown at “Quantity” field when check box selected …. not when editing quantity …

    Thanks

    "validation" event for check box #31671

    Dimitar
    Participant

    Hi mallepaddi,

    Here is another suggestion:

    <!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/jqxdata.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    // prepare the data
    var data = generatedata(200, true);
    var source =
    {
    localdata: data,
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'available', type: 'bool' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
    ],
    datatype: "array"
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    editable: true,
    theme: theme,
    columns: [
    { text: 'First Name', editable: false, datafield: 'firstname', width: 100 },
    { text: 'Last Name', editable: false, datafield: 'lastname', width: 100 },
    { text: 'Product', editable: false, datafield: 'productname', width: 180 },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 70 },
    { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', editable: false, datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    $("#jqxgrid").on('cellendedit', function (event) {
    var column = args.datafield;
    var row = args.rowindex;
    var value = args.value;
    if (column == "available" && value == true) {
    $("#jqxgrid").jqxGrid('showvalidationpopup', row, "quantity", "Invalid Value");
    };
    });
    });
    </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/

    "validation" event for check box #31691

    mallepaddi
    Participant

    Hi

    Thanks,

    Implemented on “cellvaluechanged” event and it works great, additionally added “return false” with some conditions on “cellbeginedit” to make user not to select any other product with out solving the error of current selected product.

    We have noticed a issue of showing error message at wrong place when the grid having scrollbars, message shown at wrong place when we scroll grid and the item selected.

    Which was accepted by your team and it seems working on this fix.

    Thanks

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

You must be logged in to reply to this topic.