Selection mode 'checkbox' and 'singlerow' style hightlighting

[argopmParticipant]

Hi Friends,
We are just trying to shift our old dashboard to jqxwidgets and so far it is good. I want to implement below in grid:
1) Selection mode of type ‘checkbox’ where user can select deselect rows but i don’t want any highlighting style when
row is selected. For example when all rows are selected in grid, it becomes blue (with theme arctic) but i don’t want it.
2) With point #1 what i want is when user click on any row that should be highlighted like singlerow selection mode (previous one should be dehighlighted). I was able to do using ‘rowclick/cellclick’ event and by adding new custom class to row div but when window is resized or data is reloaded custom style goes away (same happens when sort is being used)
3) As with selection mode ‘checkbox’, i want to have specific colour background for each checkbox cell. Currently i am doing with below code but it has same issues that when window is resized or scroll is used it goes away. Below is sample code. Any other better way to do it so that colour background is also preserved.

 $("#jqxgrid").on('bindingcomplete',function(event){
            		var i = 0;
                      $(".jqx-checkbox").each(function(){
                      	var val = $('#jqxgrid').jqxGrid('getRowData', i);
                      	if(loadingFirstTime){
                      	clickedid		= val.id;
                      	visibleRecord 		= val;
                      	loadingFirstTime  	= false;
                      	}
                      	 $('#'+this.id).parent().css('background',"rgb("+ColorCodesManager.getRGBColorCodesForID(val.id,val.ch)+")");
						 i++;
					});
					if(!shouldPlotAll){
						shouldPlotAll = true;
            			$('#jqxgrid').jqxGrid('selectallrows');
            		}
            });

In general i am trying to have MAC OS X like Table.

Regards,
MP.

[DimitarParticipant]

Hello argopm,

1) and 2) I think it may be best if you just modify the class applied to a selected row – jqx-grid-cell-selected (and jqx-grid-cell-selected-theme).

3) The grid is often re-rendered and that is why your changes do not persist. Unfortunately, we cannot offer you any workaround on the matter.

Best Regards,
Dimitar

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

[argopmParticipant]

Hi Dimitar,

Thanks for the reply and workaround for #1 and #2. I did exactly what you mentioned by overriding jqx-grid-cell-selected and to get the single row selected i am using cellclassname property of column object. Well strange thing is i could not find documentation about this property anywhere on website (i found it in your example). I am using function for this property and returning the class name as needed and it has also fixed the issue when row highlight style was loosing when grid is re-rendered on scroll.

For #3, as you mentioned that grid is re-rendered many times so is there any method that i can bind or is being invoked when gird rendering is finished so that i can re apply my logic of background colour?

Also am i doing it correctly by using bindingcomplete event to apply the changes on grid (i am assuming that this is only fired when data from server is loaded into the grid)? Because sometime i noticed error like ‘call this method when binding completed….’ something like that.

Regards,
MP.

[DimitarParticipant]

Hi MP,

1) You can find cellclassname in the API Documentation, under columns.

2) Unfortunately, there is no event fired every time the grid is re-rendered.

3) bindingcomplete is fine, you can also do your modifications in the ready callback function.

Best Regards,
Dimitar

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

[argopmParticipant]

Hi Dimitar,

Thanks for the reply, it’s very unfortunate that i could not get any event when grid is re-rendered. So any other work around for me to apply cellclassname for checkbox column?

Regards,
MP.

[DimitarParticipant]

Hi MP,

Unfortunately, we cannot offer you any solution on the matter.

Best Regards,
Dimitar

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

[argopmParticipant]

Hi Dimitar,
Ok, then can i add custom control on grid header, like if i want to create custom select all/deselect all. But i think this way i will have to manually add logic to select/deselect row or enable checkbox selection.

Can you suggest any idea to me?

Regards,
MP.

[DimitarParticipant]

Hello MP,

Please check out the following example, which was included in the jQWidgets download package before selectionmode: 'checkbox' was implemented:

