I have a table with nested datatree, I need to collapse particular rows but can't seem to get the row instance of the nested row. I can use the index of the top-level rows to do table.getRow(1) but table.getRow(2) fails. I can get the row instance of row 68 which is the next top-level row, so it seems I can't get row(2) because it is a child of row(1). is there an alternate way to get child rows? table.getRow(1).getRow(2)?
Check documentation check this jsfiddle and check console
use `var children = row.getTreeChildren();`
// Get all rows
const allRows = table.getRows();
console.log('allRows',allRows);
const firstRow = table.getRow(1);
console.log('firstRow',firstRow);
const firstRowChildren = firstRow.getTreeChildren();
console.log('firstRowChildren',firstRowChildren);
$('#toggle').click(function(){
firstRow.treeToggle();
});
Related
I have a database from which data is coming into a QTableWidget. The table in the database has the following Columns,
ID (Primary key, auto-increment value)
Name
Location
The QTableWidget has the following columns (that I have added)
ID (this column, I have hidden. and it contains the value of "ID" column from the Database Table)
Sr # (Represents the Row Number of the table)
Name (Contains "name" from the database table)
Location (Contains "Location from the database table)
Actions (Contains a Delete Button for that Row)
By hidden, I mean to say that I have made this column hidden using the folliwng command,
self.ui.table.setColumnHidden(0, True);
This is how I am populating my QTableWidget and creating a Delete Function,
def get_data(self):
mycursor = self.DB.cursor()
Subquery = "select id, name, location "
Subquery += " from tbl_person"
mycursor.execute(Subquery)
numcols = len(mycursor.fetchall()[0])
mycursor.execute(Subquery)
numrows = len(mycursor.fetchall())
self.ui.table.setRowCount(numrows)
self.ui.table.setColumnCount(numcols+2)
mycursor.execute(Subquery)
tablerow = 0
for row in mycursor.fetchall():
layout = QHBoxLayout()
layout.setContentsMargins(0, 0, 0, 0)
layout.setSpacing(0)
delete_button = QPushButton("Delete Data")
delete_button.clicked.connect(self.executeDeleteFunction)
# delete_button.setStyleSheet(delete_push_button) -> Only for styling
self.ui.table.setItem(tablerow, 0, PySide2.QtWidgets.QTableWidgetItem(str(row[0])))
self.ui.table.setItem(tablerow, 1, PySide2.QtWidgets.QTableWidgetItem(str(tablerow+1)))
self.ui.table.setItem(tablerow, 2, PySide2.QtWidgets.QTableWidgetItem(str(row[1])))
self.ui.table.setItem(tablerow, 3, PySide2.QtWidgets.QTableWidgetItem(str(row[2])))
self.ui.table.setCellWidget(tablerow, 4, delete_button)
tablerow += 1
self.ui.table.setColumnHidden(0, True)
#self.ui.registered_table.horizontalHeader().setSectionResizeMode(PySide2.QtWidgets.QHeaderView.Stretch)
self.ui.table.resizeColumnsToContents()
def executeDeleteFunction(self):
self.person_id = self.ui.table.selectionModel().selectedIndexes()[0]
self.person_id = self.person_id.row()
mycursor = self.DB.cursor()
sql = "delete from tbl_person where id = %s"
val = (id, )
mycursor.execute(sql, val)
print("Deletion Successful")
On the Deletion Function, what this code does is basically gets the value of the **Sr # ** Column from the QTableWidget and deletes the data according to that, i.e. it is getting me the value from the visible first column and not the actual first column. But, I want the data from the "ID" column of the QTableWidget which is hidden
I tried to look up on how to get the value from the first hidden column on the QTableWidget and ended up with this link: How to get data from hidden 'id' column in QtableWidget
This apparently solves my issue but I can not seem to make it work for my code. I don't want to retrieve values of multiple Rows but only of one row so how do I do this (as I am only deleting one row. But in the question mentioned, I believe that it is getting data from multiple rows due to that for each loop)?
Moreover, I tried to find help regarding the functionality of sibling function (which is provided in the answer of above question) however I could not find any good resource on this function (i.e. how to use this, or some practical example and etc.)
I tried the following with Sibling function to obtain the value of first hidden column of the Selected Row but it did not work,
self.value = self.table.selectedItems()[0]
self.value = sibling(self.value.row(), 0)
There are some conceptual problems with the given code.
First of all, the QtSql module should be preferred instead of artificially creating a model. For basic tables, QSqlTableModel is fine enough, while for custom queries, QSqlQueryModel is a good choice.
Now the problem is that UI-based selection is always based on visible items: if you select a row in a view that has hidden columns, you will not get the hidden indexes that belong to those columns.
In order to get the indexes (as in QModelIndex) of hidden columns on a table widget, the only way is the same for a table view: you need to access the model and get the index for the row, or you get the actual model index and then get the sibling (which is conceptually the same, as the underlying function does):
item = self.table.selectedItems()[0]
index = self.table.indexForItem(index)
firstRowIndex = index.sibling(index.row(), 0)
sqlIndex = firstRowIndex.data() # might be a string
Note that you can also use siblingAtColumn():
firstRowIndex = index.siblingAtColumn(0)
That's because when you create QTableWidget items, you're actually creating a new model, and the row for that model doesn't reflect the actual "row" of that index in the source model; items in the second row will return 1 for row(), even if their actual row is different, and that's because that item has been added as second to the table widget, since it's the second item in the query.
So, the solution is that you either get the incremental row value for the first column index sibling, or you use one of the predefined Sql models.
For simple models, the latter solution is fine enough, but if you need more complex models, the first is certainly more accurate and reliable.
I'm using the following code to get the details of a particular row.
var data = cell.getRow().getData();
But the results are not in the order of the column arrangement.
How to get the row's data with the column order maintained?
I do not know any function to retrieve the data in the defined order directly but you can use the below lines of code as a workaround:
var colsOrder = []; // The ordered columns
cell.getRow().getTable().getColumns().forEach(function(rec){
colsOrder.push(rec.getField());
});
var val = []; // The ordered values
colsOrder.forEach(function(r){
val.push(cell.getRow().getData()[r]);
});
I hope this will help !
For my project, I need to add new child rows to parent rows in a datatree based on user submitted form data. I wasn't able to find an example of how to do this in the documentation. Is this possible using the addRow({...}) function? How would I declare which parent to add the child row? Or would I need to build out a custom function which inserts the new row into the table JSON object and redraw the table?
Thanks for your help!
The solution I used is to add new row objects to a copy of the _children array of the parent row and then send an update to the parent row. To do this, you need to find the parent row, get it's data (which will include the _children array of child row objects), add the new row of data to _children, and update the parent row data in the data table.
$("#add-child-row").click(function(){
//Get values for child row form fields
var childFields = $("#child-form").serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
var newRow = {
name: childFields.name,
location: childFields.location,
gender: childFields.gender,
col: childFields.color,
dob: childFields.dob,
};
//Find row to add child
//searchRows() returns array
//In my case, I am only expecting one matching row so use index 0
var parentRow = table.searchRows("name","=","Oli Bob");
//Get data for the parent row so we can update it's _children array
var tempParentRowData = parentRow[0].getData();
//Add new row to children array
tempParentRowData._children.push(newRow);
//Update data table row with new children array
parentRow[0].update({_children:tempParentRowData._children});
});
I don't know how well this would work if you are expecting to have a huge number of children rows. If there is anything flawed with the above solution or a better solution out there, I would love to see it.
I have a two dimensional array.
Like for example :
viewScope.myTest = [];
viewScope.myTest.push(["row1col1", "row1col2", "row1col3"]);
viewScope.myTest.push(["row2col1", "row2col2", "row2col3"]);
etc
In my combobox I would like to show all the values of column3.
How can I do this ?
To iterate through all 3rd Columns of the array, you would need to do something like this:
// Creating the Structure you already got
var viewScope = {
myTest: []
}
viewScope.myTest.push(["row1col1", "row1col2", "row1col3"]);
viewScope.myTest.push(["row2col1", "row2col2", "row2col3"]);
viewScope.myTest.push(["row3col1", "row3col2", "row3col3"]);
// Get the Combobox by ID
var myCombobox = document.getElementById("myCombo");
// Iterate through all options of myTest
for (var i in viewScope.myTest)
{
// Create a new Option for the Select
var option = document.createElement("option");
// Add the 3rd Columns as Text
option.text = viewScope.myTest[i][2];
// Add the Option to the Select
myCombobox.add(option);
}
Why?! - you are creating a 2 Dimensional Array. it works like: Array[row][col] from your example.
Because those are indexes, they start with 0 and count up to length-1.
Please take a look at: JSFiddle Link
Contrary to what you say, you don't have a 2-dim array. It's a 1-dim array that contains 2 1-dim arrays. To get only the values for column 3, you have to create a new array:
var col3values= [];
for(var i in viewScope.myTest)
if(viewScope.myTest[i].length>=3)
col3values.push(viewScope.myTest[i][2];
on demo found function deleteRows
$('#DeleteAllButton').button().click(function () {
var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');
$('#StudentTableContainer').jtable('deleteRows', $selectedRows);
});
now I work on child table and can't get row data form it I don't know how to add class for identity child row id
can any one can advance me
You need to change your selector to point to your child table selected rows: the line
var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');
$('#StudentTableContainer').jtable('deleteRows', $selectedRows);
is currently trying to get the selected rows from your parent table, and delete them from your parent table too. So you have to change 2 things: the way you get the selected rows, and the table where you delete them.
Can you try with this one to get the selected rows:
var selectedRows =$('.jtable-main-container .jtable .jtable-row-selected');
And so your delete button should do the following:
$('#DeleteAllButton').button().click(function () {
var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');
$('.jtable-main-container .jtable').jtable('deleteRows', $selectedRows);
});
I'm not 100% sure of the child table selection, but you can give it a try..