I would like to conditionally change the style of a row in the PrimeNG TreeTable.
I have tried various options such as:[rowStyleClass]="rowStyle()"
But I get this error:
Can't bind to 'rowStyleClass' since it isn't a known property of 'p-treeTable'
Any ideas on how to change the row style conditionally?
This feature is currently not supported by PrimeNG. But a feature request has been submitted: https://github.com/primefaces/primeng/issues/2441.
Related
I have customised a default ComboBox Style by using DataGrid in the popup (dropdown) as described here.
When I use the customised style in a ComboBox or in a DatagridComboBoxColumn, it works fine.
Similary when I use the style in the DataGridTemplateColumn.CellEditingTemplate, it works fine.
However, it does not work when used in a DataGridTemplateColumn.CellTemplate. The selection does not work at all. It is as if the selection changed event does not fire.
I tried setting the IsSynchronizedWithCurrentItem="False" in the ComboBox, still it does not work.
Funny enough when I use the default ComboBox style in DataGridTemplateColumn.CellTemplate, it works. It appears the problem is when Datagrid is used as an ItemsHost.
The reason why I want to use it in a DataGridTemplateColumn.CellTemplate is because I want to change the look of my application by not using the standard DataGridComboBoxColumn where the editing part is hidden and one has to dig deeper to exopause the comboxbox. I want the user to click once to select items from the combobox.
Similarly the DataGridTemplateColumn is wired in such a way that the CellEditingTemplate is underneath the CellTemplate (which is similar to the default DatagridComboxBox). What I want instead is to use the DataGridTemplateColumn.CellTemplate for both viewing and selecting (editing).
At the same time I don't want to use the default ComboBox Style by replacing the ItemsHost with a Datagrid. But the customised style does not work in a DataGridTemplateColumn.CellTemplate. It only works in DataGridTemplateColumn.CellEditingTemplate
Any dies?
I resolved it by inserting these two lines in the Datagrid
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem}"
IsSynchronizedWithCurrentItem="False"
I am working on an Android application that requires the use of a Graph, for this purpose I am using AndroidPlot's XYSeries. I am trying to style the graph, everything is fine but the first value of the domain. As you can see in the screen shot below, the style does not apply for all the values
This is how I style the values
plot.getGraphWidget().getDomainLabelPaint().setTextSize(22);
plot.getGraphWidget().getRangeLabelPaint().setTextSize(22);
plot.getGraphWidget().getRangeLabelPaint()
.setColor(Color.BLACK);
Could you please tell me what's wrong and how to apply the style for all the values?
I just solved this problem, the first value is called DomainOriginLabelPaint not DomainLabelPaint, in order to style it we need to add
plot.getGraphWidget().getDomainOriginLabelPaint().setTextSize(22);
I've spent days trying to figure this out and I give up.
I am a LotusScript programmer and have been trying to learn XPages. All of the examples and sample programs I've studied only touch on pieces of this.
Can someone explain to me step by step how to use the Selected property of the Extension Library Navigator control?
I have created my own custom control based on the layout control from the Extension Library and created a custom property called navigationPath. I also created a navigator custom control that has 5 Page Link Nodes. In the "Selected" property of each Page Link Node, I put the following SSJS:
if(compositeData.navigationPath == "/Home/ApplicationPool"){
return true
}else{
return false
}
/Home/ApplicationPool corresponds to the value I put in the "Selection" property of the particular Page Link Node.
In each layout custom control, I set the "navigationPath" property to compositeData.navigationPath.
What did I miss?
there is a selected and selection property and they mean very different things and can't be used at the same time. In the code example in your question above you are using the selected property which is the wrong one in this case.
Your treeNodes in the navigator should be setup to use the selection property, this is a RegEx value that is used to see if it matches the value passed into the application layout via the custom property.
<xe:navigator id="navigator1" expandable="true" expandEffect="wipe">
<xe:this.treeNodes>
<xe:pageTreeNode label="nodeName" page="/page.xsp" selection="/Home/ApplicationPool" />
</xe:this.treeNodes>
</xe:navigator>
As you can see you don't need to use any SSJS to evaluate a true/false outcome. Just match the value in the treeNode to the one in the XPage's applicationLayout control.
If your using tabs in the layout titleBar then you can set a selection property there also that uses the format /Home/.* which will make that tab highlighted for every XPage that have /Home/ at the start of it's navigationpath custom property. Don;t forget it is RegEx so any valid RegEx statement can be used here adding more power to this particular property.
For the tree nodes in the navigator control you define the name of the xpage to open and then the related selection. Example:
<xe:pageTreeNode page="/text.xsp" selection="/Home/Test" label="Test page">
</xe:pageTreeNode>
For the individual xpages using the applicationLayout you define a value for navigationPath. If this value matches an entry in one of the tree nodes the naviagor control, then the corresponding menu item will be highlighted in the browser. The best way to define the value of the navigationPath is by using a custom property (as you are using). Here's an example of that:
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication navigationPath="${javascript:compositeData.navigationPath}" ...
You can see examples of using all this in the Extension Library Teamroom and Discussion templates.
Based on my explanation on how to use it, I can see that you are not using the selection property on the navigation control correct. You just need to define a unique value for each tree node (which then will be used if it matches navigationPath on the individual xpages).
So for your specific example change your selection property to just return: "/Home/ApplicationPool"
I want to change grid row color when I click a row in Wicket.
Do you have any suggestion?
Without actually seeing your code it's difficult to tell what is the more suitable way of doing this for you.
If you want to change to a specific color known at page generation time, do it client-side (javascript).
Make sure the grid row has a wicket:id so that Wicket can have control over it. Add it as a WebMarkupContainer if you haven't got it. Add a SimpleAttributeModifier for the onclick attribute that will change the css class of the element. For instance:
rowMarkupContainer = new WebMarkupContainer("row");
String javascript = "this.setAttribute('class', 'myClass');";
rowMarkupContainer.add(new SimpleAttributeModifier("onclick", javascript);
Where myClass is a CSS class that uses a new color.
Alternatively, you can always hardcode the onclick event handler in the HTML without specifying a wicket:id.
I am looking forward to customize the look of tabView component. I need to change the color of tab headers(& if possible, 2 different colors for 2 different headers). I tried to do so by specifying the CSS rules through styleClass attribute for tabView but failed to see desired results.
How I can achieve this ?
3.0.M2 has titleStyle and titleStyleClass attributes for tab component.
http://code.google.com/p/primefaces/issues/detail?id=892
Primefaces components get the look&feel from a css theme. You can either:
Build your own theme with the desired colors with Themeroller,
Change the style classes for your theme manually. Style classes for each Primefaces component are listed in the Primefaces documentation. Since the doc is not free for most recent Primefaces version 2.2 I can only help your with the classes from Primefaces 2.1: .ui-tabs, .ui-tabs-nav, .ui-tabs-panel. Notice that there might be more style classes applying to the tab view inherited from other components. Check html source of the tabView to get all applying classes.
Use the style or styleClasses attribute as described in your answer and overwrite the theme classes with the !important declaration