Develop Reference

Can I have expanded one node only on load in Tabulator.js?

I am using nested data trees in Tabulator.js and if I use the option dataTreeStartExpanded:true all nested rows will be expanded. I want only one be expanded on load/render? Is that possible?
Here is working jsFiddle to play around.
I found that there is a div with class tabulator-data-tree-control-expand or tabulator-data-tree-control-collapse. Changing the name in dev tools does nothing.
Currently it looks like
But I want to be like that after the web page loads
Maybe I can somehow click the + to expand. Tabulator has a listener there
But I do not know how to call it for that particular +.

oh, I found it in documentation.
.. a function that will be passed in a row component and the level of that row in the table (starting at 0), it should return a boolean value to indicate the rows expansion state:
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeStartExpanded:function(row, level){
return row.getData().driver; //expand rows where the "driver" data field is true;
},
});
and then in data you have to use new property driver:true

Reinitialize tabulator on same DOM element with new data and different column configuration

I am working with tabulator (jQuery plugin). I want to re-initialized the tabulator on same div element with different column config and data dynamically. Below is the sample div and script that I am using. I feel that, tabulator not allow to change the column configuration once its render.
$("#sample_div").tabulator(tabulator_display_config);
//initialize and apply tabulator
$("#sample_div").tabulator("setData", table_data.Data);
//load data into the table

You can try to redraw the tabulator after the new initialization
$("#sample_div").tabulator("setData", table_data.Data);
$("#sample_div").tabulator("redraw", true);

I use the destroy function and reinitialize tabulator. It works for me.
$("#sample_div").tabulator("destroy");
$("#sample_div").tabulator(tabulator_display_config);
$("#sample_div").tabulator("setData", table_data.Data);

If you just want to change your column configuration and keep your sorting you could get your current sorting using the getSorters function before updating the columns and data and then resorting:
var sort = $("#sample_div").tabulator("getSorters");
$("#sample_div").tabulator(tabulator_display_config);
$("#sample_div").tabulator("setData", table_data.Data);
$("#sample_div").tabulator("setSort ", sort);

How to get correct rowEntity in Angular UI grid?

I'm currently working on the Angular UI grid. The edit functionality is implemented and it works fine except one case when I push or remove any row to/from a grid at first after that I receive an incorrect rowEntity object during row editing. I believe it is easy to get a reason of "issue" who has valuable experience.
Let's say a grid contains two rows initially. Then I add a row to the top with: $scope.gridOptions.data.unshift(//here is an object);
Thus, there are already 3 rows in the grid. If I try to edit the third row, I'll get an rowEntity object with data from the current second row instead of the third.
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.rowEdit.on.saveRow($scope, function (rowEntity) {
//the rowEntity object is incorrect here if any row was either added or removed before the row that is under edit action now
}
}
What am I doing wrong? What do I misunderstand or don't know? I could resolve it if it would be possible to pass a rendered index row in on.saveRow().

Reloaded DOM of the grid to get correct sequence of rowEntities.

targeting oracle apex tabular form columns using javascript

I have a tabular form which I need to disbale and re-enable some of the columns based on some conditions.
I have the below javascript in my dynamic action which is working. I am referencing the columns by their names (f01_0001, f01_0002, f02_0001, f02_0002....)
$("[name='f01']").each(function(i){
// columns to be disabled
var coltext5 = $("[name='f05']").get(i).id;
var checkbox8 = $("[name='f08']").get(i).id.substring(0,8);
$("#"+coltext5).prop( "disabled", true );
$("#"+checkbox8).prop( "disabled", true );
})
But the issue I have is, if I switch the position of these columns, or add more editable columns to the tabular form, the name of these columns will be changed.
e.g in the above example, if I add one more textbox before coltext5, then coltext5's name will become f06....
Is there any better way to reference the tabular form columns? like ID or class, something that's static and won't be changed even the position of columns are changed?
Thanks

I've hit this issue before, and I've successfully used data attributes to do it - e.g. https://jeffkemponoracle.com/2016/04/05/declarative-tabular-form-dynamic-totals/
For example, you can set Element Attributes on the "Address" column to data-col="address", and refer to them in javascript using $("[data-col='address']").
Of course, you have to add this to each column you need to refer to.

RefreshFilter not working in DHTMLX grid. When I Use Custom Combo Box

I am using custom combo box for filtering the data in the grid. When i change the data in the grid
the filter is not getting refreshed with new data. I used grid.refreshFilters();. Still i face this issue.
Thanks

According to their docs:
Grid will not preserve row changes (adding , deleting), which was done when grid was in filtered state. After resetting back to not-filtered state, grid will restore deleted rows and remove newly created ones. To work around this issue you can use next order of actions:
unfilter grid
add|delete row
reset filter back
grid.filterBy(0, ''); // unfilter
grid._f_rowsBuffer = null; // clear cache
// Change grid data by adding / deleting rows here
grid.filterByAll(); // reset filters back

Are you loading data with parse? I used event onXLE to refresh filters after data are loaded.
grid.attachEvent('onXLE', function (grid_obj, count) {
grid_obj.refreshFilters();
});