Styling. Basic Principles

Generally, the desired appearance of a component is achieved by using css classes.

Styling the component view

To apply some style to the component view (to a component at whole) you should use the css parameter. As the value of the parameter you must specify the name of the appropriate css class:

<style>
	.my_style  {
		font-style: italic;
	}
</style>
 
<script>
	dhx.ui({
                view:"grid",
                css:"my_style",
                ...
        })
</script>

a grid without custom styling

a grid with custom styling

Related sample: 06_grid/04_styling.html

List (unitlist, grouplist, pagelist) and dataview specificity

For the list, pagelist, unitlist, grouplist, grid and dataview components you can use one more styling approach that consists in defining item presentation style through the type parameter of a component (see available configuration attributes of the parameter here).

Note, you have 2 variants here:

  • To define style directly in the type parameter;

    dhx.ui ({
            view:"list", 
    	type:{
                    height: 45,
    	        width: 300,
    	        padding: 15,
    		template:"<span style='color:#67B802; font-style:italic'>#name#</span></br><span style='color:#707070; font-weight:normal'>#author#</span>"				
    	}
            ...
    })
  • To use the dhx.Type class for style defining and then to set it as the value of the type parameter.

    dhx.Type(dhx.ui.list,{
    	name:"custom",
            template:"<span style='color:#67B802; font-style:italic'>#name#</span></br><span style='color:#707070' font-weight:normal>#author#</span>",
            height: 45,
    	width: 300,
    	padding: 15
    });
     
    dhx.ui ({
            view:"list", 
    	type: "custom",
            ...
    })

Through the template attribute you can specify the template for component content.

Related sample: 11_others/09_styling.html

Styling a specific part of a component. Css maps

If you want to define some style just for a specific part of a component, you should use the following technique:

  1. Find the appropriate css class on the css map of a component;
  2. Redefine the needed attributes of the class in the <style> block of your page ('untouched' attributes will take default values);

 
You don't need to use the css parameter in this case

<style>
	.dhx_grid_row_selected  {
		background:#9ABA72;
	}
</style>
 
<script>
	dhx.ui({
                view:"grid",
		fields:[{...}],
                datatype:"json",
                url:"data.json"
        })
</script>

Related sample: 11_others/09_styling.html

Multiple instances component

In this chapter we want to discuss the situation when you have multiple instances of the same component and want to use different styling for them.

Let's assume you have in your app 2 lists and want to change the default styling just for one of them, for example, to color the selected row in green. If you use the common technique stated above, the related css class will be applied to all lists, i.e. in 2 lists the selection will have green color. What should you do to apply a custom style just to one list?

Here is an answer:

  1. Set the css parameter for a list you want to style (thus separating out a specific instance from the others);
  2. In the <style> block of your page redefine the appropriate css class (choose it from the css map of a component) but use the compound name for it: the value of the css parameter + the class selector;
<style>
     .first .dhx_list__item_selected{
          background:#9ABA72;
     }
</style>
<script>
     dhx.ui({
          cols:[{ 
                 view:"list", 
	         id:"list1", 
                 css:"first",
                 ...
                },
                {
                 view:"list",
                 id:"list2",
                 ...
          }]
    });
</script>

Related sample: 11_others/09_styling.html

Special cases

As a special case we want to consider frequently occurred situation - restyling buttons.

Let's take the following example: you have 3 buttons and want to get them styled differently, for instance, like this:

The related code can look as follows:

<style>
	.dhx_el_roundbutton input{
	                background: -webkit-gradient(linear, left top, left bottom, from( #FDFDFD ),to( #DFDFDF ));
                        color: #6E6E6E;
                        ...
	}
	.bt_1 input{
			border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px;
			border:1px solid #134471;
                        ...
	}
	.bt_2 input{
			border-radius: 4px; -webkit-border-radius: 4px;-moz-border-radius: 4px;
			border: 1px solid #3D7113;
                        ...
	}
</style>
 
<body>
	<script type="text/javascript" charset="utf-8">
		dhx.ui({ 
			type:"clean", cols: [
				{ view:"button",id:"button1", inputWidth:100},
				{ view:"button",id:"button2", inputWidth:100, css:"bt_1"},
				{ view:"button",id:"button3", inputWidth:100, css:"bt_2"}]
		})
	</script>
</body>

Related sample: 02_form/10_styling_buttons.html