Jsgrid: Is there any function similar to insertTemplate and editTemplate for deleting rows?

[Theriodis]

In my archive variable_group.js I inserted the js-GRID database.

And in my archive main.js I declared it.

I want to perform some deleting actions inside the main.js but I don't know how to access the deleteItem function. Is there any way to do it? (So far for inserting and editing of column Name I successfully used insertTemplateand editTemplate.).

Here I have the codes of variable_group.js and main.js :

1. variable_group.js :

(function() {

    var total_variable_group_ids = 1;

    var variable_group = {

        loadData: function(filter) {
            return $.grep(variable_group.clients, function(client) {
                return (!filter.ID || client.ID.indexOf(filter.ID) > -1)
                    && (!filter.Name || client.Name.indexOf(filter.Name) > -1)
                    && (!filter.Display_name || client.Display_name.indexOf(filter.Display_name) > -1)
                    && (!filter.Order || client.Order === filter.Order)
                    && (!filter.Image || client.Image.indexOf(filter.Image) > -1)
                    && (filter.Buttons === undefined || client.Buttons === filter.Buttons);
            });
        },



        insertItem: function(insertingClient) {
            insertingClient.ID = total_variable_group_ids;
            this.clients.push(insertingClient);
            $("#GroupJson").html(JSON.stringify(this.clients));
            total_variable_group_ids++;
        },

        updateItem: function(updatingClient) {      
            $("#GroupJson").html(JSON.stringify(this.clients));
        },


        deleteItem: function(deletingClient) {
            var clientIndex = $.inArray(deletingClient, this.clients);
            this.clients.splice(clientIndex, 1);
            $("#GroupJson").html(JSON.stringify(this.clients));
        }

    };


    variable_group.clients = [];

    window.variable_group = variable_group;



}());

1. main.js :

groupButton:function(){

        $( "#VariableGroupGrid" ).dialog({minWidth: 900, minHeight: 500});
        $("#VariableGroupGrid").jsGrid({
                height: "100%",
                width: "70%",
                filtering: true,
                editing: true,
                inserting: true,
                sorting: true,
                paging: true,
                autoload: true,
                pageSize: 15,
                pageButtonCount: 5,
                onItemUpdating: function(args) {
                                          previousValue = args.previousValue;
                                          },
                deleteConfirm: "Do you really want to delete the row?",
                controller: variable_group,
                fields: [
                    { name: "ID", align: "center", width: 10 },
                    { name: "Name", 



                    /*INSERT SELECT BOX*/
                    insertTemplate: function() {

                    //Access the current text field
                    var variableGroupInsertResult = jsGrid.fields.text.prototype.insertTemplate.call(this);

                    //When the value of this textfield is changed pass it to the Process Variables grid
                    variableGroupInsertResult.on("change", function() {

                    //Get the value of this text field
                    var selectedInsertValue = variableGroupInsertResult.val();

                    //Declare the Select option
                    var selectOption = {Name: selectedInsertValue , Id: numberOfID};

                    //Push the Select option to the array of Select box
                    process_variables.group.push(selectOption);

                    //Increase the number of select option reference Id
                    numberOfID++;

                    });

                    return variableGroupInsertResult;
                    }, 

                    /*EDIT CONTROL*/
                    editTemplate: function(previousValue) {

                    /*Find all the Process Variables with Group value  the previous value and
                    **Replace the Process Variables Group previous  value with the new one  
                    */

                    //Access the current text field
                    var variableGroupEditResult = jsGrid.fields.text.prototype.editTemplate.call(this);

                    //When the value of this textfield is changed pass it to the Process Variables grid
                    variableGroupEditResult.on("change", function() {

                    //Get the edited value of this text field
                    var selectedEditValue = variableGroupEditResult.val();

                    for(var i = 0; i <process_variables.clients.length; i++) {
                        //alert(JSON.stringify(process_variables.clients[i].Group));
                        if (process_variables.clients[i].Group == previousValue){
                        process_variables.clients[i].Group = selectedEditValue; 
                        }

                    }

                    //Change the configuration of Process Variables Select box options
                    for(var j = 0; j<process_variables.group.length; j++){
                        if(process_variables.group[j].Name ==  previousValue) process_variables.group[j].Name =  selectedEditValue;
                    }

                    //Update the Process variables index div with new info 
                    $("#DataJson").html(JSON.stringify(process_variables.clients));

                    });

                    return variableGroupEditResult;
                    }, 

                    validate: { message: "Field Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 30 },
                    { name: "Display Name", validate: { message: "Field Display Name is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 50 },
                    { name: "Order", align: "center", type: "number", width: 15 },
                    { name: "Image", validate: { message: "Field Image is required", validator: function(message) { return message; } }, align: "center", type: "text", width: 40 },
                    { name: "Buttons", type: "checkbox", title: "Buttons", sorting: false, width: 10 },
                    { type: "control", width: 25 }
                ]
        });

        //Variable Group grid should open by default in “Add new” mode (like I have pressed the green + button)
        $("#VariableGroupGrid").find(".jsgrid-mode-button").click();

    },

[maurorulli]

take a look at:
https://github.com/tabalinas/jsgrid/issues/4

[Theriodis]

Thanks @maurorulli but it didn't work for me.
@tabalinas any idea please? Either how to find a similar function to insertTemplate/editTemplate for deleting, or how to access deleteItem(of archive variable_group.js) from file main.js .

Thank you both in advance
Dimitris

[tabalinas]

Not sure I understand the use case. insertTemplate and editTemplate is for display. deleteTemplate doesn't make sense, because item is removed.
I guess, you need to clarify what exactly you are trying to achieve. There is onItemDeleted callback, which you can use if need to handle deletion event.

[Theriodis]

OK. Now I understand the exact use of Template. I will explain to you exactly what I want.
I want when I delete a row:

1. To keep the previous value of this row(before deleting it, as I already do in editTemplate)
2. To compare it with the values of column Name from a different grid(as I already do in editTemplate for the records of the grid Process variables)
3. And if this value already exists in a record of the grid Process variables to replace the previous value with ""(As I already do in editTemplate).

Is onItemDeleted good for me? Could I get the previous value inside onItemDeleted?

Thank you very much

[maurorulli]

@Theriodis
onItemDeleted fires after item deletion. You have to use onItemDeleting, it fires before item deletion!

See doc

[Theriodis]

If I use :

//........................................................

inserting: true,
                sorting: true,
                paging: true,
                autoload: true,
                pageSize: 15,
                pageButtonCount: 5,
                onItemUpdating: function(args) {
                                          previousValue = args.previousValue;
                                          },
                onItemDeleting: function(args) {
                                          previousValue2 = args.previousValue2;
                                          alert(previousValue2);
                                          },
                deleteConfirm: "Do you really want to delete the row?",
                controller: variable_group,
                fields: [
                    { name: "ID", align: "center", width: 10 },

//...........................................................

I get undefinedfrom alert. I can't perform my control inside onItemDeleting if I can't get the previous value here. Am I missing something?

In editTemplate I could get the previous value from onItemUpdating and I was passing that value as an argument to the editTemplate.

Thank you for your so far help everyone.

[maurorulli]

try with:

args.item

[Theriodis]

Yes yes yes. Now I can get the value of my previous value.

I won't close the issue until I finish my controls, in case I need you again but I really thank you.

[Theriodis]

Consider the issue closed.It works perfect. I want to thank you both @maurorulli and @tabalinas very much.