How to get the row index of a row which I am manualy populating into an embedded cloudtable

pmarks906d

Hi. I have a cloudtable embedded onto my webpages. On one of the pages I use the cloudtables on-page interactive editor to manually populate rows into the table. By manipulating editor events I can help the user fill out some of the fields, which works nicely. Later in my javascript I can access all the rows and columns of the table and distribute the data across pages on my website. Works great! On one of my pages I have a javascript select dropdown into which I populate text from one of the columns. When I click on a select control Item it needs to index back into my table and populate my page data from the associated table row. I think it would be most efficient of I could populate the select dropdown value property with a row index so when I click on an item I can go straight to the row in the table and grab the data for that row. Is there an editor event which I can catch after hitting the submit button which would have access to the row index of the row being submitted? I know there are events I have used like editor.on('submitComplete', function ( e, data, action ) {}); which might have this access but I don't know enough about the function parameters to be able to derive the row index from within the function. In addition I could probably store all the row indexes into one of the columns in my table to make future accesses using javascript easier as well. Thanks.

allan

Loop over data.data to get the DT_RowId property that is part of the response. That is the row id which can be used with the DataTables row() method.

I honestly never thought anyone would go this deep into the DataTables and Editor APIs with CloudTables

Allan

pmarks906d

when you say "loop over data.data" I'm not sure what you mean. Is something like the following (which obviously doesn't yet work) even close? I'm not sure of the syntax.
editor.on( 'submitComplete', function ( e, data, action ) { let idx = data.data['DT_RowId']; console.log("idx="+idx); });
Note that my cloudtable does have a column which contains a unique sequence number for every row. It is defined as: Data Point Name="NewRowSequenceNumber" ID="dp-22" Column Name="ArtId". Preferably I would like to use that column as the row index. But I'm not sure how to tell datatables to use that column as the row index, and once again my knowledge of syntax is lacking.Thanks

allan

Preferably I would like to use that column as the row index

With CloudTables there is no way to do that. With DataTables and Editor, use the rowId and idSrc options respectively, but you can't set custom initialisation options in CloudTables.

when you say "loop over data.data" I'm not sure what you mean.

data.data is an array - so just a forEach or a simple for loop would do it.

Allan

pmarks906d

In the editor, the submitComplete event handler data.data length is 1, and data.data[0] is an object. But I don't know what kind of object it is. innerHTML, text, length, value are all undefined. Am not sure where else to find 'data.data' to iterated over. Following are various things I have tried inside the submitComplete handler, in order to find DT_RowId for the row just created in the editor. Following the code below is the console output when I run the code.
editor.on( 'submitComplete', function ( e, data, action ) { console.log("///// A ROW IN THE TABLE HAS BEEN CREATED IN THE EDITOR /////"); console.log("///// ENTERING submitComplete EVENT HANDLER /////////////////"); console.log("///// TRYING TO GET DT_RowId FOR THE ROW JUST ADDED /////////"); console.log("///// USING VARIOUS COMBINATIONS TO SEE IF SOMETHING WORKS //"); console.log("data="+data); console.log("data.length="+data.length); console.log("data.data="+data.data); console.log("data.data.length="+data.data.length); console.log("data.data.innerHTML="+data.data.innerHTML); console.log("data.data.text="+data.data.text); console.log("data.data.value="+data.data.value); console.log("data.data[0]="+data.data[0]); console.log("data.data[0].length="+data.data[0].length); console.log("data.data[0].innerHTML="+data.data[0].innerHTML); console.log("data.data[0].text="+data.data[0].text); console.log("data.data[0].value="+data.data[0].value); console.log("/////// EXITING submitComplete EVENT HANDLER //////////"); });
Console Output:
/////// WAIT FOR PAGE AND TABLES TO LOAD ////////// pjonly:140:9
pjonly start init page load timer runs till pageload or timeout ater 50 waits pjonly:866:13
DOM Content Is Loaded pjonly:148:11
doc readyState is complete pjonly:143:13
1st ct-ready caught tableTempNumColumns=48 pjonly:161:13
1st ct-ready from table2 pjonly:178:15
2nd ct-ready caught tableTempNumColumns=21 pjonly:197:13
2nd ct-ready from table pjonly:199:15
table init.dt 2 caught pjonly:206:17
table2 init.dt 1 caught pjonly:185:17
pjonly doc dom and tables ready pjonly:881:17
/////// PAGE AND TABLES ARE LOADED ////////// pjonly:884:17
///// A ROW IN THE TABLE HAS BEEN CREATED IN THE EDITOR ///// pjonly:941:19
///// ENTERING submitComplete EVENT HANDLER ///////////////// pjonly:942:19
///// TRYING TO GET DT_RowId FOR THE ROW JUST ADDED ///////// pjonly:943:19
///// USING VARIOUS COMBINATIONS TO SEE IF SOMETHING WORKS // pjonly:944:19
data=[object Object] pjonly:945:19
data.length=undefined pjonly:946:19
data.data=[object Object] pjonly:947:19
data.data.length=1 pjonly:948:19
data.data.innerHTML=undefined pjonly:949:19
data.data.text=undefined pjonly:950:19
data.data.value=undefined pjonly:951:19
data.data[0]=[object Object] pjonly:952:19
data.data[0].length=undefined pjonly:953:19
data.data[0].innerHTML=undefined pjonly:954:19
data.data[0].text=undefined pjonly:955:19
data.data[0].value=undefined pjonly:956:19
/////// EXITING submitComplete EVENT HANDLER //////////

pmarks906d

The webpage where I am using this is "https://philipmarksart.com/pjonly/" and the temporary password for the page is "pjonly2023".

pmarks906d

Figured out that the following code inside the submitComplete () event handler gives me an array of information about the new row added. Just need to figure out if one member of the array has the DT_RowId in it.
let d0 = data.data[0]; let txt0 = []; for (let y in d0) { txt0.push(d0[y]); }

pmarks906d

SOLVED: The first item (in the zero index) of the above array works as a unique and persistent id for the row in the table and is able to be used with the row() api. You take the identifier there, prepend it with a hash (#) sign, and put it in quotes within the call to row(). For example, An id of mine for one of my rows is "03ad810c-276". This is used in a call to row(...) as follows: row('#03ad810c-276'). this gives access to all the rows data using javascript.

allan

Hi - sorry I wasn't able to reply over the weekend. Yup, your solution looks spot on.

Allan