Modify background at runtime

[O.Germeau]

I create runtime PanelListItem at runtime. All work well. I use Intraweb 14.0.17, CGPanelList 1.7.0.2878 on XE4.
But how can change PanelListItem background color, font size and font color at runtime ?

[Jorge Sousa]

Hi O. Germeau

I presume that, with Runtime, you also mean in an ajax / async event.

(Btw, this is controller by the property Ajax: Boolean in the events classes, like Button.JQButtonsOptions.OnClick.Ajax. Default value True.)

PanelList is not a jq plugin and for now doesn't support ajax javascript generation when those properties change.

But you can always do a partial update, ie, an update of the panellist html, doing PanelList.AjaxReRender;

Or set Ajax=False in the event you need to update, causing a full submit, but this is much slower and we dont' recommend, in fact, the only time we need to make a full submit is to display an whole IW form.

Best Regards

cgdevtools

[O.Germeau]

Yes i use ajax but i don't know how change background color of a item.
I can change only the backgroud color of the panellist.
At runtime, the user choose a color for one item or all items.

[Jorge Sousa]

Hi again

You must use Item.ItemCss property to define css class(es), from a preloaded stylesheet.

Create File mycss.css, load it using ServerController.Stylesheet or IWForm.Stylesheet

css code

.mycssclass {
  background: red;
}

and then assign Item:= 'panellist-nav-item-li mycssclass';

But we have agreed to add the property Item.Style for next releases.

Best Regards

[O.Germeau]

Thanks All work well

[O.Germeau]

I have another question but for customize the border(s).
I have created my own style for list-nav-item-li. With this method, i can change and/or remove item border.
is it the best solution for this ?
For the item border, my method work. But how remove the border around all items ? I don't know how process.

[Alexander Bulei]

Hi O.Germeau,

I have another question but for customize the border(s).
I have created my own style for list-nav-item-li. With this method, i can change and/or remove item border.
is it the best solution for this ?
For the item border, my method work. But how remove the border around all items ? I don't know how process.

Add additional css to ul element:

delphi code

IWCGPanelList.UlCss:= 'ui-widget ui-widget-content my-ul-css';

Note: "ui-widget ui-widget-content" - default value of UlCss property.

css code

.my-ul-css{
  border: 0 !important;
}

Best Regards.

[O.Germeau]

I have tested but it's don't work. I use also the theme switch.
For sample, i want to remove all borders for obtain flat display.
Can you explain more the css ?

[Alexander Bulei]

Hi O.Germeau,

I have tested but it's don't work. I use also the theme switch.
For sample, i want to remove all borders for obtain flat display.
Can you explain more the css ?

Demo attached (as I explain in the previous post)

And also, css class to remove borders from items.

Best Regards.

[O.Germeau]

Thanks, I understand my error
All work well now.