Get back modified data

[tbettinazzi@axioma.it]

In the Grid I can bind my data to several sources (Json, Xml etc…) but what happen when data are chanded by the user in editable cells ?

Is there an infrastructure to update back data on the model ?

Tks

[svetoslav_borislavov]

Hi,

You may use the endEdit event to update the data.
Here is an example of updating the initial data array: https://codepen.io/svetoslavb04/pen/jOdOJOr

I hope this helps!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Tks for your kindly help.

But I also need to know if there’s an integrated infrastructure to send back data to the server or I should use the jquery ajax.

Tks

[Markov]

Hi,

You can look at https://www.htmlelements.com/demos/grid/server-side-cell-edit/. The sample shows how to use the Grid API to update data on a backend.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

I saw this example but in it the “server” is already a javascript client server, in the same layer of the client (if I understand right).

Is there something to break the wall and update the data model on a remote server ?

Tks

[Markov]

Hi,

The example shows how you can send details to a server and then send back the server result to the Grid via a callback function. The important part of the example is the code below with the synchronization of the Grid with the data model. In your case, here you should make AJAX calls to a server and update the Grid on success.

  virtualDataSource: function (resultCallbackFunction, details) {
                    if (details.action === 'dataBind') {
                        // inits the demo server.
                        window.demoServer = DemoServer();
                        const result = window.demoServer.getData(details);
                        // logs the data below the component.
                        LogData(result.data);
                        resultCallbackFunction({
                            dataSource: result.data,
                            lastId: result.lastId,
                            virtualDataSourceLength: result.length
                        });
                    }
                    else {
                        const result = window.demoServer.getData(details);
                        // logs the data below the component.
                        LogData(result.data);
                        resultCallbackFunction({
                            dataSource: result.data,
                            lastId: result.lastId,
                            virtualDataSourceLength: result.length
                        });
                    }
                },

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

I applied the suggestion You posted in the reply #109030 and it works but in a special case : when I modify the field and then I click a button outside the grid, the endEdit doesn’t fire and then data are not saved.

How can I avoid such problem ?

Tks

• This reply was modified 11 months, 1 week ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

I added

<span style=”background-color: #ffffff; padding: 0px 0px 0px 2px;”><span style=”color: #000000; background-color: #ffffff; font-family: ‘Consolas’; font-size: 10pt; white-space: pre;”> <span style=”color: #268bd2;”>document</span>.<span style=”color: #268bd2;”>activeElement</span>.<span style=”color: #268bd2;”>blur</span>();</span></span>

to the operation done by the button but nothing changed.

May you help me ?

Tks

[tbettinazzi@axioma.it]

Sorry for the mispelling.

I added document.activeElement.blur() and it didnt work.

 

[Markov]

Hi,

In case you have an active subscription, please send an email to support@jqwidgets.com and we can take a look at the provided code.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

I’m waiting for the renewal of the support (it was approuved for the next year budget).

Looking a little deeper I saw the editEnd event is executed, in effect, but only after the onClick of the button : if I submit the form in onClick of the button data are sent incorrectly because editEnd was not still fired.

In small testcase I prepared  You’ll see in  simplest way I found the onClick is fired before the editEnd.

I simply modified the grid/cell-editing example adding a little code as You can see below.

Could You help me to solve that issue ?

Tks

 
<div><!DOCTYPE html></div>
<div><html xmlns=”http://www.w3.org/1999/xhtml”></div&gt;
<div><head></div>
<div>    <title>Grid Cell Editing Demo</title></div>
<div>    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /></div>
<div>    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /></div>
<div>    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ /></div>
<div>    <link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” /></div>
<div>    <link rel=”stylesheet” type=”text/css” href=”../../styles/demos.css” /></div>
<div>    <link rel=”stylesheet” type=”text/css” href=”styles.css” /></div>
<div></div>
<div></head></div>
<div><body class=”viewport” onload=”carrelloInit()”></div>
<div>    <script></div>
<div>function carrelloInit() {</div>
<div>const grid = document.getElementById(‘grid’);</div>
<div>    console.log(“Fatto 1”);</div>
<div>    grid.addEventListener(‘endEdit’, function (event) {</div>
<div>    const detail = event.detail,</div>
<div>        id = detail.id,</div>
<div>        dataField = detail.dataField,</div>
<div>        row = detail.row,</div>
<div>        column = detail.column,</div>
<div>        cell = detail.cell,</div>
<div>        data = detail.data,</div>
<div>        value = detail.value;</div>
<div>        console.log(“Modified ” + dataField + ” / ” + id + ” / ” + value);</div>
<div>});</div>
<div>}</div>
<div>function confermaCarrello() {</div>
<div>    console.log(“Carrello confermato”)</div>
<div>}</div>
<div></script></div>
<div><div class=”demo-description”></div>
<div><h1>Grid Cells Editing</h1></div>
<div>Click on any cell to begin edit its value. To confirm the changes, press ‘Enter’ or click on another cell or outside the Grid. To cancel the changes, press ‘Escape’.</div>
<div></div></div>
<div>    <smart-grid id=”grid”></smart-grid></div>
<div>    <button id=”b1001105″ class=”cfg-button cfg-button-floating” type=”button” role=”button” onclick=”confermaCarrello();”><span class=”cfg-button-text”>Annulla</span></button></div>
<div>    <!– scripts –></div>
<div><script src=”../../../common/data.js”></script></div>
<div>    <script src=”../../../source/modules/smart.grid.js”></script></div>
<div><script src=”../../../source/modules/smart.button.js”></script></div>
<div><script src=”index.js”></script></div>
<div></body></div>
<div></html></div>
 

[tbettinazzi@axioma.it]

No further help ?

Tks

[admin]

Hi,

The Grid has endEdit method which triggers the end of edit operation. You can call this method within the button’s on click event handler.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts