Auto looping grid - how to access components?

[JB7169514]

I have a single line grid which uses auto-looping to pull data from the database and list it on screen, automatically resizing based on number of items returned. I then have a set of buttons and input fields in the grid, which replicate with the looping. This is fine, but I'm not sure how to then access any components which have been generated by the auto-looping as I don't know what their names will be.

For example, I have a button in the grid which has an associated click event, populating an input 'time' field with a default time. The first row works fine, but when I press the button in any of the auto-generated grid rows, it defaults the FIRST row time, not the generated row.

I think I'm missing something about how to reference/use components generated by the auto-looping functionality, so any pointers would be great please!

[Evgene Karachevtsev]

Hello,

1) You can use actions in the Appery.io Builder - they automatically make everything, for example when you click on the button, if you linked local storage variable to input, local storage variable will contain the value from the input from the same container as the button you click.
2) Please use the power of jQuery to find elements in the same container (i.e. the element in which you map array) as the target element http://api.jquery.com/category/traver...

If you have a specific question, please give us screenshots, description, your code - we will help

[JB7169514]

Thanks Evgene,

I really appreciate the quick response. Quite new to this so any help is massively appreciated!

I still can't get this to work - I've attached a couple of screenshots below:

1. The page - the idea is that when the 'I' button is clicked, the start and end times for Monday populate from the defaults (which are stored in local storage variables at page load). This works, but:

2. The test output - this grid pulls staff info from the database and loops fine. However when I click any 'I' button the top start and end dates (here, next to 'Angus') populate from the default local storage variables, not the automatically created versions below.

   Please let me know if this makes sense - keen to improve my jQuery if that's the best approach but a couple of pointers would be great.

   

3. I'm also having a problem with Visible/Invisible which I'm sure is easy... ultimately I'd like the input time boxes to be invisible until the 'I' button is clicked, but I can't seem to get them to do this, even using a boolean local storage variable.

   Thanks again!

   JB

[Yurii Orishchuk]

Hi JB,

you can use following JS code and modificate in accordance to your needs:

pre

//Replace "parentGridName" with your parent grid name.
var parentElement = jQuery(this).closest('[name="parentGridName"]');

//Replace "inputName" with your input name.
var someInputInside = parentElement('[name="inputName"]');

//Set some value to input
someInputInside.vale("some value");

/pre

Regards.

[Tooba Atif]

I have got the similar issue.

The button name is 'btnSignOff'
When the grid is populated from the list I want to show/hide the button according to the flag in the list.

The list has id, name, contact, severity, temp, is_signoff
I am mapping this to a grid having text boxes and a signoff button.
If the flag is_signoff is true then show button else hide.

The button names are different for the complete list.
How can i show or hide the button?

[Tooba Atif]

Waiting response here!

[Evgene Karachevtsev]

Hello Tooba,

You can actually make this without js code. If you have flag with value true|false in your response, then you should then map it in the property visible of necessary components

[Tooba Atif]

Thanks figured that out

[RK]

Hi Team,
I am also facing similar issue here. I have a list of values coming in from the database which I am capturing in a grid component. I have checked that this works fine. However, when I create 2 sub-grids in it - one containing header which is displayed at all times and the other grid containing Body which is shown only when there is a click on the header label. This only works for the first row. Can you please suggest how to use closest or parent to effectively realize this?
If you need further clarity on it, I can share details.

[Illya Stepanov]

Show us your implementation with screenshots.