Slickgrid - how to get the value of edited cells?

Question

I'd like to make my code be able to update database table immediately when the cell is changed. However, I can get the value of the changed cell whereas not the data of those of next cell.

Methods I have tried already without success:

grid.onCellChange.subscribe(
    function (e, args) {
        //alert(data[args.row][grid.getColumns()[args.cell].field]);
        //alert(grid.getColumns()[args.cell].name);
        //alert(args);
        <%
            updateDatabase("UPDATE table1 "+
                           "SET "+
                           "  col1="+data[args.row][grid.getColumns()[args.cell].field]+" "+
                           "WHERE "+
                           "  col2="+???)") 
        %>
    }
);

How to get the value of the next column that I can use in the where clause ?

score 6 · Accepted Answer · edited May 23 '17 at 10:28

Addressing your problem:

If you check out the official SlickGrid Editing demo, you can try the following to get a basic understanding how grid editing works. Open your JS debugger and subscribe to the grids onCellChange event using the following command:

grid.onCellChange.subscribe(
    function (e,args) {
        console.log('row: ' + args.row + ' cell: ' + args.cell)
    });

The grid's onCellChange events args argument object contains two properties:

row
cell

Now edit any of the cells and leave the just edited cell. It's important since this event will only fire on blur event.

In the console log you will see for instance:

row: 6 cell: 1

Addressing your data object:

The only way I found how could you address your data source is in a hackish way only using eval(). For further information about object property accessing you can check this answer.

A bit from the Javascript jargon:

The actual eval() command to address your data object with the given fieldname or property name is:

eval('data[args.row]'+'.'+columns[args.cell].field)

Simplified it will evaluate the JavaScript code represented as a string, in this SlickGrid Editing example it will become as if you would write:

data[6].title

So the proof of concept code is:

grid.onCellChange.subscribe(
    function (e,args) {
        console.log(eval('data[args.row]'+'.'+columns[args.cell].field))
    });

This will return you the value of the current edited cell. For instance changing args.cell+1 will return you the next cell value from the data source of your grid. Of course you should always check the columns.length property to keep the column index key inside of array bounds.

Regarding your idea about the updateDatabase call: why do you want to update the database after every time this event gets fired? I suggest you to take a look at the official Composite editor demo which has an edit form.

The other thing I would strongly advise is that you not write server side or code behind code directly into the javascript code block. For example, you could make it use an ajax post.

The reason I recommend this is because then you are going to have separated functions with separated responsibilities. Just by adhering to this principle in itself could lead you to have a cleaner code, also you only give one reason to change. Also it may help testing your functions much easier.

Slickgrid - how to get the value of edited cells?

1 Answers1