I have column in data grid containing checkbox.
I want to throw an alert when more than 10 check boxes are selected,
means on check of 11th checkbox it should throw alert.
I tried below code but it takes lot of time,I am looking for some optimized method,
On change handler of checkbox,
protected function checkbox_changeHandler(event:Event):void
{
data.isUpdated=true;
data.incpt=chkflag.selected;
var selectionArray=[];
for each(var item:Object in outerDocument.adg.dataProvider)
{
if(item.incpt)
selection.push(item);
}
if(selectionArray.length > 10)
{
for each(var item:Object in outerDocument.adg.dataProvider)
{
chkflag.selected=false;
data.incpt=chkflag.selected;
outerDocument.adg.dataProvider.refresh();
}
Alert.show("Max 10 Items can be selected");
}
}
Related
Does anyone have any experience with conditionally disabling fields based on value of a previous field in an AEM6.1 TouchUI dialog?
To give some context I have a checkbox in my TouchUI dialog used to enable/disable (hide/show) a Call To Action button within a component. I'd like to disable the CTA buttonText and href fields in the dialog itself where the author has disabled the CTA via the checkbox. Adversely I'd like to enable these fields where the CTA checkbox is checked enabling CTA.
I have investigated /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide.js but it's not really fit for purpose given that this is specifically designed for hiding or showing fields based on value of dropdown list and my attempts to modify it to allow similar funationality on a checkbox have been less than fruitful. I want to enable/disabled fields rather than hide of show them.
After a bit of messing around I got this working by adding class="cq-dialog-checkbox-enabledisable" to my sling:resourceType="granite/ui/components/foundation/form/checkbox" and class="cq-dialog-checkbox-enabledisable-target" to the sling:resourceType="granite/ui/components/foundation/form/textarea" that I wanted to disable in my cq:dialog.xml.
I then created my own clientLib that has dependencies on granite.jquery and categories cq.authoring.dialog.
UPDATE: turns out the disabled property can't be set programatically on pathbrowser field types at the top level, so you neeed to disable the child fields contained inside it (js-coral-pathbrowser-input and js-coral-pathbrowser-button) code snippet below updated to reflect this.
/**
* Extension to the standard checkbox component. It enables/disables other components based on the
* selection made in the checkbox.
*
* How to use:
*
* - add the class cq-dialog-checkbox-enabledisable to the checkbox element
* - add the class cq-dialog-checkbox-enabledisable-target to each target component that can be enabled/disabled
*/
(function(document, $) {
"use strict";
// when dialog gets injected
$(document).on("foundation-contentloaded", function(e) {
// if there is already an inital value make sure the according target element becomes visible
enableDisable($(".cq-dialog-checkbox-enabledisable", e.target));
});
$(document).on("change", ".cq-dialog-checkbox-enabledisable", function(e) {
enableDisable($(this));
});
function enableDisable(el){
el.each(function(i, element) {
if ($(element).attr("type") === "checkbox"){
if ($(element).prop('checked')){
$('.cq-dialog-checkbox-enabledisable-target').enable();
} else {
$('.cq-dialog-checkbox-enabledisable-target').disable();
}
}
})
}
//recurse all pathbrowser children and grandchildren etc
function iteratePathBrowserDescendants (node, enable) {
for (var i = 0; i < node.childNodes.length; i++) {
var child = node.childNodes[i];
if ((child.className.indexOf('js-coral-pathbrowser-input') > -1 ) || (child.className.indexOf('js-coral-pathbrowser-button') > -1 )) {
enablePathBrowser(child, enable);
} else {
iteratePathBrowserDescendants(child, enable);
}
}
}
function enablePathBrowser(node, enable) {
node.disabled = enable;
}
//iterate class cq-dialog-checkbox-enabledisable-target's and enable
$.prototype.enable = function () {
$.each(this, function (index, el) {
//special treatment for pathBrowser as it is made up of multiple fields and cannot be disabled at the top level
if (el.hasAttribute('data-init')) {
if (el.getAttribute('data-init') == 'pathbrowser'){
iteratePathBrowserDescendants(el, false);
};
} else {
el.disabled = false;
}
});
}
//iterate class cq-dialog-checkbox-enabledisable-target's and disable
$.prototype.disable = function () {
$.each(this, function (index, el) {
//special treatment for pathBrowser as it is made up of multiple fields and cannot be disabled at the top level
if (el.hasAttribute('data-init')) {
if (el.getAttribute('data-init') == 'pathbrowser'){
iteratePathBrowserDescendants(el, true);
};
} else {
el.disabled = true;
}
});
}
})(document,Granite.$);
I currently have two tableviews in one screen, which results in both TableViews have rows which the user can select.
Now I want only one row to be selected at the same time (doesn't matter which TableView it is selected from). I was thinking about some kind of listener which deselects the other row when a row is selected. This is my initial setup:
Step 1
Search for a way to bind a method to the selection of a row (there is not something like tableview.setOnRowSelected(method))
Step 2
Create the method which acts like a kind of listener: when a row is selected, deselect the other row (I know how to do this part)
Class1 selectedObject1 = (Class1)tableview1.getSelectionModel().getSelectedItem();
Class2 selectedObject2 = (Class2)tableview2.getSelectionModel().getSelectedItem();
if(selectedObject1 != null && selectedObject2 != null) {
tableview1.getSelectionModel().clearSelection();
}
So, step one is the problem. I was thinking of an observable list on which a listener can be created, and then add the selected row to the list. When this happens, the listener can call the method.
Anyone any clue how to make this?
Any help is greatly appreciated.
The selectedItem in the selection model is an observable property, so you should be able to achieve this with:
tableview1.getSelectionModel().selectedItemProperty().addListener((obs, oldSelection, newSelection) -> {
if (newSelection != null) {
tableview2.getSelectionModel().clearSelection();
}
});
tableview2.getSelectionModel().selectedItemProperty().addListener((obs, oldSelection, newSelection) -> {
if (newSelection != null) {
tableview1.getSelectionModel().clearSelection();
}
});
My solution would be creating custom cell factory for table and set it for each table columns.
Callback<TableColumn<..., ...>, TableCell<..., ...>> value = param -> {
TextFieldTableCell cell = new TextFieldTableCell<>();
cell.addEventFilter(MouseEvent.MOUSE_CLICKED, event -> {
//your code
}
);
return cell;
};
packageName.setCellFactory(value);
table1.column1.setCellFactory();
table2.column1.setCellFactory();
...
I use it for deleting the chosen row.
public void ButtonClicked()
{
ObservableList<Names> row , allRows;
allRows = table.getItems();
row = table.getSelectionModel().getSelectedItems();
row.forEach(allRows::remove);
}
This question helped me but during experiment in javafx and jfoenix this also works for me.
deleteSingle.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
StringProperty selectedItem = table.getSelectionModel().getSelectedItem().getValue().link1;
System.out.println("That is selected item : "+selectedItem);
if (selectedItem.equals(null)) {
System.out.println(" No item selected");
} else {
System.out.println("Index to be deleted:" + selectedItem.getValue());
//Here was my database data retrieving and selectd
// item deleted and then table refresh
table.refresh();
return;
}
});
In case you need not only the row, but the x|y position of the table cell, do this:
table.getFocusModel().focusedCellProperty().addListener(
new ChangeListener<TablePosition>() {
#Override
public void changed(ObservableValue<? extends TablePosition> observable,
TablePosition oldPos, TablePosition pos) {
int row = pos.getRow();
int column = pos.getColumn();
String selectedValue = "";
if (table.getItems().size() > row
&& table.getItems().get(row).size() > column) {
selectedValue = table.getItems().get(row).get(column);
}
label.setText(selectedValue);
}
});
In this example, I am using a "classic" TableView with List<String> as column model. And, of course, that label is just an example from my code.
How do i stop textline from propogating(?) events down the application without destroying functions.
This is what i have
Application
Component 1
RichEditableTextfield
Component 1 listens for events in multiple childrens and looks for:
if (event.target is RichEditableTextfield) {
// Do stuff here...
} else {
// Do other stuff
}
But RichEditableTextfield sends MouseDown event on every textline and Component 1 gets confused and thinks i want to "Do other stuff" instead of "Do stuff here..." because event.target is TextLine.
Now i have this to stop the TextLines from propogating further:
private function stopTextLineEvents():void
{
if (this.textFlow.flowComposer) {
for (var i:int = 0; i < this.textFlow.flowComposer.numLines; i++) {
var flowLine:TextFlowLine = this.textFlow.flowComposer.getLineAt(i);
var textLine:TextLine = flowLine.getTextLine(true);
if (textLine) {
textLine.removeEventListener(MouseEvent.MOUSE_DOWN,onTextLineDown);
textLine.addEventListener(MouseEvent.MOUSE_DOWN,onTextLineDown);
}
}
}
}
protected function onTextLineDown(event:MouseEvent):void
{
event.stopPropagation();
this.dispatchEvent(event.clone());
}
It almost works but my problem is that when i have multiple lines, every time i click on a line (that isn't the first line) the first line in the textfield get the anchor instead of the line i clicked.
I am using a PagedCollectionView in Silverlight 3 to group items in a datagrid. I want to detect when the group headers are clicked but after 6 hours still cannot find any way to do this.
(So that when a collapsed header is clicked I can dynamically load the group's content)
The datagrid is populated like so:
PagedCollectionView collection = new PagedCollectionView(orgMembers);
collection.GroupDescriptions.Add(new PropertyGroupDescription("Generation"));
DataGrid1.ItemsSource = collection;
write an extension method to find a parent element of a specific type:
public static T FindParentOfType<T>(this FrameworkElement element)
{
var parent = VisualTreeHelper.GetParent(element) as FrameworkElement;
while (parent != null)
{
if (parent is T)
return (T)(object)parent;
parent = VisualTreeHelper.GetParent(parent) as FrameworkElement;
}
return default(T);
}
Handle the MouseLeftButtonUp event on the datagrid:
private void PassportGrid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
DataGridRowGroupHeader rgh = (e.OriginalSource as FrameworkElement).FindParentOfType<DataGridRowGroupHeader>();
if (rgh != null && rgh.DataContext is CollectionViewGroup)
{
var stuff = (rgh.DataContext as CollectionViewGroup);
var items = stuff.Items;
}
}
you can get info on the group that was clicked and its item collection (shown above)
I have a DataGrid and want a user to select multiple items and click a button to do something with those items (such as delete). When only a few items are selected, the deleting works, but if the user selects all the items without scrolling slowly over them, some of the selected items are null.
I also tried grid.removeSelectedRows(), but that also doesn't work for non-loaded items.
I tried fetching first, too:
grid.store.fetch({count:grid.rowCount,onComplete:dojo.hitch(this,function(){
var items = grid.selection.getSelected();
grid.selection.clear();
if (items.length) {
dojo.forEach(items, function(selectedItem) {
if (selectedItem !== null) {
grid.store.deleteItem(selectedItem); //or do something else
}
});
}
grid.sort();
})});
Even with the fetch, there are still null items, and only the very top and bottom rows actually get deleted.
Is there a way to load the selected items in a grid?
My task was to "extend" selection first item values to the rest of the selection. I've faced similar problem as yours, but finally found a solution:
updateSelected = function() {
//Callback for processing a returned list of items.
function gotSelected(items, request) {
var selectedIndex = paramGrid.selection.selected;
console.debug(selectedIndex);
var firstItem;
var counter = 0;
for (var i=0;i<selectedIndex.length;i++){
if(selectedIndex[i]){
var item = items[i];
if (counter < 1){
firstItem = item;
counter ++;
}else{
paramStore.setValue(item, "valueSPO", firstItem.valueSPO);
paramStore.setValue(item, "valueSPI", firstItem.valueSPI);
paramStore.setValue(item, "valueSM", firstItem.valueSM);
paramStore.setValue(item, "state", firstItem.state);
}
}
}
}
function fetchFailed(error, request) {
console.log("lookup failed.");
console.log(error);
}
paramStore.fetch({
query: {id: '*'},
onComplete: gotSelected,
onError: fetchFailed,
});
}
After this you have to connect this function to a button in addOnLoad:
dojo.connect(button2, "onClick", updateSelected);