jQuery UI Widgets Forums Grid Selection mode 'checkbox' and 'singlerow' style hightlighting

This topic contains 15 replies, has 2 voices, and was last updated by  argopm 10 years, 2 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author

  • argopm
    Participant

    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.

    • This topic was modified 10 years, 2 months ago by  argopm.
    • This topic was modified 10 years, 2 months ago by  argopm.

    Dimitar
    Participant

    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/


    argopm
    Participant

    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.

    • This reply was modified 10 years, 2 months ago by  argopm.

    Dimitar
    Participant

    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/


    argopm
    Participant

    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.


    Dimitar
    Participant

    Hi MP,

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

    Best Regards,
    Dimitar

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


    argopm
    Participant

    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.


    Dimitar
    Participant

    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/


    argopm
    Participant

    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.

    • This reply was modified 10 years, 2 months ago by  argopm.

    argopm
    Participant

    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.


    Dimitar
    Participant

    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/


    argopm
    Participant

    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.

    • This reply was modified 10 years, 2 months ago by  argopm.

    Dimitar
    Participant

    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/


    argopm
    Participant

    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.

    • This reply was modified 10 years, 2 months ago by  argopm.
    • This reply was modified 10 years, 2 months ago by  argopm.

    Dimitar
    Participant

    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/

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.