jQuery UI Widgets Forums Grid Hide error message with checkbox uncheck

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Hide error message with checkbox uncheck #31970

    mallepaddi
    Participant

    Hi

    validation: function (cell, value) {
    var datarow = $(productGrid).jqxGrid(‘getrowdata’, cell.row);
    if (datarow.selected === true && value <= 0) {
    return { result: false, message: "Enter Quantity (or) Unselect product." };
    }
    return true;
    }

    Error message appears when user selects the product by checking "check box", but user unable to unchecked check box if he doesn't want to proceed with same product, current condition forcing user to enter value once selected.

    How to enable the user to unchecked check box and hide error message.

    Thanks

    Hide error message with checkbox uncheck #32034

    Dimitar
    Participant

    Hello mallepaddi,

    Please check out the following example for a solution:

    <!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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.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/jqxpanel.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    var url = "../sampledata/orders.xml";
    // prepare the data
    var source =
    {
    datatype: "xml",
    datafields: [
    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var editedCell = new Object();
    // create jqxgrid.
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    height: 450,
    source: dataAdapter,
    theme: theme,
    sortable: true,
    filterable: true,
    editable: true,
    ready: function () {
    // called when the Grid is loaded. Call methods or set properties here.
    },
    selectionmode: 'checkbox',
    altrows: true,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
    { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
    { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right',
    cellbeginedit: function (row, datafield, columntype) {
    editedCell = { row: row, column: datafield };
    },
    validation: function (cell, value) {
    if (value > 30) {
    return { result: false, message: "Please unselect row" };
    };
    }
    },
    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
    { text: 'Ship Country', datafield: 'ShipCountry' },
    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
    ]
    });
    $('#jqxgrid').on('rowunselect', function (event) {
    var args = event.args;
    var row = args.rowindex;
    if (row == editedCell.row) {
    $("#jqxgrid").jqxGrid('endcelledit', editedCell.row, editedCell.column, true);
    };
    });
    });
    </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/

    Hide error message with checkbox uncheck #32042

    mallepaddi
    Participant

    Hi

    You are the best, i am almost there to finish my job, but how do we prevent user from selecting other checkboxes if selected row returning an error because of ZERO quantity entered.

    Only possible options could be … either enter quantity or unselect the row, should be having choice of selecting other checkboxes ..

    Thanks

    Hide error message with checkbox uncheck #32054

    Dimitar
    Participant

    Hi mallepaddi,

    Here is an updated version of the example:

    <!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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.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/jqxpanel.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    var url = "../sampledata/orders.xml";
    // prepare the data
    var source =
    {
    datatype: "xml",
    datafields: [
    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var editedCell = new Object();
    // create jqxgrid.
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    height: 450,
    source: dataAdapter,
    theme: theme,
    sortable: true,
    filterable: true,
    editable: true,
    ready: function () {
    // called when the Grid is loaded. Call methods or set properties here.
    },
    selectionmode: 'checkbox',
    altrows: true,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
    { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
    { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right',
    cellbeginedit: function (row, datafield, columntype) {
    editedCell = { row: row, column: datafield };
    },
    validation: function (cell, value) {
    if (value > 30) {
    return { result: false, message: "Please unselect row" };
    };
    }
    },
    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
    { text: 'Ship Country', datafield: 'ShipCountry' },
    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
    ]
    });
    $('#jqxgrid').on('rowunselect', function (event) {
    var args = event.args;
    var row = args.rowindex;
    if (row == editedCell.row) {
    $("#jqxgrid").jqxGrid('endcelledit', editedCell.row, editedCell.column, true);
    editedCell.row = undefined;
    editedCell.column = undefined;
    };
    });
    $('#jqxgrid').on('rowselect', function (event) {
    var args = event.args;
    var row = args.rowindex;
    if (row != editedCell.row && editedCell.row != undefined) {
    $("#jqxgrid").jqxGrid('unselectrow', row, editedCell.column, true);
    };
    });
    });
    </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/

    Hide error message with checkbox uncheck #32072

    mallepaddi
    Participant

    Hi

    Great help !!!!

    Many thanks …

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

You must be logged in to reply to this topic.