jQuery UI Widgets Forums Grid grid disable cell from edditing

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • grid disable cell from edditing #25465

    emden
    Participant

    Hi,

    I want to disable editing a cell.

    If a particular cell has a certain value then in the next column the cell on that row must be editable otherwise the cell should be non editable

    Thanks In Advance.

    Edwin

    grid disable cell from edditing #25467

    Dimitar
    Participant

    Hello Edwin,

    Here is an 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.1.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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.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 = getDemoTheme();
    // prepare the data
    var data = generatedata(200);
    var source =
    {
    localdata: data,
    datatype: "array",
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },
    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: 'date', type: 'date' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var cellbeginedit = function (row, datafield, columntype, value) {
    if (datafield == "quantity") {
    var nextColumnValue = $('#jqxgrid').jqxGrid('getcellvalue', row, "price");
    if (nextColumnValue < 3) {
    return false;
    };
    };
    };
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 685,
    source: dataAdapter,
    editable: true,
    theme: theme,
    selectionmode: 'multiplecellsadvanced',
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
    {
    text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
    validation: function (cell, value) {
    if (value == "")
    return true;
    var year = value.getFullYear();
    if (year >= 2014) {
    return { result: false, message: "Ship Date should be before 1/1/2014" };
    }
    return true;
    }
    },
    {
    text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput', cellbeginedit: cellbeginedit
    },
    { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
    validation: function (cell, value) {
    if (value < 0 || value > 15) {
    return { result: false, message: "Price should be in the 0-15 interval" };
    }
    return true;
    },
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ digits: 3 });
    }
    }
    ]
    });
    // events
    $("#jqxgrid").on('cellbeginedit', function (event) {
    var args = event.args;
    $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
    });
    $("#jqxgrid").on('cellendedit', function (event) {
    var args = event.args;
    $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
    <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    margin-top: 30px;">
    <div id="cellbegineditevent">
    </div>
    <div style="margin-top: 10px;" id="cellendeditevent">
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    grid disable cell from edditing #25482

    emden
    Participant

    Thank you for your quick replay.

    I will look into it.

    Kind regards,

    Edwin

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

You must be logged in to reply to this topic.