Repeaters, styling and button events.

[nphillips]

I have a repeater with a number of fields arranged on an input panel for inputting data and an add button underneath the repeater for adding extra input panels for each additional row required. But, I have two problems:

1. I've added a delete button to the input panel. However, the event handling script doesn't know which row/input panel's button has been clicked, so I do not know which row to delete from the underlying table. How do I determine which button has been clicked?

2. I have a custom datepicker on some of the fields. This works great outside of the repeater, however when placed in the repeater I'm unable to set the field's id : Html Element Property Assistant - Editor Input. The id field is greyed out. This kind of makes sense as there could be any number of them created by the repeater. Consequently, the data picker doesn't render as expected. How do I get EBase to automatically allocate the datapicker its id????

Cheers...

[Jon]

1. I've added a delete button to the input panel. However, the event handling script doesn't know which row/input panel's button has been clicked, so I do not know which row to delete from the underlying table. How do I determine which button has been clicked?

When a button (or any other clickable event) is clicked inside a repeater, the system automatically sets the current row of the table linked to the repeater. So if you have a script linked to the delete button you can just code tables.mytable.deleteRow() - which means delete the current row - and the correct row should be deleted.

2. I have a custom datepicker on some of the fields. This works great outside of the repeater, however when placed in the repeater I'm unable to set the field's id : Html Element Property Assistant - Editor Input. The id field is greyed out. This kind of makes sense as there could be any number of them created by the repeater. Consequently, the data picker doesn't render as expected. How do I get EBase to automatically allocate the datapicker its id????

You should use a class instead of an id.

[nphillips]

Many thanks for the reply, Response 1 works great.

I’m confused by response 2 however. The input control requires a unique id for the date popup’s javascript to work, and that id has to begin with ‘datePicker’ e.g. datePicker1, datePicker12 etc. How can we get around this?

Cheers.

[Jon]

If the Javascript requires an id, it will be difficult. The problem is that the controls inside a repeater are repeating and therefore the id won't be unique - that's why the designer won't let you set one. If you need an id and there is no alternative, you would need to assign unique ids in your own Javascript code e.g. by using jQuery. You could achieve this by including the table's row number as a hidden (using display:none) column and then building your own ids using this.

Which datepicker are you using? Maybe we can check if there's an easier way.

[nphillips]

We're using the standard JQuery data picker.

[nphillips]

I seem to have a tiny breakthrough. If I set up the date picker setup in client scripts to look for the class as opposed to the id like so:

$(document).ready(function(){
$('.datePicker').datepicker({

The date picker works inside the repeater if there is only one row. As soon as a second row is added it stops working.

[Jon]

OK, you can just use a class and it should work fine e.g.

Repeater
-- RepeaterRow
---- Date Field

In Html Element Properties for the date field, click the Editor Input tab and enter a class, say "date1".
In Html Element Properties for the repeater (or any other parent control), give the control an id, then add a jquery ready event with the following code:

Code: Select all

$( ".date1" ).datepicker();

This should bind a date picker to each occurrence of the date field in the repeater. You should find that the date values are automatically placed in the correct fields.

[nphillips]

Cheers. Excellent. That works!