Shield UI: Insert row based on other row

Question

I am using Shield UI for my Java application. I created a custom insert window with "command" as follows:

toolbar: [
            {
                buttons: [
                    //{ commandName: "insert", caption: "Agregar Solicitud" }
                    { cls: "insertButton", caption: "Agregar Solicitud", click: insertRecord }
                ],
                position: "top"
            },

Code for insertRecord:

       function insertRecord(index) {
        //alert(JSON.stringify(index));
        index = 0;
        var grid = $("#grid").swidget(), 
            item = grid.dataItem(index);

        initializeWindowWidgets();
        editedRowIndex = index;

        $("#solId").swidget().value(item.solId);
        $("#atmid").swidget().value(item.atmid);
        $("#fechaAbastecimiento").swidget().value(item.fechaAbastecimiento);
        $("#cargar").swidget().checked(item.cargar);
        $("#emergencia").swidget().checked(item.emergencia);
        $("#solId").swidget().enabled(true);
        $("#atmid").swidget().enabled(true);
        $("#fechaAbastecimiento").swidget().enabled(true);
        $("#cargar").swidget().enabled(true);
        $("#emergencia").swidget().enabled(true);
        $("#save").swidget().enabled(true);
        $("#window").swidget().visible(true);
        //$("#window").swidget().center();
    }

function initializeWindowWidgets() {
        $("#window").shieldWindow({
                position: { left: 500, top: 200 },  
                width: 320,
                height: 360,
                title: "Insertar abastecimiento",
                modal: true,
                visible: false
            });
        $("#solId").shieldNumericTextBox({
        });
        $("#atmid").shieldTextBox({
        });
        $("#fechaAbastecimiento").shieldDatePicker({
        });
        $("#cargar").shieldCheckBox({
        });
        $("#emergencia").shieldCheckBox({
        });
        $("#save").shieldButton({
            events: {
                click: function (e) {
                    var grid = $("#grid").swidget(),
                        editedItem = grid.dataSource.edit(3).data;
                    editedItem.solId = $("#solId").swidget().value();
                    editedItem.atmid = $("#atmid").swidget().value();
                    grid.saveChanges();
                    $("#window").swidget().close();
                }
            }
        });

Also I can get the row data when I select a row using:

selectionChanged: function (e) {

                            var selected = e.target.contentTable.find(".sui-selected");

                            if (selected.length > 0) {
                                    message.innerHTML = selected.get(0).innerHTML;
                            }
                            else {
                                     message.innerHTML = "";
                            }
                    }

Finally I know how to call a service for example:

       $("#grid").shieldGrid({
        dataSource: {
            events: {
                error: function (event) {
                    if (event.errorType == "transport") {
                        // transport error is an ajax error; event holds the xhr object
                        alert(JSON.stringify(event)); 
                        alert("transport error: " + event.error.statusText);
                        // reload the data source if the operation that failed was save
                        if (event.operation == "save") {
                            this.read();
                        }
                    }
                    else {
                        // other data source error - validation, etc
                        alert(event.errorType + " error: " + event.error);
                    }
                },
            },
            remote: {
                read: {
                    type: "POST",
                    url: "abastecimientos/get",
                    contentType: "application/json",
                    dataType: "json"
                },
                modify: {
                    create: function (items, success, error) {
                        var newItem = items[0];
                        $.ajax({
                            type: "POST",

I need to do these tasks:

1. Select a row in my grid.
2. Press insert button.
3. Shown my custom window with the row's data.
4. Modify the data showed.
5. Press a save button and call a remote service in order to insert new row.

I know how to do these tasks separately but tasks 3 and 5 are not clear to me. I google all internet but I can't figure out how to do it.

Please I would appreciate any suggestion.

Juan

Answer 1

Did you check the following Shield UI demos?

3. Shown my custom window with the row's data

5. Press a save button and call a remote service in order to insert new row