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.
Related
I am using react-table for the data-grid purpose. I am implementing a settings icon which shows the list of columns and based on the selection, the column gets shown or hidden. I am manipulating "show" property of columns object for this. While the property is getting set properly, there is no such change in the table. Can someone help me with this.
But when I set the property directly(in App component) it works. Where am I going wrong?
Code Sandbox: https://codesandbox.io/s/blue-cherry-di3ub
Help would be appreciated
The issue is in your Select
this.props.handleSetState(this.props.data)
this.props.data is immutable, so you're just sending back the same data that came in. Stream props.data into a new object and then send that back to the parent.
ETA: Something like this...
let updatedObj = this.props.data.map((obj, i) => {
if (obj.accessor === value[i]) {
obj.show = false
}
return obj
})
this.props.handleSetState(updatedObj);
I have three dropdown boxes. I need to filter the data and need to be displayed in the table based on my checkbox selection(either with single checkbox or two checkboxes or three checkboxes).
I have done the following, but if we observe it clearly, I am not able to filter the data properly using AngularJS.
Like:
a. It should work for individual checkbox selection: means if I select any single checkbox either from Name or Description or Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
b. It should work for multiple(two) checkbox selection: means if I select any multiple checkboxes like either one from Name and one from Description or one from Description and one from Field4 or one from Field4 and one from Name, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
c. It should work for multiple(three) checkbox selection: means if I select the three checkboxes like one from Name and one from Description and one from Field4, then respective matched filtered data should be displayed in the table, otherwise it shouldn't be displayed any data(i.e if it doesn't match our checkbox selection means it won't display any data)
It is working fine for the first time checkbox selection only, means: after loading the above code/app, if we check either any one of the above selections(like whether single checkbox selection or two checkbox selection or three checkbox selection) then it's working fine, later it is not working(means if we uncheck the above any criteria and then if we select any checkbox again then it's not working, for that again we need to refresh the app/code then only it's working).
Example: if I select one from Name, then respective matched data will be displayed. Then again if I uncheck the same and check the some other checkbox like from Description then it's not working. Similarly for all the above criteria. You can observe it clearly.
Please let me know that what I have done wrong here and let me know how to filter it properly. Created Fiddle. Thanks in advance !
The problem is the convoluted filtering logic. Anytime you find yourself nesting lots of if statements, think about reorganizing the branching logic. By breaking it into smaller components, you can make it easier to manage, and if you can avoid using if altogether, then you only have to test one path, instead of several.
Every time a user checks a box, we need to make sure that we only display items that match however many boxes are checked. So we need to know 1) how many boxes are checked, n, and 2) how many items can be found with n matching fields.
We can take advantage of the fact that Boolean variables can be cast to integers (0 = false, true = 1) and use that to count the number of checked boxes, as well as the number of matches found.
We can also put the field names into an array, so that we don't have a lot of repetition in our functions.
Fiddle example here.
var fields = ["name", "description", "field4"];
//for each field, count how many fields the item matches
function getMatches(item, matchesNeeded) {
var foundMatches = 0;
fields.forEach(field => {
foundMatches += item[field] === $scope.pagedItems[field]
});
//make sure found at least one match and found desired minimum
return foundMatches && foundMatches >= matchesNeeded;
}
//count how many boxes are checked
//this will tell us how many different fields we are matching on
function numChecked() {
var count = 0;
fields.forEach(field => {
//this will auto convert falsy to 0.
//truthy values will be 1
count += Boolean($scope.pagedItems[field]);
});
return count;
}
$scope.filterItems = function(item) {
return getMatches(item, numChecked());
};
As #Larry pointed it was more based on logic. I have modified Apress book 'Pro AngularJS' Source Code from GIT for this.
Basic logic will in filter function as below -
$scope.categoryFilterFn = function (product) {
var canHave = false;//dont load by default
var atLeastOneTrue = false;//Check if previously checked any condition
angular.forEach(filterValues, function(selectedValue, key) {
var selectVals = Object.values(selectedValue);
if(selectVals.indexOf(product[key]) !== -1) {//if values exits in product.
canHave = !atLeastOneTrue ? true : canHave;
}else{
canHave = false;
}
atLeastOneTrue = true;
});
return canHave;
}
For working Fiddle.
In my AngularJS project, I am having a dropdown field as a directive and the values are coming from the backend.The user can also leave the field without selecting the dropdown(optional field) but the problem is, there is no empty field from the backend. So I need to add an empty field into the dropdown as default.
Since there is no option in the directive got struck in this issue.Googled a lot but didnt get any solutions yet.Kindly provide some suggestion.
Note:Client machine,cant post the code.
If there is no value set for the ng-model that the dropdown is bound to, Angular will provide a blank option by default that can be left in place (ignored) by the user and will result in your final value being whatever you set that ng-model to in the first place. If you need an actual empty string for the value, initialize it to that.
If you need to enable the user to select an empty value once they have already selected a value, you will need to add an empty value to the object that the dropdown is bound to. Add the empty value like this:
myPromise.then(function(data){
$scope.ddInfo = data;
$scope.ddInfo.unshift({id:'0000',text:'Not Applicable'});
});
I have a textfield and would like to not make it read only if a value is selected from a shuttle (many options can be picked). I am using Jheadstart to create the page, but an adf solution works just as well as I can just insert that change into ta template.Normally I would use a binding and select the input value of of another field, but I am not sure what to select with the shuttle as a shuttle can have many selections.
To get the values from the shuttlebox inside a bean:
BindingContainer myBC = this.getBindings();
JUCtrlListBinding listBinding = (JUCtrlListBinding)myBC.get("ViewObject1"); //viewObject that populates the shuttflebox
Object str[] = listBinding.getSelectedValues();
if(str.length>0)
isTextBoxDisabled=false;
else
isTextBoxDisabled=true;
Then bind the Disabled property of the inputtext to myBean.isTextBoxDisabled
This would need a page submit in order to activate, so I'm guessing that's not what you are after.
If you want it to automatically update the values as their are moved around in the shuttle, you will have to use the ValueChangeListener property of the shuttle, in which to get the size of the selections.
public void selectValueChangeListener(ValueChangeEvent valueChangeEvent) {
ArrayList list = new ArrayList(Arrays.asList(valueChangeEvent.getNewValue()));
if(list.isEmpty())
isTextBoxDisabled=true;
else
isTextBoxDisabled=false;
//refresh the inputText component
AdfFacesContext.getCurrentInstance().addPartialTarget(myInputText);
}
Bear in mind the ValueChangeListener will only get processed via their bean method when the page is submitted. If you want the change processed when changing the value of the shuttle, set autoSubmit = true.
i try to populate a dropdown menu for quicksearch in mvcgrid my code is:
$g = $this->add('MVCGrid');
$g->setModel('materiale');
$g->addPaginator(25);
$s = $g->addQuickSearch(array('nome_mat'));
$value_list = array(
1=>'Granito',
2=>'Marmo'
);
$s->addField('dropdown','tipo_mat','Tipo_mat: ')->setValueList($value_list);
The dropdown list appear on quick search form.
My db field is tipo_mat, but when i click quicksearch button nothing uppens, can someone help me plase.
Thank's
You will find that the Quicksearch is nothing more that a simple form, which applies condition to your grid when submitted. In theory, you could have a standard form sitting in there doing the same thing:
$search = $g->add('Form',null,'quick_search',array('form/quicksearch','form'));
$search->addFiled('dropdown','tipo_mat')
->setValueList($value_list)
->set($_GET['tipo_mat']);
$search->addField('search','q')
->set($_GET['q']);
// Handle submit of form, reload grid with AjAX, pass values as arguments
if($search->isSubmitted()){
$grid->js()->reload($search->getAllData())->execute();
}
// If values are passed, use them
if($_GET['q'])
$grid->dq->where('name like','%'.$_GET['q'].'%');
if($_GET['tipo_mat'])
$grid->dq->where('foo',$_GET['tipo_mat']);
The "Filter" and "QuickSearch" classes help you with saving search values but you must not be afraid to look into their source and create your own QuickSearch class which can apply parameters properly.
Perhaps using Filter in your case is better than quick search, because of how "applyDQ" is handled:
https://github.com/atk4/atk4/blob/master/lib/Filter.php#L62