jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Unselect currently clicked row

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 10 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Unselect currently clicked row Posts
  • November 13, 2014 at 2:37 am Unselect currently clicked row #62633

    kimhonoridez
    Participant

    So, I am just curious if it is possible to unselect currently clicked row in jQWidgets Grid.

    I have tried the following code but seems like it’s not working :

    $(“#jqxGrid”).on(“rowclick”, function (event) {

    var selectedRowIdx = event.args.rowindex;

    // this part doesn’t work
    $(“#jqxGrid”).jqxGrid(‘unselectrow’, selectedRowIdx);

    // this part doesn’t work as well
    $(“#jqxGrid”).jqxGrid(‘clearselection’);
    $(“#jqxGrid”).jqxGrid(‘selectrow’, 0);

    });

    Here’s how I initialized the grid :

    var columns = { .. some init values here };
    $(‘#jqxGrid’).jqxGrid({
    autoheight: true
    , width: ‘100%’
    , pageable: true
    , altrows: true
    , source: {}
    , columnsresize: false
    , columnsheight: 25
    , autoheight: true
    , autorowheight: true
    , sortable: true
    , editable: true
    , altrows: true
    , selectionmode: ‘singlerow’
    , pagermode: “simple”
    , columns: columns
    , ready : function() {
    columnSelection.initialize(‘#jqxGrid’,0,”10″,columns);
    }
    , cellhover: function (element, pageX, pageY){
    // hover churvabels here
    }
    });

    November 14, 2014 at 11:45 am Unselect currently clicked row #62763

    Nadezhda
    Participant

    Hello kimhonoridez,

    Here is an example which shows how to unselect currently clicked row.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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/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/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.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/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 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);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                pageable: true,
                source: dataAdapter,
                columnsresize: false,
                columnsheight: 25,
                autoheight: true,
                autorowheight: true,
                sortable: true,
                editable: false,
                altrows: true,
                selectionmode: 'singlerow',
                pagermode: "simple",
                ready: function () {
                    $('#jqxgrid').jqxGrid('selectrow', 1);
                },
                columns: [
                { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                { text: 'Product', columntype: 'combobox', 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' },
                { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput' },
                { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput' }
                ]
            });
            $('#jqxgrid').on('rowselect', function (event) {              
                var args = event.args;                
                var rowBoundIndex = args.rowindex;               
                var rowData = args.row;
                setTimeout(function () { $('#jqxgrid').jqxGrid('unselectrow', rowBoundIndex); }, 100);
            });
        });
    </script>
</head>
<body>
    <div id="jqxgrid"></div>
</body>
</html>

    Best Regards,
    Nadezhda

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.