jQuery UI Widgets Forums Grid Change background in checkbox selectionmde and keep that color for each selected

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

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

  • Mike McAllen
    Participant

    Hi there,

    I am trying to change the background of rows that are selected from a grid with selectionmode = checkbox.

    I use the jsfiddle example that jqwidgets provide here: https://jsfiddle.net/jqwidgets/XSKXc/

    I modify it a little bit, to try to make what I want. My code is the follow:

    JS:

     var data = generatedata(500);
     var source = {
         localdata: data,
         datafields: [{
             name: 'firstname',
             type: 'string'
         }, {
             name: 'lastname',
             type: 'string'
         }, {
             name: 'productname',
             type: 'string'
         }, {
             name: 'date',
             type: 'date'
         }, {
             name: 'quantity',
             type: 'number'
         }, {
             name: 'price',
             type: 'number'
         }],
         datatype: "array"
     };
    
     var adapter = new $.jqx.dataAdapter(source);
     $("#jqxgrid").jqxGrid({
         width: 500,
         theme: 'energyblue',
         source: adapter,
         sortable: true,
         selectionmode: 'checkbox',
         columns: [{
             text: 'First Name',
             datafield: 'firstname',
             columngroup: 'Name',
             width: 90
         }, {
             text: 'Last Name',
             columngroup: 'Name',
             datafield: 'lastname',
             width: 90
         }, {
             text: 'Product',
             datafield: 'productname',
             width: 170
         }, {
             text: 'Order Date',
             datafield: 'date',
             width: 160,
             cellsformat: 'dd-MMMM-yyyy'
         }, {
             text: 'Quantity',
             datafield: 'quantity',
             width: 80,
             cellsalign: 'right'
         }, {
             text: 'Unit Price',
             datafield: 'price',
             cellsalign: 'right',
             cellsformat: 'c2'
         }]
     });
    
     $("#jqxbutton").jqxButton({
         theme: 'energyblue',
         width: 320,
         height: 30
     });
     $('#jqxgrid').on('rowselect', function (event) {
         $('#jqxgrid').jqxGrid('setcolumnproperty', 'firstname', 'cellclassname', function (row, columnfield, value) {
         
    				if (event.args.rowindex == row) {
    					return 'red';
            }
    		});
     });

    CSS:

    .red {
                background-color: red !important;
            }

    But the new background color keeps only in the last column selected.

    Is tehre a way to change the color not only to one cell if not to the complete row?
    And is tehre a way to keep that background color to all the rows selected?

    Thank you very much for your help.


    Martin
    Participant

    Hello Mike McAllen,

    Yes, it is possible. You can use the getselectedrowindexes method of the grid inside the cellsclassname callback of the column in order to determine which cells to color. Also, in this way you can set it once when initializing the grid instead of updating it on each rowselect.

    Please, check the following Example.

    Best Regards,
    Martin Yotov

    jQWidgets Team
    https://www.jqwidgets.com/


    Mike McAllen
    Participant

    Hello Martin,

    Wow, yes, that’s what I was looking for!

    Thank you very much.

    Best Regards,

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

You must be logged in to reply to this topic.