jQuery UI Widgets Forums Grid Disabling all rows in jqxgrid except the selected one

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 8 years, 10 months ago.

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

  • shivanidixit
    Member

    Peter

    I am trying to disable all rows in jqxgrid except the selected row.I am using checkboxes to select rows.Is there a way to do this.Appreciate your help on this in advance.


    Dimitar
    Participant

    Hello shivanidixit,

    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.8.3.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    // prepare the data
    var data = preparegriddata(200);
    var source =
    {
    localdata: data,
    datatype: "array",
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'available', type: 'bool' },
    { name: 'quantity', type: 'number' }
    ],
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    commit(true);
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var columnCheckBox = null;
    var updatingCheckState = false;
    // initialize jqxGrid. Disable the built-in selection.
    var celledit = function (row, datafield, columntype) {
    var checked = $('#jqxgrid').jqxGrid('getcellvalue', row, "available");
    if (checked == false) {
    return false;
    };
    };
    $("#jqxgrid").jqxGrid(
    {
    source: dataAdapter,
    editable: true,
    theme: theme,
    enablehover: false,
    selectionmode: 'none',
    columns: [
    { text: '', datafield: 'available', columntype: 'checkbox', width: 40,
    renderer: function () {
    return '<div style="margin-left: 10px; margin-top: 5px;"></div>';
    },
    rendered: function (element) {
    $(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
    columnCheckBox = $(element);
    $(element).on('change', function (event) {
    var checked = event.args.checked;
    if (checked == null || updatingCheckState) return;
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    $("#jqxgrid").jqxGrid('beginupdate');
    if (checked) {
    $("#jqxgrid").jqxGrid('selectallrows');
    }
    else if (checked == false) {
    $("#jqxgrid").jqxGrid('clearselection');
    }
    for (var i = 0; i < rowscount; i++) {
    $("#jqxgrid").jqxGrid('setcellvalue', i, 'available', event.args.checked);
    }
    $("#jqxgrid").jqxGrid('endupdate');
    });
    return true;
    }
    },
    { text: 'First Name', datafield: 'firstname', width: 90, cellbeginedit: celledit },
    { text: 'Last Name', datafield: 'lastname', width: 90, cellbeginedit: celledit },
    { text: 'Product', datafield: 'productname', width: 200, cellbeginedit: celledit },
    { text: 'Quantity', datafield: 'quantity', cellbeginedit: celledit }
    ]
    });
    $("#jqxgrid").on('cellbeginedit', function (event) {
    var column = args.datafield;
    var row = args.rowindex;
    var value = args.value;
    var rowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
    });
    // select or unselect rows when the checkbox is checked or unchecked.
    $("#jqxgrid").on('cellendedit', function (event) {
    if (event.args.value) {
    $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
    }
    else {
    $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
    }
    if (columnCheckBox) {
    var selectedRowsCount = $("#jqxgrid").jqxGrid('getselectedrowindexes').length;
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    updatingCheckState = true;
    if (selectedRowsCount == rowscount) {
    $(columnCheckBox).jqxCheckBox('check')
    }
    else if (selectedRowsCount > 0) {
    $(columnCheckBox).jqxCheckBox('indeterminate');
    }
    else {
    $(columnCheckBox).jqxCheckBox('uncheck');
    }
    updatingCheckState = false;
    }
    });
    });
    function preparegriddata(rowscount) {
    // prepare the data
    var data = new Array();
    var firstNames =
    [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames =
    [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames =
    [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    for (var i = 0; i < rowscount; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["available"] = false;
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["quantity"] = quantity;
    data[i] = row;
    }
    return data;
    }
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Sravanthi
    Participant

    Hi Dimitar,

    I am trying to build a jqxGrid with checkbox as a columntype and looking for singlerow selection.
    I want a row to be selected if the user clicks on checkbox or even the row. But he cannot make multiplerows selection with checkboxes. So I need your help on that, the sample you replied is working same as ‘Checkbox selection mode’.

    All I want is ‘singlerow selection’ and only a checkbox in column to be selected with row.

    Please respond. Thanks in advance.


    Dimitar
    Participant

    Hi phoebe,

    Please try the following solution. We hope it is helpful to you:

    <!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.11.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/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/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = [{ select: false, firstname: 'Paul', lastname: 'Kenner' }, { select: false, firstname: 'Max', lastname: 'Jackson' }, { select: false, firstname: 'Laura', lastname: 'Daniels'}];
    
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'select', type: 'bool' },
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' }
                    ],
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 290,
                    autoheight: true,
                    source: dataAdapter,
                    selectionmode: 'singlerow',
                    editable: true,
                    columns: [
                      { text: 'Select', datafield: 'select', threestatecheckbox: false, columntype: 'checkbox', width: 70 },
                      { text: 'First Name', editable: false, datafield: 'firstname', width: 120 },
                      { text: 'Last Name', editable: false, datafield: 'lastname' }
                    ]
                });
    
                $("#jqxgrid").on('cellendedit', function (event) {
                    // event arguments.
                    var args = event.args;
                    // column data field.
                    var dataField = args.datafield;
                    // row's bound index.
                    var rowBoundIndex = args.rowindex;
                    // cell value
                    var value = args.value;
    
                    if (dataField === 'select') {
                        if (value === true) {
                            $('#jqxgrid').jqxGrid('selectrow', rowBoundIndex);
                        } else {
                            $('#jqxgrid').jqxGrid('unselectrow', rowBoundIndex);
                        }
                    }
                });
    
                $('#jqxgrid').on('rowselect', function (event) {
                    var args = event.args;
                    var rowBoundIndex = args.rowindex;
                    var rowData = args.row;
    
                    if (rowData.select === false) {
                        $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "select", true);
                    }
                });
    
                $('#jqxgrid').on('rowunselect', function (event) {
                    var args = event.args;
                    var rowBoundIndex = args.rowindex;
    
                    if (rowBoundIndex !== -1) {
                        var rowData = $('#jqxgrid').jqxGrid('getrowdata', rowBoundIndex);
                        if (rowData && rowData.select === true) {
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "select", false);
                        }
                    }
                });
            });
        </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/

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

You must be logged in to reply to this topic.