Change the Column color in Flexigrid using JQuery

Question

I am using FlexiGrid and want to change a column color based on a a variable value.

Please can you tell me how can I achieve it? Is there any attribute that I can use in colModel?

I tried this , but it doesn't work, it complains that it cannot support changeColumn

$('#Flexigrid1').changeColumn('FirstName');
var result = false;

        (function($) {

            function changeColumn(columnName) {
                if (!result) {
                    $('table tr').each(function() {
                        $(this).find('td').eq(column).css('background-color', 'red');
                    });
                }
            }
        })(jQuery);

Answer 1

You need to extend the jQuery library with your function first of all. For example:

jQuery.fn.extend({
  changeColumn: function(columnName) {

However, there are still some other problems with your code. For example it appears you are not specifying the variable result inside that namespace, and your selector $('table tr') is looking at all table rows in the entire DOM.

I wouldn't recommend doing this in your final attempt, but to teach you a little about jQuery extending I've written the example code below:

// Create the changeColumnColor function
jQuery.fn.extend({

    changeColumnColor: function (color) {
        $(this).css('background-color', color);
    }
});


$(document).ready(function () {

    // Make the table a flexigrid
    $('#testTable').flexigrid();

    // Call your custom function
    $('#testTable td.firstName').changeColumnColor('red');
});

JSFiddle: http://jsfiddle.net/markwylde/Jk6ew/

I would, however still, recommend that you either look into extending the actual flexigrid plugin itself, using any existing functionality, or using a much simpler one-liner solution as such:

$('#testTable td.firstName').css('background-color', 'red');

Alternatively if you can not give your table classes and do not know the content of the column:

$('#testTable td:first-child').changeColumnColor('red');

$('#testTable td:nth-child(3)').changeColumnColor('red');

Another option would be to change your CSS if the colour will be static.

In addition to your comment below you could do the following, which would keep inline with flexigrid current standards/naming conventions.

(function($) {
    $.fn.flexChangeColumnColor = function (tableHeader) {
        // Get the column index we're changing
        idx = ($(this).parents(".flexigrid:eq(0)").find("th").filter( function() {
               return $(this).text() === tableHeader;
           }).index());

        // Make the changes
        $('td:nth-child(' + (idx+1) + ')', this).css('background-color', 'red');
    }
})(jQuery);


$(document).ready(function () {

    $('#testTable').flexigrid();

    $('#testTable').flexChangeColumnColor('Test Col 3');

});

HTML changes slightly to demonstrate so please see updated: JSFiddle: http://jsfiddle.net/markwylde/Jk6ew/1/