Is it possible to drag my own component into a Kendo UI for Angular 2 Sortable? Basically, I'd like to drag items from one part of the page and have them added to a kendo-sortable, but not have them removed from where it was dragged from.
Yep, it is possible. And there are 2 ways to do it.
The more complex one is implementing your SortableService. That works with SortableComponent and your Component and do exactly what you need.
Second solution is simple: Wrap your component inside a Sortable, even if it has only one item. Lets say you have SortableA with your original component inside. And SortableB - the target where you will drop the items.
Set [zone]="zone1" for SortableA, and [acceptZones] = "zone1" for SortableB.
At this point you will be able to drag the single item from SortableA to SortableB.
The last thing is to call preventDefault in the dataRemove event of SortableA. This will make SortableA copy items upon drop, instead of moving them.
Related
On the selection of one drop-down multiple drop-down generated automatically as per selected value of first drop down.
The value of first drop down is between 1 to 7.
If I select 4 in parent then 4 child drop-down generate.
How to handle this problem by using geb page object and utilize it in test spec.
Sample UI of mentioned problem
How are the child drop-downs generated? Is there some JavaScript involved or are the children already on the page and just not displayed?
For the first option, I suggest you execute the JS script via Geb how to deal with dynamic content.
You can pass parameters to the script (so you can pass what you select in the drop down).
In the page object that describes your page you can do something like:
parent{$("select", id: "parent")}
children {}
and add child dropdowns to children after. (I don't have enough details to give you a precise answer here.)
If the children are just not displayed until you select an option in the parent dropdown you can define them from the beginning in your page object. Even if you don't see them, they exist in the document your browser will interpret.
I'm developing a custom table component for very large and very custom content. Therefore I decided not to go with TableView, but start from scratch (i.e. Control). I adopted the idea of the VirtualFlow to create and manage only the visible part of the table and reuse cells that have become invisible. However I needed virtual rows and columns.
My CustomVirtualFlow implements layoutChildren(). From the component's size and scrollbar positions I know which cells are visible. If necessary, I add cells to the VirtualFlow. I then update the content and css pseudo class states (selected, focused, ...).
This works almost fine ... currently, my only problem is that the css styles are sometimes lagging: newly created cells are shown with e.g. wrong backgrounds for a moment and then get correcteted with the next pulse.
My explanation for this is that JavaFX performs layout in two passes:
first a css pass and secondly the layout pass that calls layoutChildren().
The css of newly added children (during layoutChildren) is therefore not processes correctly.
I tried to call applyCss() directly, which helps, but seems to do too much because it takes a lot of time.
My question is:
How is the correct way to add nodes during layout, i.e. if the size of the component makes it neccessary to use further nodes?
If it is not during layoutChildren(), where else should I do it?
i am new to GWT and GWTP and the question sounds stupid.. Can I make an abstract PresenterWidget or similiar?
Like in normal Java extending the "class" and reuse / extend the logic. But not only the class, the whole thing of View and Presenter. I try to explain my initial situation and maybe you have another idea.
The image hopefully helps to explain it. The "Main-Tab" and every other tab consists of a collection of views which have the same base structure and the same logic.
the base structure consists of
border around EVERYTHING
an image (the wwitch)
a title
a textarea
a PresenterWidget which is added to a contentSlot of the parent (the menu left)
and below the base are view specific components like buttons, text or any other widget. So a main part of the view with logic is repeading. If the switch is "toggled" the view is hidden (the textarea and any childs / view specific components) like the lowest view in the picture. Furthermore the PresenterWidget left changes the color.
The logic is working, but now I am searching a proper way to solve this without repeading code and the possibility to add child elements which are hidden as well by toggling the switch. Can I add to a PresenterWidget child widgets and define where there should be added? like: Even if this is possible, it feels a bit inconvenient.
Thanks in advance.
I just want to post the solution:
I have now a simple Composite (KPICommonView) for the switch, title and the description. It got another FlowPanel below the description, where the specific components will be added later. For this the Composite implements "HasWidgets" and overrides the "add(Widget w)"-method which is called by UiBinder if the Widget is added and has child elements.
<own:KPICommonView title="First Header" description="I am a happy description :)" anchorToken="{nameAnchors.getFirst}">
<g:Label>child component</g:Label>
</own:KPICommonView>
I am not sure if I do a PresenterWidget for every segment and every PresenterWidget has one of the KPICommonView added, or if I do one normal Presenter which adds more than one of the CommonViews.
The CommonView furhter creates the PresenterWidget for the menu item on the side. It gets the attributes from the constructor (anchorToken, title) and adds it to the slot (which happens ugly, because the View has hard coded the parent saved to call "addInSlot()". The repeading code for the switch is handled by the KPICommonView.
Okay... this is a little difficult to explain but I will try my best.
In Custom Control while adding properties in Property Definition we can set "Allow multiple instances" which allows us to add multiple instances of that property when the control is embedded in XPage.
Similarly, I need to know whether it is possible to add (and remove) Editable Areas in a custom control when it is embedded in XPage? What I plan is that I would have a repeat control inside my custom control and I would be able to put the contents in each editable area in every loop of that repeat.
Is this the right way to go about or am I looking at this problem incorrectly? Any solution not involving editable areas is also welcome :)
Update 4 Apr 2013:
A use case context I am looking for is a simple carousel where contents of each screen in carousel can have different contents. These contents would be put into each (dynamically added) editable area. The contents can be very different from each other with one screen containing only text, other only image and another both image and text.
Look at the table walker example in the 26 original exercises. It does mostly what you are looking for (conceptually). You won't need multiple editable areas. Whatever is inside the repeat gets repeated.
What you want to do is to give the control a custom property "boolean editMode" so you can render that one line to be edited - if that's the UI pattern you want to follow.
You also could consider a dojo table with Ajax which allows for a familiar spreadsheet UI
I have a repeat that has buttons embedded in it. The repeat is in a panel. When the user clicks a button the button should hide/show (I partial refresh the panel). The repeat is tied to a Domino view and I see the other values that I from that view get updated in the repeat, so, it does not seem like a view index issue (I refresh the view index in my code.)
If I use context.reloadPage() in my button onclick code then the buttons will hide/show like they should, but, that seems like I am using a sledge hammer! Any suggestions on how to get the buttons to recompute the visible property when the panel that holds the repeat is rendered? Another strange thing is that the visible property gets computed three times whenever I refresh the panel that holds the repeat.
thanks, Howard
I think your looking for
getComponent("<id>").setRendered(true / false);
Hi For Repeat control's entry is used to make our head hard. Because handling the entry by SSJS, we can get the value and set the value. But rendering part, id of the repeating component are same for all. So if we try to give reder as false. It hides all of our repeating component.
Try to use the following., [Put this in button onclick, and see the value of below]
var entryValue= getComponent("repeat1").getChildren().get(0).getValue()
getComponent("inputText1").setValue(entryValue)
But in client side we can easily handle. Because the id of the DOM object is unique for all repeating component.
var id1="view:_id1:repeat2:"+'2'+":button1"
document.getElementById(id1).style.display="none"
This will hide the third entry of your repeat control component.
Please see the post, You may get better idea
Found a solution. My original solution was getting values from the repeat rows (using the collection object, which was a viewentrycollection and using getColumnValues) to compute the rendered property for the buttons.
Instead, I created a viewScope variable (a Vector) that holds the state of the buttons (which set of buttons to show). This gets populated in the beforePageLoad event of the page.
The button onclick code updates this viewScope variable after performing its processing. All works very nice now. I guess it was something in the JSF lifecycle that kept the buttons from being properly updated. Using the viewScope variable works fine.
With addition to what Ramkumar said, you can use the index variable in the repeat control to identify each and every occurrences inside the repeat control. You will get more idea, if you inspect with element from firefox[You might need firebug]. Usually the field mentioned inside a repeat control itself can be considered as an array