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..
Related
this one should be simple for tabulator experts (but not for me)...
i have a tabulator table. I've made one column, "edit" clickable as shown below. it works fine and returns the value of the cell i clicked. HOWEVER, that's not what i need. I need to get the value of ANOTHER cell in the same row (column "transactionID"). I know how you would do it in other languages, just use x and y values to move over 3 columns and get the value. but how is it done in tabulator? by the cloumn name? I can't find any example code on how to accomplish this.
This is the snippet from my tabulator init :
{title:"edit" , name:"edit", formatter:myformatter, cellClick:function(e, cell){alert("cell clicked - " + cell.getValue())}},
i just need to make it return value for "transactionID" instead of "edit"
and before anyone asks, no, i can't just make "transactionID" clickable. I need the clickable cell to be separate.
thanks for your help!
ok so since i got no answers to this question, i slogged thru and figured it out myself eventually. To save others time who run into this in the future, i am posting how i solved it. code with comments below :
// this goes in your tabulator column definitions. In my example, "edit" is a column
with an image button that on clicking, redirects to another page depending on what cell was clicked
{title:"" , name:"edit", formatter:openIcon, headerSort:false, cellClick:function(e, cell){
var re = cell.getRow(cell); // get the row of the cell that was clicked
var thenum = re.getData().id; // gets the value of column "id" in the same row
var theurl = "editTransaction.php?trans="+thenum; // creates my url
console.log(theurl); // perform whatever action you need to do. replace this.
}},
If you are using react-tabulator and you want to access some column data to perform a specific action ,here is the snippet for your help.
import { reactFormatter } from "react-tabulator";
// your React Component to use in a cell
function CustomFormatter(props: any) {
const rowData = props.cell._cell.row.data;
return <a onClick={() => alert(rowData.customField)}{cellData.customField }</a>;
}
const columns = [{ title: 'Custom', field: 'custom', align: 'center', formatter: reactFormatter(<CustomFormatter />) },
]
I want to display a table with data coming from different sql tables, like for a single table component, some columns of the table come from one sql query and other column from next query. Using join queries or sub queries will display wrong data. In table component there is only one option for selecting the data-source.
Is there any way to do this?
With Javascript, in the pre-Execution function of the table component, you can change the datasource, but not for single columns.
You can hide some columns in the table component if you want.
How to change the datasource with Javascript
I created a Simple Parameter: refresh_table, and it contains the datasource of the table: sql_Empty, to show an empty table.
I created some Select components and when you choose a value and then you click on the Button component (a search button), the search button changes the value in the simple parameter 'refresh_table' with a new datasource based on the value in the select component: sql_A, sql_B.
function a() {
var a = this.dashboard.getParameterValue('selectA');
var b = this.dashboard.getParameterValue('selectB');
if (a === 'ciao' && b === 'ciao') {
this.dashboard.fireChange('refresh_table', 'sql_A');
} else {
this.dashboard.fireChange('refresh_table', 'sql_B');
}
}
In the preExecution function of the table component, I wrote this function to change the datasource based on the parameter value of refresh_table.
function b() {
this.chartDefinition.dataSource = this.dashboard.getParameterValue('refresh_table');
}
I think you can do it with Pentaho Data Integration/Kettle/Spoon and then you can pass the results to the table component, but I don't know how.
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();
});
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 web application. And I am using coded ui to write automated tests to test the application.
I have a dropdown with a text box. Which on entering values in the textbox, the values in the dropdown gets filtered based on the text entered.
If I type inside textbox like 'Admin', I will get below options like this:
And I need to capture the two options displayed.
But using IE Developer tool (F12), I am not able to capture the filtered options, because the options that are displayed do not have any unique property (like this below). And the options that are NOT displayed have a class="hidden" property
Any way to capture the elements that are displayed by applying some kind of filter like 'Select ui elements whose class != hidden'
Thanks in advance!!
HI please try below code will it works for you or not.By traversing all those controls that have class ="hidden"
WpfWindow mainWindow = new WpfWindow();
mainWindow.SearchProperties.Add(HtmlControl.PropertyNames.ClassName, "hidden");
UITestControlCollection collection = mainWindow.FindMatchingControls();
foreach (UITestControl links in collection)
{
HtmlHyperlink mylink = (HtmlHyperlink)links;
Console.WriteLine(mylink.InnerText);
}
I'm not sure there is a way to do it by search properties, but there are other approaches.
One way would be to brute force difference the collections. Find all the list items, then find the hidden ones and do a difference.
HtmlControl listControl = /* find the UL somehow */
HtmlControl listItemsSearch = new HtmlControl(listControl);
listItemsSearch.SearchProperties.Add(HtmlControl.PropertyNames.TagName, "li");
HtmlControl hiddenListItemsSearch = new HtmlControl(listControl);
hiddenListItemsSearch.SearchProperties.Add(HtmlControl.PropertyNames.TagName, "li");
hiddenListItemsSearch.SearchProperties.Add(HtmlControl.PropertyNames.ClassName, "hidden");
var listItems = listItemsSearch.FindMatchingControls().Except(hiddenListItemsSearch.FindMatchingControls());
You will only be able to iterate this collection one time so if you need to iterate multiple times, create a function that returns this search.
var listItemsFunc = () => listItemsSearch.FindMatchingControls().Except(hiddenListItemsSearch.FindMatchingControls());
foreach(var listItem in listItemsFunc()){
// iterate 1
}
foreach(var listItem in listItemsFunc()){
// iterate 2
}
The other way I would consider doing it would be to filter based on the controls which have a clickable point and take up space on the screen (ie, not hidden).
listItemsSearch.FindMatchingControls().Where(x => {
try { x.GetClickablePoint(); return x.Width > 0 && x.Height > 0; } catch { return false; }
});