Generally, the desired appearance of a component is achieved by using css classes.
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
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:
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>" } ... })
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
If you want to define some style just for a specific part of a component, you should use the following technique:
<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
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:
<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
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