CODEWITHSUNDEEP
javascriptjquerycsshtmlstruts2
user3214145
user3214145

Reputation: 3

Is it possible to change css color of struts2-jquery-grid-tags

how can i change css style for my struts2-jquery-grid-tags I can't even change my header layer font size. Can any one tell, how can i change my grid style, color and other formats as like normal html element.

Upvotes: 0

Views: 1288

Answers (2)

Thrash Bean
Thrash Bean

Reputation: 658

Use:

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
...
<sj:head jqueryui="true" 
         jquerytheme="customTheme" 
         customBasepath="relative/path/customThemesFolder"/>

and in your customThemesFolder create your themeroller custom theme (should be in customTheme). This should change your grid theme and you can change all the styles you want.

Hope this helps.

EDITED When you download you get something like this:

/jquery-ui-1.10.4.custom/css/THEME

and inside css, images etc. THEME is what you need. Be carefull - the css import in the page or what you have must follow the previous jqgrid style. The people say that if doesn't work, put this at the end of the page:

<script>
    $.subscribe('loadCustomCss', function(event,data){            
        $.struts2-jquery.requireCss(cssFile, basePath); 
    });
</script>

and in the grid tag (sj:head) add

onCompleteTopics="loadCustomCss"

If it's still not working try this script (not the previous):

<script>
    $.subscribe('loadCustomCss', function(event,data){
         $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', '../customThemeFolder/myTheme.css') );
    });
</script>

Take care of the relative path.

Upvotes: 2

Alireza Fattahi
Alireza Fattahi

Reputation: 45553

The css of the grid is dynamically loaded from struts-jquery-grid-plugin.jar.

template/themes/ui.jqgride.css.

Open this file and you will find the the css keys which you can over ride.

On the other hand if you want to NOT update and add your jqgride css, you can dynamically remove the css from grid.

Here is a code which removes some of the defaults

$.subscribe('grid_compelete', function(event, data) {

       //remove mouse over color change
       $($("#gridtable")[0].grid.hDiv).find(".ui-jqgrid-labels th.ui-th-column").unbind("mouseenter").unbind("mouseleave");        

       //Change header color
       $($("#gridtable")[0].grid.hDiv).find(".ui-jqgrid-labels th.ui-th-column").addClass("yourClassColor");

    //remove the 'ui-' from the css classes which automaticly created by grid tag
    //the gbox_gridtable is the most top element in the grid
    $('#gbox_gridtable').find('*').andSelf().attr('class',
            function(i, css){
                if (typeof css !== 'undefined') {
                        return css.replace(/\ui-\S+/g, '');
                    }
           });


        // remove default td title in jquery grid
        $("td").each(function() {
            var td = $(this);
            if (td.attr("role") == "gridcell") {
                td.removeAttr("title");
            };
        });
 });

In the jsp:

<sjg:grid id="gridtable" onGridCompleteTopics="grid_compelete"

Upvotes: 0

Related Questions