Using Bootstrap Images with Wijmo

  • 0 Comments

Wijmo includes several glyphs (images) defined as pure CSS, but if you're using Bootstrap, you might want to use their images instead. Adding a few CSS rules to your application will enable you to customize the glyphs used in Wijmo controls. The default Wijmo glyphs are used by the Wijmo controls and extensions, and your applications may also use them. Using CSS to define glyphs eliminates the need to deploy extra font or image files, and ensures the images are rendered using the foreground color and font size defined by the current theme. To use Wijmo glyphs in your applications, add a span element to your markup and set its class to the glyph name. For example: 

[/code]  
To see a complete list of the glyphs available, please see the Wijmo documentation.  

Using CSS to define the glyphs also provides flexibility. You can create CSS rules that override one or more glyphs, in one or more controls.  

For example, the **FlexGrid** control uses glyphs to show the collapsed/expanded state of group rows. The default glyphs are **wj-glyph-right** for collapsed nodes and **wj-glyph-down-right** for expanded nodes. This is what they look like:  

 Wijmo FlexGrid's default glyphs in collapsed and expanded nodes  

But maybe your application uses a different set of images, and you would like to customize the grid’s glyphs for consistency. For example, maybe you are using Bootstrap CSS and would like to use Bootstrap’s images instead of the grid’s own.  

You can achieve this by adding a couple of CSS rules to your application:  

[code]/* use Bootstrap icons in our outlines (CSS copied from Bootstrap.css) */  
.wj-flexgrid .wj-glyph-right {  
position: relative;  
display: inline-block;  
font-family: 'Glyphicons Halflings';  
font-style: normal;  
border: none;  
…  
}  
.wj-flexgrid .wj-glyph-right::before {  
content: "\\e159";  
}  

.wj-flexgrid .wj-glyph-down-right {  
position: relative;  
…  
}  
.wj-flexgrid .wj-glyph-down-right::before {  
content: "\\e160";  
}

The CSS code was copied from the Bootstrap CSS files. It uses a custom font that defines a number of useful images. In this example, we used the definitions for the glyphicon-collapse-down and glyphicon-collapse-up images. You can see the complete list in the Bootstrap CSS documentation. After adding this CSS to the application, the grid’s appearance changes as follows: Custom glyphs in Wijmo FlexGrid Using custom glyphs in FlexGrid You can see and modify this example in this fiddle: http://jsfiddle.net/Wijmo5/3sgh6hLc/.

MESCIUS inc.