<!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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.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.sort.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 = "";

            // 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.
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                pageable: true,
                sortable: true,
                autoheight: true,
                columns: [
                  {
                      text: '', menu: false, sortable: false,
                      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;
                              var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation');
                              var pagenum = pageinfo.pagenum;
                              var pagesize = pageinfo.pagesize;
                              if (checked == null || updatingCheckState) return;
                              $("#jqxgrid").jqxGrid('beginupdate');

                              // select all rows when the column's checkbox is checked.
                              if (checked) {
                                  $("#jqxgrid").jqxGrid('selectallrows');
                              }
                              // unselect all rows when the column's checkbox is checked.
                              else if (checked == false) {
                                  $("#jqxgrid").jqxGrid('clearselection');
                              }

                              // update cells values.
                              var startrow = pagenum * pagesize;
                              for (var i = startrow; i < startrow + pagesize; i++) {
                                  // The bound index represents the row's unique index. 
                                  // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
                                  // The code below gets the bound index of the displayed row and updates the value of the row's available column.
                                  var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                                  $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
                              }

                              $("#jqxgrid").jqxGrid('endupdate');
                          });
                          return true;
                      }
                  },
                  { 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' }
               ]
            });

            var updatePageState = function (pagenum) {
                var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                var pagenum = datainfo.paginginformation.pagenum;
                var pagesize = datainfo.paginginformation.pagesize;
                var startrow = pagenum * pagesize;
                // select the rows on the page.
                $("#jqxgrid").jqxGrid('beginupdate');
                var checkedItemsCount = 0;
                for (var i = startrow; i < startrow + pagesize; i++) {
                    var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                    var value = $("#jqxgrid").jqxGrid('getcellvalue', boundindex, 'available');
                    if (value) checkedItemsCount++;
                    if (value) {
                        $("#jqxgrid").jqxGrid('selectrow', boundindex);
                    }
                    else {
                        $("#jqxgrid").jqxGrid('unselectrow', boundindex);
                    }
                }

                $("#jqxgrid").jqxGrid('endupdate');
                if (checkedItemsCount == pagesize) {
                    columnCheckBox.jqxCheckBox({ checked: true });
                }
                else if (checkedItemsCount == 0) {
                    columnCheckBox.jqxCheckBox({ checked: false });
                }
                else {
                    columnCheckBox.jqxCheckBox({ checked: null });
                }
            }

            // update the selection after sort.
            $("#jqxgrid").on('sort', function (event) {
                updatePageState();
            });

            // update the selection after page change.
            $("#jqxgrid").on('pagechanged', function (event) {
                updatePageState();
            });

            // select or unselect rows when a checkbox is checked or unchecked. 
            $("#jqxgrid").on('cellvaluechanged', function (event) {
                if (event.args.value) {
                    $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                }
                else {
                    $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
                }

                // update the state of the column's checkbox. When all checkboxes on the displayed page are checked, we need to check column's checkbox. We uncheck it,
                // when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.  
                if (columnCheckBox) {
                    var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                    var pagesize = datainfo.paginginformation.pagesize;
                    var pagenum = datainfo.paginginformation.pagenum;
                    var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes');
                    var state = false;
                    var count = 0;
                    $.each(selectedRows, function () {
                        if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
                            count++;
                        }
                    });

                    if (count != 0) state = null;
                    if (count == pagesize) state = true;
                    if (count == 0) state = false;

                    updatingCheckState = true;
                    $(columnCheckBox).jqxCheckBox({ checked: state });

                    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/

[argopmParticipant]

Hello Dimitar,

Thanks this is working as expected. Thought i was also able to get the my original solution working with below approach (just mentioning if someone else might need it). My issue was checkbox cells were background color when page is resized so i captured the global window resize event and just re-added the background to the cells.

I will test this solution for couple of days and in case of having issues i will switch to your code.

Thanks so much, you are really helpful. Ohh just another thing; have you seen grid to loose the sorting when grid is reloaded. In my case my grid is reloaded in each 60 second but after reload last sorted column is no more sorted (even none of the column is sorted). Below is my reload code:

$("#jqxgrid").jqxGrid({ source: getDataAdapter() });

Regards,
MP.

[argopmParticipant]

OK, just got solution of loosing sorting by using below code from a old forum thread

$("#jqxgrid").jqxGrid('databind', getDataAdapter() , 'sort');

But would it also preserve any filter applied?

Regards,
MP.

[DimitarParticipant]

Hi MP,

The method databind is deprecated. Use updatebounddata instead. Here is an excerpt from the API Documentation about it:

Updates the bound data and refreshes the grid. You can pass ‘filter’ or ‘sort’ as parameter, if the update reason is change in ‘filtering’ or ‘sorting’. To update only the data without the columns, use the ‘data’ parameter. To make a quick update of the cells, pass “cells” as parameter. Passing “cells” will refresh only the cells values when the new rows count is equal to the previous rows count. To make a full update, do not pass any parameter.

Best Regards,
Dimitar

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

[argopmParticipant]

Hello Dimitar,
Thanks for letting me know and i have used updatebounddata method instead of databind and it’s working. A few things:
1) Is it possible to specify case insensitive sorting? I know we can define custom sort function but just thinking if there’s any direct way?
2) Is it also possible to specify sort field? For example i have a filed called ‘quantity’ but want to sort it using ‘quantity_int’ field as my ‘quantity’ field have KG as suffix with it.?
3) Where can i get the $.jqx.cookie documentations? I am thinking to save grid state in cookies and then reload on page refresh? Right now it doesn’t seems to store complete object.
4) Is there any place where i can override the tooltip value for cells?

Thanks so much for you help.
Regards,
MP.

[DimitarParticipant]

Hi MP,

1) This can be achieved only through custom sorting.

2) You can specify a sortfield as the first parameter of the sortby method.

3) No documentation is available for $.jqx.cookie. Note, however, that the grid’s save state functionality stores the complete object.

4) Please check out the example in the forum topic Grid tooltip.

Best Regards,
Dimitar

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

[argopmParticipant]

Hi Dimitar,
Yes for

For #1 custom sorting can be done but was not able to implement that successfully. It was not working (sort of working ) but gird was not showing up/down arrow in column header. Not sure why.
For #2: I ment by sortfield at column level not via api. What i wanted is to use inbuild jqxgrid sorting but can specify like sortfield like below:

{text:’S/N’,datafield:’stn’,width:”3%”,cellclassname: cellclass,sortable:true,sortfield:”sname”, sorttype:’case_insensitive’}

Sorry but next question: Do we have any in build property of grid that can indicate whether select all checkbox is clicked or in intermediate state?

Regards,
MP.

[DimitarParticipant]

Hi MP,

1) The sorting in the Custom Sorting demo is case-insensitive. The arrow is correctly shown, too.

2) As I understand it you want to click the header of a given column, but sort by another one. To achieve this, in your custom sorting function call the sortby method for the other column. There are no properties such as sortfield and sorttype.

3) Here is an example, based on the demo CheckBox Selection:

<!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/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/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            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);

            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                sortable: true,
                filterable: 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' },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
               ]
            });
            $("#getCheckedState").click(function () {
                var value = $(".jqx-grid-column-header .jqx-checkbox-default").parent().jqxCheckBox("val");
                alert(value);
            });
        });
    </script>
</head>
<body class='default'>
    <button id="getCheckedState">
        Get checked state</button>
    <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/

[Author]

Posts