Gridster2 - Angular 11 Gridster items order gets changed when I resize another gridster item from side - angular-gridster2

I am facing an issue in Gridster2 library for Angular.
Situation:
In my Angular application, Gridster has 2 columns. First column has 2 Gridster items where first gridster item name is 'First Item' and second gridster item name is 'Second Item'. Now in the second column (right side) I have one gridster item named 'Side Item' which is spanned 2 rows so as to match the same height of 'First Item' and 'Second Item' combined together in left side.
Action:
I try to resize the 'Side Item' towards column one horizontally that has both 'First Item' and 'Second Item'.
Expected Behavior:
When resizing the 'Side Item' towards left, the 'First Item' and the 'Second Item' will be pushed towards down by maintaining the order which is 'First Item' will be above of 'Second Item' after pushing.
Issue:
When I resize 'Side Item' towards left, I see 'First Item' and 'Second Item' is pushed to down which is expected. But the order gets changed. Which is the 'First Item' now comes below of 'Second Item'.
I need help on this. Any workaround for this ? To understand more what I am trying to do here please visit https://github.com/tiberiuzuld/angular-gridster2/issues/818
Gif image of what I am trying to do
I see the same issue in Gridster2 demo site https://tiberiuzuld.github.io/angular-gridster2/
Remember that this issue is also there when try to do drag and drop.

Related

Application item not working for Interactive grid

In my application, i have application item that stores employee id.
I have a form where emp_id=application item id and an interactive grid which also has application item in where clause.
In form, the application item value is available and shows as emp_id.
But in interactive grid it doesn't .
Form P1_emp_id =:APP_ID -> Displays emp_id = 1
IG : emp_id = :APP_ID -> emp_id is null.
It doesn't take the application item value although it is there in the session.
Did you try to give 'submit' or 'return item' values? Maybe you should add the item there and it will take the value. Or try 'fire on initialization: yes' and put the page on 'after refresh'. If none of them works then please provide us more detailt to solve this problem, thanks.

CSS grid to ignore column if column doesn't exist

If I have
grid-template-columns: 20vw 20vw 20vw 20vw;
But only 3 items, can I get the 3 items to center ignoring the 4th space? Or is that the wrong tool for this job and I should use another method like flexbox.

How to get the values in items without refreshing the page in apex

I have an item to enter email id, and two more items to get the values of first/last name and department of that user which we have given without refresh the page or without enter.
Item 1: ex : a...z#gmail.com (text field)
Item 2 : ex Mechanical (display only)
Item 3 : ex Abinnaya Moorthy (display only)
This should happen when we have given the email id and as soon as the cursor is out from email id the two item values should display.
I have used dynamic action but not getting exact output, please let me know.
On Item 1 make a following dynamic action:
Event: Change (I would recommend 'change', although based on your question, you might also be interested in 'Mouse Leave', although it would trigger DA even when no change in item value occurred, for example when someone just clicked on it and clicked away)
Selection Type: Item
Item: your Item 1
First true action: Execute PL/SQL Code
inserting values into your items Item 2 and Item 3, while using your Item 1 as a condition in WHERE clause
Page Items to Submit: your Item 1
Page Items to Return: your items Item 2 and Item 3
Second true action: Refresh
Selection Type: Item(s)
Item(s): your items Item1 and Item2
Let's say I have 1 field like an email field above. Then I have 50 display only fields that values are coming from (Source) SQL queries that depends on email field. How to refresh this fields without refreshing page, but also without Setting its value manually? I would only like to trigger them to perform their Source SQL query and refresh values on the page.
Setting their values by SetValue action will result in having same queries in Dynamic Action and in Source SQL Query for each field. Also for 50 fields DA would have hundreds of SQL lines and would become not maintainable.
assuming you are working on page 9, and the email field is :P9_EMAIL_ITEM, and the name fields are :P9_FNAME_ITEM and :P9_LNAME_ITEM
The email field is a text field (it doesn't matter what the source is)
The name fields should be display only, and in properties the setting "Based On" should be "Page Item Value", set the source property to type Null.
On the email text field, create a new dynamic action, set the When properties to: Event -> Change, Selection Type -> Item(s), Item(s) -> P9_EMAIL_ITEM
Under the dynamic actions you'll have a "New" event, with a "True" folder, and inside it a new action (probably "Show"). Change its action to "Set Value".
change the setting property so that "Set Type" will be "SQL statement", and write a statement with the following structure:
select FNAME_COLUMN, LNAME_COLUMN
from RELEVANT_TABLE
where EMAIL_COLUMN = :P9_EMAIL_ITEM
Under "Items to submit" select the P9_EMAIL_ITEM.
in the Affected Elements properties set Selection type -> Item(s) and Item(s) -> P9_FNAME_ITEM, P9_LNAME_ITEM
In "Execution Options" select NO for Fire on Initialization
what we did on step 5 is "refreshing" the relevant items, without refreshing the page
I just tested it out and here's what works very well:
On Item 1, create a DA on 'Loose Focus'
Create two true actions for 'Set Value', for both Item 2 and Item 3.
Select Settings > Set Type as SQL Statement.
Write query to fetch item 2 and item 3, base on item 1 (I suggest comparing lower cases of both to make it case in-sensitive.)
Items to Submit -> Item 1
And viola, it's done!

Unable to click element/value from the list . We can see the value only after clicking on button

1 I enter the postcode by using sendkeys 2 I click on Find Address
button by using click 3 Now I have to select the address from the
list.
I tried using xpath and cssSelector but its giving me error 'no such element found'
Screenshots
Form ImageHTML code
You can use the following xpath to click on first address in the list.
//div[#class='c-large-selector']/div/div

Multiple Select controll inside CollectionView with common filtered content

Is there any possibility to choose multiple objects from one common list?
My case is like this:
I have list of many (let's say 100) persons
I need to choose only few of them
Every person have to be choosen at most once (selected person should not be in content list of Select control)
Visual example:
Person array (Select's CONTENT):
App.personsController = Ember.ArrayController.create({
content:["Person1", "Person2", "Person3", "Person4", "Person5"]
})
We have 2 buttons to add and remove rows:
(+) button perform 'add' action that call person.createRecord to add another item to ItemView inside CollectionView
(x) button perform 'remove' action that call person.deleteRecord for delete record
This is what we see first:
(+)(x)
1st action - CLICK ADD
So after performing 'click' action we have list like this:
Person1 <- this is actualy DropdownList (Select control)
(+)(x)
Table of content for all Select's now is:
["Person2", "Person3", "Person4", "Person5"]
2nd action - CLICK ADD
Person1
Person2
(+)(x)
Table of content for Select:
["Person3", "Person4", "Person5"]
3rd action - SELECT
Now we change Person2 to Person5
Person1
Person5
(+)(x)
Table of content:
["Person2", "Person3", "Person4"]
4th action - CLICK REMOVE
Now we remove Person1 from list
Person5
(+)(x)
Table of content:
["Person1:, "Person2", "Person3", "Person4"]
As You can see table content is changing with selected context.
Problems:
Select View in template have contentBinding which i want to bind with my content table, but if I remove already selected item, then it won't show in html select-option attribute.
I tried to use selectionBinding but it seems not working in that way.
As far as I know we should:
use 2 lists:
selectedPersons
notSelectedPersons
use CollectionView with ItemView to track each Select element individualy
feed each {{view Select contentBinding }} with notSelectedPersons
feed each {{view Select selectionBinding }} with selectedPersons
Is there any posibility in ember.js to achieve result similar to this above?