Intro

This example is similar to Batch editing example with ability to save rich styles and rich objects like media/image files, hyperlinks, etc

Multiple records and styles are added, updated and deleted locally in grid with ability to undo and redo any number of times.

All the changes are committed to the server in a single transaction.

Server returns the updated rows along with primary key values (Product ID) for new inserted rows.

Table structure

CREATE TABLE Product (
    ProductID INT PRIMARY KEY,                 -- int → INT
    ProductName NVARCHAR(255) NOT NULL,         -- string → NVARCHAR
    QuantityPerUnit NVARCHAR(255) NULL,         -- string → NVARCHAR
    UnitPrice DECIMAL(18, 2) NULL,              -- decimal → DECIMAL(precision, scale)
    UnitsInStock SMALLINT NULL,                 -- short → SMALLINT
    UnitsOnOrder SMALLINT NULL,                 -- short → SMALLINT
    ReorderLevel SMALLINT NULL,                 -- short → SMALLINT
    Discontinued BIT NOT NULL,                  -- bool → BIT

    pq_cellattr NVARCHAR(MAX) NULL,             -- extra fields for rich editing
    pq_cellprop NVARCHAR(MAX) NULL,
    pq_cellstyle NVARCHAR(MAX) NULL
);

Post variables ( Request )

Grid posts a consolidated list ( in saveChanges function in our example ) to the server irrespective of the server side environment.

This list is obtained by API call grid.getChanges({ format: 'byVal' })

This list is an object comprising of 3 further lists.

list: {
    addList: [
        {field1: value1, field2, value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }, 
        {field1: value1, field2, value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }
        ...
    ],
    deleteList: [{id: 10}, {id: 29},....],
    updateList: [
        {id: 3, field1: value1, field2, value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }, 
        {id: 7, field1: value1, field2: value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }, 
        ...
    ]
}

id is the primary key name of records which is ProductID in our example.

Open your browser developer network console to see the log of sample request and response.

Server side ( Response )

Server side processes the received list and sends it back as response in this format.

Difference between request and response lies in addList in which id of the new rows are added by server side code.

Repetition of records in other lists serve as confirmation to grid.commit() method that the records were processed successfully by the server.

list: {
    addList: [
        {id: 1000, field1: value1, field2, value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }, 
        {id: 1001, field1: value1, field2, value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }
        ...
    ],
    deleteList: [{id: 10}, {id: 29},....],
    updateList: [
        {id: 3, field1: value1, field2, value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }, 
        {id: 7, field1: value1, field2: value2, pq_cellattr:{...}, pq_cellprop:{...}, pq_cellstyle:{...} }, 
        ...
    ]
}