DataGrid - Themes Example

Grid theme can be set either from defined themes or custom themes.

To set a defined theme, you can use the following syntax to change theme. All defined themes listed on the top of the page.

<script language="javascript">
    grid.ChangeTheme('forest')
</script>
        

Custom theme can be defined as below.
First you should find a name for your theme. Lets say "sky". You need to modify the following css with your color scheme and css attributes then include it into your page.

    /**************** Sky Theme **************/
    .soby_grid.sky.active{border:solid 1px blue } 
    .soby_grid.sky .soby_griddatarow.alt {  } 
    .soby_grid.sky .soby_griddatarow.selected { background-color: #4666a6; color:white;}
    .soby_grid.sky tbody { border: 1px solid #2d4d7c; }
    .soby_grid.sky .soby_gridcell, .soby_grid.sky .soby_selectitemcell {    overflow: hidden;    border-bottom: 1px solid #2d4d7c;    border-right: 1px solid #2d4d7c;    border-top-width: 0;    border-left-width: 0;    padding: 3px 6px;}
    .soby_grid.sky .soby_gridcell.selected { background-color: #89abd9; color:white;} 
    .soby_grid.sky .soby_tabletitle { color:#89abd9; } 
    .soby_grid.sky .soby_tabheader { background-color:#89abd9;border:1px solid #aaaaaa; } 
    .soby_grid.sky .soby_tabheader.active {background-color:white;} 
    .soby_grid.sky .soby_gridheadercell:hover, .soby_grid.sky .soby_gridheadercell:hover a { background-color:#ba7284; }
    .soby_grid.sky .soby_tabcontent {border:1px solid #aaaaaa;} 
    .soby_grid.sky .soby-itmHoverEnabled:hover { background-color:#fcb796;}
    .soby_grid.sky .soby_griddatarow.selected .soby-itmHoverEnabled:hover { background-color:#2d4d7c; }
    .soby_grid.sky .soby_griddatarow.selected .soby_selectitemcell, .soby_grid.sky .soby_gridheadercell { background-color:#fcb796;}
    .soby_grid.sky .soby_gridheaderlink { color:white;}
    .sobygridmenu.sky{position:absolute;display:none;background-color: white;border: 1px solid;padding:10px;}
    .sobyitemdialog.sky { position:absolute;display:none;background-color: white;border: 1px solid;padding:10px;}
    /*********************************************/
        

Now use the following code to set your grid theme

<script language="javascript">
    grid.ChangeTheme('sky')
</script>
        

Want to learn more about the grid component? Check out the API documentation.