Webix Pager scroll to particular row - webix

The datatable has a select method, which selects a given row.
The pager also has a select method, which scrolls to a given page.
However, I cannot find a way to tell the pager to scroll to a page which contains a given row.
Namely, I want to select a row in the datatable, but also show it if the view is on a different page.

There's no specific method that can both select and show the needed row at a time, but the combination of the following methods will do the job well:
datatable.select(35); //selects row
datatable.showItem(35); //scrolls or pages to make the row visible

See at this example in the Snippets
webix.ui({
rows:
[
{ view:"button", type:"iconButton",icon:"fa fa-bolt",label:"Go 52", width:100,on:
{
'onItemClick': function()
{
$$("dTable").select(52);
$$("dTable").showItem(52);
}
}
},
{
view:"datatable",name:"dTable",id:"dTable",select:true,
columns:[
{ id:"rank", header:"", css:"rank", width:50},
{ id:"title", header:"Film title",width:200},
{ id:"year", header:"Released" , width:80},
{ id:"votes", header:"Votes", width:100}
],
autowidth:true,
data: big_film_set
},
]
});
big_film_set it is a variable with a JSON.
var big_film_set = [{"id":1,"title":"The Shawshank Redemption","year":"1994","votes":"678.79","rating":"9.2","rank":"1"} /*...*/ ];

Related

SAPUI5 Table Cell Custom Control Binding

I was wondering if someone could shed some light on the issue I am having. I can't seem to get the data model updated when I use my custom input control in a cell. When using the standard sap.m.Input, updates to the data model are performed properly.
Here is the Plunker: https://plnkr.co/edit/GxE6F8DbW9DHqWjpfdO0
I have overrriden the getter for the 'value' properly to get the data from the entry field. Debugging in Chrome shows that this function is not called which I believe is the reason the data model is not updated.
getValue: function() {
var me = this;
var ef = sap.ui.getCore().byId(me.sId + '-ef');
return ef.getProperty('value');
}
Basically, there is a table with two rows and four columns. The first column uses my custom input. The second column has a custom button with an aggregation (additionalParameters) containing the bound data used in the first column. The third column uses a standard sap.m.Input and lastly the fourth column is again a custom button with the 'additionalParameters' aggregation bound to the data in the third column. When any of the buttons are pressed it fires an event which in turn updates the 'Sample' input field.
So, when I type something in the first column, tab out and press the respective 'PB1' button, only the original data from the model appears in the 'Sample' input field. If I type something in the third column, tab out of the field and press the respective 'PB2' button, the 'Sample' input field is properly set by the newly entered data implying the data model has been updated.
Edit
I can get the value from the Input no problem. Maybe I can clarify. The 'MyCustomInput' in cell 1 has 'value' bound to 'list>colOne'. The 'MyCustomButton' in cell 2 has the 'text' of the first item in aggregation 'additionalParameters' bound to the same 'list>colOne'. Any text entered into MyCustomInput does not update the model and thus does not update the 'additionalParameters' item. If I do the exact same thing but use a standard Input instead of MyCustomInput it works. As can be seen with the Input in Cell 3 and the button in Cell 4.
Thank you
May be you can provide more information. We have a simple example here
http://jsbin.com/yukujag/edit?html,js,output and it works on with getValue and setValue
sap.ui.define(['sap/m/Input', 'sap/m/Button', 'sap/m/VBox'],
function(Input, Button, VBox) {
Input.extend('MyInput', {
value: 'abc',
renderer: {},
getValue: function() {
return this.value;
},
setValue: function(v) {
this.value = v;
},
});
var oInput = new MyInput();
var oBox = new VBox({
items: [
oInput,
new Button({
text: 'Test',
press: function() {
alert(oInput.getValue());
}
})
]
})
oBox.placeAt('content');
});
Thanks
-D

angular ui-grid selecting all under grouping

