Saving data from slickgrid

Question

Can someone tell me how to identify the rows that I added or edited / updated in slickgrid. I am trying to save data in DB using jQuery AJAX. and I use the dataview option. I need to save / update only those lines that were recently added / updated.

Thanks in advance.

Answer 1

First of all, you need to make sure that each row has been initialized with a unique identifier on the server side (for example, the value of the primary key in the row from the database).

Then you can use the grid.onAddNewRow event as follows

var editedRows = {}
grid.onAddNewRow.subscribe(function(e, args) {
            var item = args.item;
            editedRows[item.id] = item;
        });

, editedRows . PHP dvs.

: , http://mleibman.github.com/SlickGrid/examples/example3-editing.html, slickgrid.

Answer 2

onCellChange .

grid.onCellChange = function (row, col, dataRow) {
   //  enter your code here
}

(, col) - , dataRow .

Answer 3

, , ,

fbuchinger,

, ,

    //#region standard set of options and vars always there

    var grid;
    var data = [];
    var columns = [];
    var editedRows = []; //array to hold all changes 

    var options = {
        editable: true,
        enableAddRow: true,
        enableCellNavigation: true,
        asyncEditorLoading: false,
        autoEdit: true ,
        showFooterRow: true,
    };

    var checkboxSelector = new Slick.CheckboxSelectColumn({
        cssClass: "slick-cell-checkboxsel"
    });

    columns.push(checkboxSelector.getColumnDefinition()); // check box first
    // define columns
    columns.push(
        { id: "ID", name: "ID", field: "id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, focusable: false },
        { id: "Name", name: "Name", field: "name", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, minWidth: 70, sortable: true, toolTip: "Full Name" },
        { id: "IsActive", name: "Is-Active", field: "IsActive", width: 120, cssClass: "cell-title", editor: Slick.Editors.Checkbox, formatter: Slick.Formatters.Checkmark, validator: requiredFieldValidator });

   //#endregion
    //#region using data part
    $(function () {
        // get data
        $.getJSON('/acActivity/getAcActivityList', function (Resultdata) {
            data = Resultdata;               
            grid = new Slick.Grid("#SlickGrid", data, columns, options);

            grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));

            // add plug ins
            grid.registerPlugin(new Slick.AutoTooltips({ enableForHeaderCells: true }));
            grid.registerPlugin(checkboxSelector);
            var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);


            grid.onAddNewRow.subscribe(function (e, args) {

                var item = args.item;
                //  create an id for new lines and items 
                var id = Math.random * 10000 * -1;
                item.id = id;
                editedRows.push(item);

                grid.invalidateRow(data.length);
                data.push(item);
                grid.updateRowCount();
                grid.render();
            });

            grid.onCellChange.subscribe(function (e, args) {

                // only add after last column in the row
                if (args.cell == args.grid.getColumns() - 1)
                    editedRows.push(args.item);


            });

        }).fail(function () {
            alert('Data retrieval Error');
        });

        //#region send data back t oserver
        $('#Savebtn').click(function () {
            console.log(editedRows);

            var UpdatedRows = JSON.stringify({ 'acActivityed': editedRows });
            console.log(UpdatedRows);

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/acActivity/Edit",
                traditional: true,   //must be tru for arrray to be send 
                data: { 'arrayOfValues': UpdatedRows },
                dataType: "json",
                success: function (data) {
                    // here comes your response after calling the server
                    alert('Suceeded');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("error : " + jqXHR.responseText);
                }
            });
        });
        //#endregion

        //#region deleted all selected
        $('#DeleteSelectedbtn').on('click', function () {
            if (confirm("Are you sure to delete All Selected ?????")) {
                var selectedData = [];
                 var selectedIndexes;

                    selectedIndexes = grid.getSelectedRows();
                    jQuery.each(selectedIndexes, function (index, value) {
                        selectedData.push(grid.getDataItem(value).id);
                    });
                    console.log(selectedData);
                    var SelectedIds = selectedData.join(',') ;
                    console.log(SelectedIds);
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/acActivity/DeleteSelected",
                    data: JSON.stringify({ "ids": SelectedIds }),
                    dataType: "json",
                    success: function (data) {
                        grid.render();
                    },
                    error: function (err) {
                        alert("error : " + err);
                    }
                });
            }
        });
        //#endregion
    });

2 ,

• to save all changes in the form of mass saving (both edit and add new ones)
• remote selected button to delete selected rows