Custom sort option and Grid Sorting option disable for single comumn

[WaveTeamMember]

Hello JQ team,

I am using jqwidgets paid library for one of my project. I am facing issue with Grid column –
1. I need to add new column and having checkboxes and checkAll checkbox in first column, this checkbox column wont be sorting & filtering options.
2. Also when user click on checkall checkbox (placed at heading label of grid), all other checkboxes get checked – (need check/ uncheck option). How can I resolve this. Please let me know how can I disable grid sort and filter option for single column.

Thanks in advance.

Regards,
WaveUser.

[Peter StoevKeymaster]

– To disable the sorting and filtering of a column, set the column’s sortable and filterable properties to false.
– To handle clicks on a column header, use the Grid’s columnclick event.
– To handle selection with checkboxes, see this demo: customrowsselection.htm.
– There are no selectall, unselectall methods, but you can get the number of rows by using the Grid’s getrows method and its length property. Then you can use the Grid’s selectindex, unselectindex, methods for selection.
– To render custom content in a column header, you need to implement custom column’s renderer function i.e to set the column’s renderer property and to return HTML content in that function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Hey Peter,

Thanks for your reply. We have to disable sorting & filtering properly for single (first) column only. Currently when we mouse over to first column’s header-checkbox, filter and sort option show and sorting event get called. We dont want like this. We need to click on header checkbox and then call custom select all checkbox code. Please advice. Can you please give some visual code ex. for same.

Thanks,
WaveTeam.

[WaveTeamMember]

Please let me know if I can remove filter & sort option for single column and can click on first column’s header check box currently it did not allow me to click and checked the checkbox.

Regards,
WaveUser

[Peter StoevKeymaster]

– To disable the sorting and filtering of a column, set the column’s sortable and filterable properties to false.
– To handle clicks on a column header, use the Grid’s columnclick event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Hi Peter,

Thank you for your solution.

I have added custom checkboxes and done custom checkall / uncheckall functionality, but now facing issue – when I checked all checkboxes and scroll down grid vertical scroller it automatically unchecked the checkboxes and my calculated result missed up. Are there any way that check boxes remain checked even I scroll the scroller. Which event we called on scroller the scroll. Please advice.

Regards,
WaveUser.

[Peter StoevKeymaster]

In the sample I posted earlier, the check is done when a cell’s value is changed to true or false. True means checked, False means unchecked. The checkboxes are updated depending on the cell’s value i.e when you check all checkboxes, you will have to call the setcellvalue method for all cells in the column. Before making multiple calls of the setcellvalue method, call the Grid’s beginupdate method and when you finish, call the Grid’s endupdate method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Hi Peter,

Thanks for your reply.

I am facing one issue, when using scrolling and the checkbox controls, after scrolling checked checkbox’s are disappears/unchecked. In my case, I am calculating total amount when user click to checkall checkboxes or individual checkbox, so gird have 200+ records, when user going to check individual chekcbox total amounts (= Current, Previous, Variation and Variation %) get calculated then when he scroll grid – checked check boxes get unchecked automatically -it throw error in this case.

I have created custom checkboxes –

$summaryData[$i][‘checkAll’] = ” “;

here I am creating custom checkbox and passing values for each checkbox, used later for my calculation.

[WaveTeamMember]

Here is my code – removing tags
$summaryData[$i][‘checkAll’] = input type=’checkbox’ name=’numeroCompte[]’ value='”.$accSum[‘current’].”_”.$accSum[‘previous’].”_”.$accSum[‘variation’].”‘

[Peter StoevKeymaster]

If you use the default HTML checkboxes, then use the columns cellsrenderer function. You can read more about it here: jquery-grid-cellsrendering.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Can you possible to give me an example source code for above, I know it may be hard to you, but it would be great help to me if you send code example for same.. I have created my checkbox array in my php page and in my phtml page i have used jqwidget grid code. I am using custom html checkbox – then checkall/uncheckall functionality.

regards,
WaveTeam

[Peter StoevKeymaster]

The way I suggest you is implemented here: customrowsselection.htm. You need to use the Grid’s setcellvalue method to dynamically update the cell values.

Here’s the sample with Check All capability done on a button click:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Custom Rows Selection</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.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.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 = getTheme();
             // prepare the data
             var data = generatedata(200);
             var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
             var dataAdapter = new $.jqx.dataAdapter(source);
             // initialize jqxGrid. Disable the built-in selection.
             $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                columns: [
                  { text: '', datafield: 'available', columntype: 'checkbox', width: 40 },
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 90 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 90 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 200 },
                  { text: 'Quantity', editable: false, datafield: 'quantity' }
               ]
            });
             // select or unselect rows when the checkbox is checked or unchecked.
             $("#jqxgrid").bind('cellendedit', function (event) {
                 if (event.args.value) {
                     $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                 }
                 else {
                     $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
                 }
             });
             // check all
            $("#button").click(function()
            {
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                $("#jqxgrid").jqxGrid('beginupdate');
                for (var i = 0; i < rowscount; i++)
                {
                    $("#jqxgrid").jqxGrid('setcellvalue', i, 'available', true, false);
                }
                $("#jqxgrid").jqxGrid('endupdate');
            });
         });
        function generatedata(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>
        <input id="button" type="button" value="Check All" />
     </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Thanks peter,

Its working, Button click did not uncheck all checkboxes, it is default checked all when click on button, but vise varsa is not worked. how can I get all checkbox values in button click code which are checked, I need all checkbox values – to do total calculation.

Regards,
Waveteam.

[Peter StoevKeymaster]

The “Check All” button just checks all checkboxes in the first column. You can also combine the check with select by calling the Grid’s ‘selectrow’ method in the for-loop.

Here’s a code which unchecks all checkboxes.

                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                $("#jqxgrid").jqxGrid('beginupdate');
                for (var i = 0; i < rowscount; i++)
                {
                    $("#jqxgrid").jqxGrid('setcellvalue', i, 'available', false, false);
                }
                $("#jqxgrid").jqxGrid('endupdate');

To retrieve the value of the checked rows, you need to loop through the Grid records(similar to the for-loop implementation in the button’s click handler) and call the Grid’s getcellvalue method passing the current row index and the column’s datafield as parameter. When you call the ‘getcellvalue’ method for the first column, the result will be either true(for checked) or false(for unchecked).

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[WaveTeamMember]

Hi Peter,

Thank you. It seem, everything going good now, one more issue addressed in last message, I used ‘getcellvalue’ event and i got “true /false” vaule only, but I need actual value that I assigned during array creation. In my case I assigned checkbox value as –
$summaryData[$i][‘available’] = $accSum[‘currentId’];

I need this id should I get in code – so I do some calculation with that value.

Thanks again for your help.

[Author]

Posts