https://jsfiddle.net/4byyuqtc/1/
I'm looking to have the ui-grid select all "children" under a grouping when the grouping line is selected. In this case Kit Kat(1), Mr. Goodbar(1), Krackel(2) and ultimately selecting the actual records (the non bold lines). One would expect that when selecting a parent in a grouping all it's children would get selected as well.
Currently when selecting the 1 grouping above the actual records in the data (the non bold lines) it does select those actual records with the following code:
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
console.log(rowChanged.treeLevel);
if (typeof (rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
// this is a group header
children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
console.log(children);
children.forEach(function (child) {
if (rowChanged.isSelected) {
$scope.gridApi.selection.selectRow(child.entity);
} else {
$scope.gridApi.selection.unSelectRow(child.entity);
}
});
}
});
I'm not experienced enough with ui-grid at this point to figure out how to cycle through children of the selected line and select all of them.
[EDIT]
With Paul's code below it doesn't select the groupings but it's closer. This screenshot is me selecting the first 337 record. Notice it selects that record and all the lowest child records (which is good because ultimately those are the ones that matter) but visually the grouped records (MFG and Item Desc group) aren't selected and need to be as the user won't ever open the lowest data records so they need to see the groups selected.
I checked the documentation and I don't think there's any exposed API Method. You could recursively select/deselect rows as a solution. Please try out the example below.
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
console.log(rowChanged.treeLevel);
if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
selectChildren(children, rowChanged.isSelected);
}
});
function selectChildren(gridRows, selected) {
if (gridRows && gridRows.length > 0) {
gridRows.forEach(function (child) {
if (selected) {
$scope.gridApi.selection.selectRow(child.entity);
} else {
$scope.gridApi.selection.unSelectRow(child.entity);
}
var children = $scope.gridApi.treeBase.getRowChildren(child);
selectChildren(children, selected); //recursively select/de-select children
});
}
}
Here's a working Plunkr: http://plnkr.co/edit/XsoEUncuigj9Cad1vP5E?p=preview
Handling automatic deselection is a bit more tricky though as it seems the api doesn't handle that really well.
UPDATE
So I checked the jsFiddle you shared and managed to get it working with a slight tweak.
I modified the selectionHandler to the following:
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged) {
if (rowChanged.treeNode.parentRow) { //Added this parent row selection
rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
}
console.log(rowChanged.treeLevel);
if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
selectChildren(children, rowChanged.isSelected);
}
});
Please see this fork of your code: https://jsfiddle.net/1eg5v77w/
The downside with this is that if you select a low level entry (one without children) it will still select its parent. If you really really want this to work as well, you'll have to access the DOM and make some ugly checks.
$scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged, $event) {
var wasHeaderRowClicked = true;
try { //This can be written more beautifully if you used jQuery. But I would still be against it as it relies on the class of the ui-grid never changing when you update your ui-grid version.
wasHeaderRowClicked = $event
.srcElement
.parentElement
.parentElement
.parentElement
.previousElementSibling
.firstChild
.firstChild
.firstChild
.getAttribute('class') === 'ui-grid-icon-minus-squared';
} catch(err) { console.log('Couldnt determine if header row was clicked'); }
if (rowChanged.treeNode.parentRow && wasHeaderRowClicked) {
rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
}
console.log(rowChanged.treeLevel);
if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
selectChildren(children, rowChanged.isSelected);
}
});
Here is the fiddle: https://jsfiddle.net/Lf8p7Luk/1/
I'd also like to add, thanks to this post, that according to the UI-Grid documentation: Group header rows cannot be edited, and if using the selection feature, cannot be selected. They can, however, be exported.
So it is intentional that it's so difficult to get this to work because it's not the intended design. My recommendation would be to alter your logic to either use Tree Levels or get around the selection logic because even though my fork is currently selecting everything, you will most likely run into other issues down the road. For example: I couldn't get automatic deselection to work in the grid when you click on another group header.
If you still have the issue take a look with this..
https://github.com/angular-ui/ui-grid/issues/3911

Multiple tablesorter tables in Jquery UI tabs

