DataTable usage / synchro

[plalondeParticipant]

Took a look at this article and also a couple of posts on this forum, but I am still not sure I am using the data table the right way.

1- I have my own database manager, which I use to CRUD my data, everything is local, no remote server.
2- I have a page with 50% column layout, one side the grid, the other side a detailed view / form for corresponding rows data.

When creating a new record, I call the addRow method of the jqxDataTable, seems to work, I can see the row added in the grid and my datasource “addrow” method is also called, I then create the record in the database.

Until there, I think I have everything alright.

First question: What if the record is updated with a “createdDate” property by the database manager? I am supposed to access the “localdata” from the dataAdapter directly to update its new properties and then call bindData(), or I missed something from the API that I could use to do this? Using a call to updateRow?

Also, I have the same thing done for the update of a record, seems to work the first time, all subsequent calls, I get the updated record in the updateRow method of my dataAdapter, but the data is never refreshed on the screen. I use $(“myDataTable”).jqxDataTable.(“updateRow”, rowInx, myUpdatedRecord); Is the record somehow detached from the localdata and I then need to update it manually?

If I need to this manually, then what happens with filtering / sorting?

[plalondeParticipant]

I just found out about this post.

So I changed to use the jqxGrid instead. Just a comment, but this is confusing… jqxDataTable documentation shows lots of functionality event for a complex solution…

Anyway, the documentation suggests to refresh the grid when data changes, do I really want to refresh the whole thing even if the rowId is known in the addRow and updateRow?

[Peter StoevKeymaster]

Hi plalonde,

If something changes in your DB, you can either call “updateRow” or “setCellValue” to update a local row or cell or you can refresh the DataTable by calling its “updateBoundData” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[plalondeParticipant]

Still not clear to me what I should do.

var source =
        {
            localdata: [],
            datatype: "array",
            datafields:[
                {name: 'id', type: 'integer'},
                {name: 'code', type: 'string'},
                {name: 'client_code', type: 'string'},
                {name: 'system', type: 'string'},
                {name: 'bay', type: 'string'},
                {name: 'section', type: 'string'},
                {name: 'creation_date', type: 'string'},
                {name: 'client_id', type: 'string'},
                {name: 'priority', type: 'string'},
                {name: 'status', type: 'string'}
            ],
            id: "id",
            addrow: function (rowId, data, position, commit) {
                createInDatabase(data, function(updatedData){
                    commit(true);
                    // Need to update with updatedData.createdDate and not displayed in the grid (columns) but known by the datafields.
                });
            },
            deleterow: function (rowid, commit) {
                // NOT YET
            },
            updaterow: function (rowId, data, commit) {
                // NOT YET
            }
        };

        var gridDataAdapter = new $.jqx.dataAdapter(source);

Once commit() has been called, where is the “new row”? Since the object comming back from the success callback from the database is not the same, how do I fill the new data in? What if I want to propagate the whole new objects, that contains more than just the created date without refreshing the entire grid?

I get that I can call updateBoundData(), but this data is not yet in the grid, and what if this new row wouldn’t be shown, because of the sort / filter / paging?

Calling setCellValue() doesn’t seem to be an option to me, since I want to update the datasource “full” row / object

Wouldn’t be simpler to make a call to commit with the actual “refreshed” data?

[Peter StoevKeymaster]

Hi plalonde,

I don’t understand how you bind this widget. Do you use localData as in the posted code? How do you want to update a database when you bind the Grid to local data source. There’s no Database in that case. The addrow callback function is called by our widget when you call its addrow method. The “updaterow” callback function is called by our widget when you call “updaterow” method or “setcellvalue” method of the widget or the user manually changes a value in a cell or row. “deleterow” callback function is called by jqxDataTable when the “deleterow” method is called. In these callback functions you should synchronize the changed row with your Database. Usual approach is through jQuery Ajax call.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[plalondeParticipant]

It’s exactly what I do, thing is in the following sample:

CREATE TABLE IF NOT EXISTS [CUSTOMER] (
  [id]             INTEGER PRIMARY KEY AUTOINCREMENT,
  [licence_number] BLOB NOT NULL UNIQUE,
  [name]           VARCHAR(2) NOT NULL,
  [language]       VARCHAR(2) DEFAULT ('en'),
  [creation_date]  DATETIME   DEFAULT (DATETIME('now'))
);

Note that id and creation date are automatically generated

Once I’ve called addrow() on the grid with the customized form, it gets the language, name and licence number from the user, then the datasource addrow() is called. From this point, the data is inserted into the database, no mater how, it gets back with an updated id and created_date. I am still in the datasource addrow() callback. What do I do with my updated data? (id, creation date) How can I pass it in the datasource’s data so it gets it? Later, in the screen, a getRow() will be called from the grid, and then, all its data is required.

If the datasource corresponding entry is not updated, the grid knows only about the licence number, name and language, not the id and creation date.

[plalondeParticipant]

Finally got something done.

calling $.extend(data, updatedData) did what I needed.

[Author]

Posts