How to automatically populate rows of editable table

Submitted by va@H on Tue, 07/12/2011 - 15:00

Hello
I am 2 months old with webmaker and need some major help.
Scenario 1 is I have an editable table (1 row that has 3 textboxes). How can I automatically populate textbox3 with the sum of the values in textbox1 and textbox2?

Scenario 2 is When I click 'Insert', how can i have the textboxes of the newly created row populate with the values of the textboxes from the previous row?

Thank you in advance for the help.

RE: How to automatically populate rows of editable table

Hi va@H,

For your first scenario, you would need to add +?+?++onchange+?+?+? events to your first two fields (textbox1 and textbox2) to call a custom function, passing in the id information of the row being changed. To do this, add a custom script action specifying calculateTotal(objEventSource.repeatId). (For more details on the objEventSource object see http://www.hyfinity.com/node/42

Next you need to add a new script file to your page (from the Application Map screen) and define the following function in it.


function calculateTotal(repeatId)
{
    var val1 = dojo.byId(repeatId + 'textbox1').value;
    var val2 = dojo.byId(repeatId + 'textbox2').value;
    
    var total = Number(val1) + Number(val2);

    dojo.byId(repeatId + 'textbox3').value = total;
}

This should be all you need to do, but there might be problems with this when using the editabletable.js script file from 3.1.2. To resolve this, also add the attached et_override.js (renaming from .txt) file to your page, which overrides one function from the default editabletable.js script file.

For your second scenario, I assume you are trying to set the values in the insert row textboxes to the values that have just been inserted, whenever the Insert button is pressed. Is this correct?
If so you can do this by defining a change_function for your table. (See http://www.hyfinity.com/node/44
Set this to the name of your function (eg tableChangeFunction) and then add the following type of function to your page script file:


function tableChangeFunction(type, id)
{
    if (type == 'insert')
    {
        //find the repeated from the row id
        //this assumes the group inside the table is called +?+?++table_content+?+?+? - 13 characters long
        var repeatId = id.substring(0, id.length - 13);
        
        //set the new row values to the values of the fields just inserted
        //assuming the repeat is called +?+?++EditableTable+?+?+?
        dojo.byId('EditableTableBlankEntrytextbox1').value = dojo.byId(repeatId + 'textbox1').value;
        dojo.byId('EditableTableBlankEntrytextbox2').value = dojo.byId(repeatId + 'textbox2').value;
        dojo.byId('EditableTableBlankEntrytextbox3').value = dojo.byId(repeatId + 'textbox3').value;                
    }
}

I hope this helps.

Regards,
Gerard

attachment

et_override.txt

RE: How to automatically populate rows of editable table

Hi va@H,

For your first scenario, you would need to add +?+?++onchange+?+?+? events to your first two fields (textbox1 and textbox2) to call a custom function, passing in the id information of the row being changed. To do this, add a custom script action specifying calculateTotal(objEventSource.repeatId). (For more details on the objEventSource object see http://www.hyfinity.com/node/42

Next you need to add a new script file to your page (from the Application Map screen) and define the following function in it.

function calculateTotal(repeatId) { var val1 = dojo.byId(repeatId + 'textbox1').value; var val2 = dojo.byId(repeatId + 'textbox2').value; var total = Number(val1) + Number(val2); dojo.byId(repeatId + 'textbox3').value = total; }

This should be all you need to do, but there might be problems with this when using the editabletable.js script file from 3.1.2. To resolve this, also add the attached et_override.js (renaming from .txt) file to your page, which overrides one function from the default editabletable.js script file.

For your second scenario, I assume you are trying to set the values in the insert row textboxes to the values that have just been inserted, whenever the Insert button is pressed. Is this correct?
If so you can do this by defining a change_function for your table. (See http://www.hyfinity.com/node/44
Set this to the name of your function (eg tableChangeFunction) and then add the following type of function to your page script file:

function tableChangeFunction(type, id) { if (type == 'insert') { //find the repeated from the row id //this assumes the group inside the table is called +?+?++table_content+?+?+? - 13 characters long var repeatId = id.substring(0, id.length - 13); //set the new row values to the values of the fields just inserted //assuming the repeat is called +?+?++EditableTable+?+?+? dojo.byId('EditableTableBlankEntrytextbox1').value = dojo.byId(repeatId + 'textbox1').value; dojo.byId('EditableTableBlankEntrytextbox2').value = dojo.byId(repeatId + 'textbox2').value; dojo.byId('EditableTableBlankEntrytextbox3').value = dojo.byId(repeatId + 'textbox3').value; } }

I hope this helps.

Regards,
Gerard

Hello Gerard
I read the link http://www.hyfinity.com/node/42 you sent. There is an information that is not presented. How do i get the 'repeatId' ? I have the Repeat Name which is EditableTable, but where can i locate the repeatId?

RE: How to automatically populate rows of editable table

The repeatId is the dynamic value indicating which row of the table you are interested in. For example, if the repeat is called 'EditableTable', and you are looking at the third row in the table, the repeatId will be 'EditableTable3' This is added to the front of the name of each control in the table to creates its unique id.

To make this easy to find, WebMaker makes the objEventSource object available to every custom script action. One of the properties this provides is the repeatId value for the source of the event.

Therefore to get the repeatId you just need to access objEventSource.repeatId in your custom script action, and the correct value will be returned based on what row of the table the event is fired for.

I hope this helps.

RE: How to automatically populate rows of editable table

The repeatId is the dynamic value indicating which row of the table you are interested in. For example, if the repeat is called 'EditableTable', and you are looking at the third row in the table, the repeatId will be 'EditableTable3' This is added to the front of the name of each control in the table to creates its unique id.

To make this easy to find, WebMaker makes the objEventSource object available to every custom script action. One of the properties this provides is the repeatId value for the source of the event.

Therefore to get the repeatId you just need to access objEventSource.repeatId in your custom script action, and the correct value will be returned based on what row of the table the event is fired for.

I hope this helps.

Thank you very much Gerard for your help. I incorporated the functions and they are working as expected.

RE: How to automatically populate rows of editable table

Hello Gerard
I need to remove the 'edit' and 'delete' links when i use 'Enable Dynamic Disable IF' on 'EditableTable'. What property does objEventSource provide to be able to do that?
Is an there an available API?

RE: How to automatically populate rows of editable table

You can control the appearance of the edit and delete buttons on an editable table by adjusting the settings in the table_init custom field for the table.
The important properties are allow_add and allow_delete, and these can be set to 'true' or 'false' if you always want to allow or remove the options. If you need to dynamically make this decision based on the data (as the 'Disable If' option allows) then set these properties instead to a function reference. eg change the init script to


hyf.editabletable.init(hyf.editabletable.getLastTableOutput(),
                       {validate:true,
                        allow_add:true,
                        allow_delete:checkEditDeleteEnabled,
                        allow_edit:checkEditDeleteEnabled});

You would then need to add a hidden field to your page (eg called 'editDeleteControl') which should be given the same type of binding as you are using for the disable if check.

You can then define the new 'checkEditDeleteEnabled' function so that it checks the value of this hidden field to decide whether to enable the functionality. eg something like:


function checkEditDeleteEnabled(tableId, rowId)
{
    var checkVal = dojo.byId('editDeleteControl').value;
    if (checkVal == 'true') //should be disabled
        return false;
    else
        return true;
}

I hope this helps.

Regards,
Gerard