I have 3 tables, of that I am using 1st table to display in one of the Jquery UI tabs and 2 other tables in another tab.
Issue is only one (last or 3rd one ) of the 2 tables show up . The one above flashes off and doesnt display back.
Here is my doc ready function:
\$(document).ready(
function(){
\$("#tabs").tabs({
create: function (event, ui) {
var \$t = ui.panel.find('table');
if (\$t.length) {
\$t.tablesorter(tablesorterOptions);
}
},
activate: function (event, ui) {
var \$t = ui.newPanel.find('table');
if (\$t.length) {
if (\$t[0].config) {
\$t.trigger('applyWidgets');
} else {
\$("#table3").tablesorter(tablesorterOptions);
\$("#table1").tablesorter(tablesorterOptions1);
\$("#tavble2").tablesorter(tablesorterOptions2)
}
}
}
});
My table declarations have THEAD,TBODY with ids, table1,table2,table3 and class tablesorter.
Jquery UI is same as shown in the demos on the jquery websites. Can somebody please help?
Never mind, I figured this one out. I had type mismatch in tablesorter's filter columns. So it wasn't displaying the table but others were getting displayed.
Thanks!!!

TableSorter multi-filter

I have a tablesorter table that contains a 'Category' column. My searches reveal many different ways to filter on various types of columns but they all boil down to a single filter criteria.
What I have is a section on the page that lists all the categories with checkboxes, the idea is to allow the user to select which categories they want to look at (there are 10 different categories) and have these selected categories be applied to filter the rows in the tablesorter.
I could always brute force this with a post back to my controller and return a model with a filtered set of rows, but if there is a sensible way to accomplish this on the client side I would greatly appreciate anyones input on where to begin tackling a problem like this.
This is my first crack at it. So assume I have a bunch of checkboxes representing the categories to filter on. The class 'tablesorter' is what I called the table containing the data. I added an id attribute to the cell which has the category in it. I did it this way because I do not want the id to be visible on screen. At the end I refresh the zebra striping after hiding/unhiding rows. If there is a better way to do this, I'm all ears (I am a total newb to javascript/jquery/tablesorter).
function FilterCompanies() {
$(':checkbox:not(:checked)').each(function () {
var unselectedCategoryId = $(this).attr('id').substring(3);
$('.tablesorter > tbody > tr > td[id]').each(function() {
if ($(this).attr('id') == unselectedCategoryId) {
$($(this).parent()).addClass('hidden');
}
});
});
$(':checkbox:checked').each(function () {
var unselectedCategoryId = $(this).attr('id').substring(3);
$('.tablesorter > tbody > tr > td[id]').each(function () {
if ($(this).attr('id') == unselectedCategoryId) {
$($(this).parent()).removeClass('hidden');
}
});
});
$(".tablesorter").trigger("applyWidgets")
}
Here's what it looks like:

Wijmo grid - Prevent row selection when clicking on a specific column

I have a Wijmo Grid which allows row selection, whenever a user click on any column.
And I added a column to display a tooltip with additional info of the specific record.
The problem is when this column is clicked, Wijmo automatically selects the current row.
I've read the documentation, there is no event before selecting a row or clicking on a row. The selectionChanged event is not useful in this case, because it is fired after selecting a row.
I cannot add a tr click event handler and make e.preventDefault, because in this case the tooltip would not appear.
How could I prevent row selection, depending on the column clicked?
There is no native way to do this. What you could do is, handle the currentCellChanging event and set the 'selectionMode' option to none based on the clicked cell.
var isLoaded = false;
$("#gridview2").wijgrid({
loading: function (e, args) {
isLoaded = false;
},
loaded: function (e, args) {
isLoaded = true;
},
currentCellChanging: function (e, args) {
if (isLoaded) {
if (args.cellIndex == 5) {
$(this).wijgrid({ selectionMode: 'none' });
}
else {
$(this).wijgrid({ selectionMode: 'singleRow' });
}
}
}
});
use selectionMode="none" work fine
which not select anything by default

Resources