=========================
Visual editing of records
=========================

In the on_view_form_created event handler of the Demo task 
(:doc:`Working with view forms <view_forms>`)
we assign event handlers to buttons specified in the html template of 
the view form:

.. code-block:: js

    item.view_form.find("#new-btn").on('click.task', function() {
        item.insert_record();
    });
    item.view_form.find("#edit-btn").on('click.task', function() {
        item.edit_record();
    });
    item.view_form.find("#delete-btn").on('click.task', function() {
        item.delete_record();
    });

Now, we'll discuss the methods used in these event handlers.

To visually append, insert and edit a record in an item dataset use the
:doc:`append_record </refs/client/item/m_append_record>`,
:doc:`insert_record </refs/client/item/m_insert_record>` and
:doc:`edit_record </refs/client/item/m_edit_record>`
methods respectively.

These methods first call the 
:doc:`append </refs/client/item/m_append>`,
:doc:`insert </refs/client/item/m_insert>` and
:doc:`edit </refs/client/item/m_edit>` 
methods to append, insert and edit a record in the dataset. And after that use
:doc:`create_edit_form </refs/client/item/m_create_edit_form>` 
to display an edit form of the item.

To cancel visual editing of a record call 
:doc:`cancel_edit </refs/client/item/m_cancel_edit>`, which, first, calls 
:doc:`close_edit_form </refs/client/item/m_close_edit_form>` 
to close the edit form and then cancels edit (append, insert) operation by using 
:doc:`cancel </refs/client/item/m_cancel>`
method.

To save data changes use 
:doc:`apply_record </refs/client/item/m_apply_record>`
methods. 
The 
:doc:`apply_record </refs/client/item/m_apply_record>`
method after posting the record to the dataset, uses 
:doc:`apply </refs/client/item/m_apply>`
method to apply changes to a dataset table on the server.

The 
:doc:`create_edit_form </refs/client/item/m_create_edit_form>` 
and 
:doc:`close_edit_form </refs/client/item/m_close_edit_form>` 
methods work the same way as the
:doc:`view </refs/client/item/m_view>`
and 
:doc:`close_view_form </refs/client/item/m_close_view_form>` 
methods.

The 
:doc:`create_edit_form </refs/client/item/m_create_edit_form>` 
method uses an edit html template of the item from *index.html* file (see 
:doc:`Forms <forms>`
)

This method accepts one parameter - **container**. If this parameter (JQuery object) 
is specified, the html template will be embeded in the **container**, otherwise 
a modal form will be created and the html template will be inserted into it.

After the form is created the application triggers the following events:

* :doc:`on_edit_form_created </refs/client/task/on_edit_form_created>`
  of the task.

* :doc:`on_edit_form_created </refs/client/group/on_edit_form_created>`
  of the group that owners the item, if one is defined for the group.

* :doc:`on_edit_form_created </refs/client/item/on_edit_form_created>`
  of the item, if one is defined.


Then if the form is modal, shows it. Before showing the form the method applies 
options specidied in the 
:doc:`edit_options </refs/client/item/at_edit_options>`
attribute. 

After that the following events are triggered:

* :doc:`on_edit_form_shown </refs/client/task/on_edit_form_shown>`
  of the task.

* :doc:`on_edit_form_shown </refs/client/group/on_edit_form_shown>`
  of the group that owners the item, if one is defined for the group.

* :doc:`on_edit_form_shown </refs/client/item/on_edit_form_shown>`
  of the item, if one is defined.

The following event handler, defined in a task client module, will be executed
for every item. It uses 
:doc:`create_inputs </refs/client/item/m_create_inputs>` see 
(:doc:`Data-aware controls <data_controls>`)
method to create inputs for item fields and assigns event handlers for
**Cancel** and **OK** buttons:

.. code-block:: js

    function on_edit_form_created(item) {
        var input_options = {
                col_count: 1
            };
        item.edit_options.width = 560;
        if (item.init_inputs) {
            item.init_inputs(item, input_options);
        }
        item.create_inputs(item.edit_form.find(".edit-body"), input_options);
        item.edit_form.find("#cancel-btn").on('click.task', function(e) {
            item.cancel_edit(e);
        });
        item.edit_form.find("#ok-btn").on('click.task', function() {
            item.apply_record();
        });
    }

The 
:doc:`close_edit_form </refs/client/item/m_close_edit_form>` 
method for an edit form works the same way as 
:doc:`close_view_form </refs/client/item/m_close_view_form>` 
method a view form, except insted of the on_view_form_close_query 
it triggers on_edit_form_close_query events.

The following event handler, defined in a task client module, will be triggered 
when user clicks on the close button in the upper-right corner of an edit form.
And if a record is changing and modified, ask user whether to save 
changes, cancel changes or cancel operation:

.. code-block:: js

    function on_edit_form_close_query(item) {
        var result = true;
        if (item.is_changing()) {
            if (item.is_modified()) {
                item.yes_no_cancel(task.language.save_changes,
                    function() {
                        item.apply_record();
                    },
                    function() {
                        item.cancel_edit();
                    }
                );
                result = false;
            }
            else {
                item.cancel();
            }
        }
        return result;
    }

