I want to display an image in ADF table row when it's true and hide it when it's false, knowing that the row attribute returns 0 ,1 as in Boolean.
I'm using Active Image.
I can be accomplished using the rendered attribute. That might look something like:
<af:table value="#{bindings.SomeView1.collectionModel}" var="row">
<af:column>
<af:outputText value="imgs in next columnc displayed conditionally">
<af:column/>
<af:column>
<af:activeImage source="/myPath/myImg.gif"
rendered="#{row.someAttribute == '1'}">
<af:column/>
<af:column>
<af:image source="/myPath/myImg.gif"
rendered="#{row.someAttribute == '1'}">
<af:column/>
<af:table>
Note that, unless you are have an Active Data Service set up and configured, you should be using <af:image> instead of <af:activeimage> (see component documentation).
Codemonk's logic is correct, but Visible is a better attribute to use for this than rendered.
Docs:
Default Value: true
the visibility of the component. If it is "false", the component will be hidden on the client. Unlike "rendered", this does not affect the lifecycle on the server - the component may have its bindings executed, etc. - and the visibility of the component can be toggled on and off on the client, or toggled with PPR. When "rendered" is false, the component will not in any way be rendered, and cannot be made visible on the client. In most cases, use the "rendered" property instead of the "visible" property.
We frequently reserve "rendered" for security use cases when we do not want the markup generated into the page. Visible turns it on and off with html/markuup already on the page.
Related
I am using antd "antd": "^3.26.3", to develop a app, now the table have a + like this:
I did not add any setting to add the +, why the + come out? what should I do to remove the +? this is my antd table source code:
<div className={styles.tableList}>
<StandardTable
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
loading={loading}
data={data}
columns={this.columns}
selectedRows={[]}
rowKey="_index"
hideAlert
disablePagination={false}
expandIconAsCell={false}
expandIconColumnIndex={-1}
onChange={this.handleStandardTableChange}
/>
</div>
I have tried to add this config but still did not make the + disappear, what should I do to fix it?
expandIconAsCell={false}
expandIconColumnIndex={-1}
In antd Table component, + icon represents a row that can be expandable when clicked. By default, it is not expanded so when you clicked on + it will expand.
There are basically two cases in which + can appear in the rows of the table.
Using expandable api, expandable api allow us to render something things (data) by clicking + or anywhere in the whole row (this can be set by expandRowByClick as true). A common example for this case can be found here.
Using children property in the data prop. Example.
Even if children property has an empty array, it will still show the + icon and when it is clicked it will expand with some extra spaces but no data in it.
Note: You should not use both the ways in one antd Table. So, you always have to choose one way over another depending upon the use cases.
In your case, you have mentioned that you have children property in your dataset which is a boolean value and has a different purpose than the children property of antd table dataset.
As I have mentioned in my comments, you just need to alias the children property to some other name, maybe haveChildren when mapping your dataset to a custom dataset.
I have a container with dynamic UI components including checkboxes. How can I know the selection status of a particular component?
Using isSelected() doesn't work as it is always false because it seems to pick the last checkbox in the list which returns false since it is unselected.
bool_isMemberSelected = cb_member.isSelected(); //returns false.
I am able to get the checkbox at a particular index in the parent component but once I have it there is no isSelected option on it. So I use a dirty way by tokenizing the string representing the component to get to the selected status. There must be a better way.
System.out.println("Checkbox Data "+cnt_tablerow[Integer.parseInt(lbl_memberno.getName())].getComponentAt(0)); //Checkbox Data: CheckBox[x=0 y=0 width=63 height=152 name=524, text = , gap = 2, selected = true]
String str_chkbox = StringUtil.tokenize(StringUtil.tokenize(cnt_tablerow[Integer.parseInt(lbl_memberno.getName())].getComponentAt(0), ']').get(0), '[').get(1);
String str_status = StringUtil.tokenize(StringUtil.tokenize(str_chkbox, ',').get(3), '=').get(1).trim();
if(str_status == "true"){}
You could generate and set a name for each component when generating your dynamic UI. With a name you can use the ComponentSelector API or a simple for to get the Checkbox you want and then use the isSelected method.
If you want to keep your actual selection logic with the index, you can simply check the instance of your component and cast it to a CheckBox, that would also do the trick.
I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
I have a number of Div's on a layout, each of them draggable, so there's the possibility of the user dragging them into positions where they will overlap.
I want to set the most recently made visible div to have a z-index value that's +1 from the last, and for this I'm using a $scope.nextIndex variable that's incremented each time one of the div's is made visible.
Each div has its own variable to track its own z-index value: $scope.one_zIndex, $scope.two_zIndex, $scope.three_zIndex, and each correctly gets assigned an incrementally larger value as each div is shown, hidden and shown again.
Each div has its own class: one_z, two_z, three_z
What I can't make work is assigning the variable to the z-index style on the divs themselves via the controller.
var myVar = document.getElementsByClassName("one_z");
If I log this to the console, I get what I expect - an array with one element [0]
[]
0 : div#one_z
length : 1
one_z : div#one_z
__proto__ : HTMLCollection
I would assume that I could set the z-index simply like this:
myVar[0].style.zIndex = $scope.one_zIndex;
However this throws an error:
Uncaught TypeError: Cannot set property 'zIndex' of undefined
What am I missing? Or is there a better way to accomplish this?
Here is a working plunker https://plnkr.co/edit/aaDipIWdqpajghc2F2Da?p=preview
You can set zindex via ng-style:
<div ng-style="{'z-index': $lastIndex;}">...</div>
This example completely useless in your case, but there is an example of ng-style usage. In your case I'd set index as property of you div element data source.
What wound up working was this:
First, I switched to IDs instead of classes, which likely didn't impact the solution but as each div was only ever going to exist once, IDs was the more correct way of identifying them.
Then, in the function that displays the div, I used this:
_.defer(function(){
jQuery('#one_z').css('z-index', $scope.one_zIndex);
});
There appeared to be an issue where I was showing the div and trying to set its z-index before the DOM had updated to include the div, so _.defer (I'm using Underscore.js) prevented the accessing of the z-index until everything had updated once, and it works.
As I mentioned in another comment - using ng-style wasn't working for me, and I had tried the _.defer with that approach as well initially without success.
For the record - I've used jQuery() instead of $() so it's clear in the code that this is a jQuery and not an Angular solution, and while I'd ideally have liked a purely Angular solution to this problem, this is clean enough for me, and doesn't do any DOM manipulation outside of Angular's purview that impacts the rest of the application in any way, it's purely display candy.
I'm using the Ext.form.field.Tag component. I have configured
createNewOnEnter:true,
createNewOnBlur:true,
forceSelection:true
but if I type in a value that's not the in the dropdown list/store records and tab-out or click enter the value gets selected. I want the value to be selected on enter/blur ONLY if it exists in the dropdown. But when createNewOnEnter and createNewOnBlur are set to true, forceSelection becomes false. I verified this by setting a debugger in the "change" event handler.
I dont have a fiddle but you can copy paste the above config into the live editor in the API Docs here
thanks
There are some configurations that are incompatible with each other, and ExtJS does not provide for all thinkable configurations of components (although they try, but then, Tagfield is quite new). This is the relevant part of the form/field/Tag.js file that explains your experience:
if (me.createNewOnEnter || me.createNewOnBlur) {
me.forceSelection = false;
}
To get what you want, you would have to override some parts of the tag field definition to suit your needs. You should look into overriding the assertValue and the onKeyUp functions.