In a flex tileList, is there a way to get the cell-address of a given item? i.e. for a given item, get the row/column location for that item in the list.
I've checked the documentation, and no directly, but with a bit of arithmetic you can get yourself sorted.
//asumming this is a change handler
function myTileListChanged(event:Event):void{
var itemsPerRow:Number = myTileList.dataProvider.length / myTileList.rowCount;
var selectedRow:int = Math.floor(myTileList.selectedIndex / itemsPerRow);
var selectedColumn:int = myTileList.selectedIndex - (itemsPerRow * selectedRow);
trace('index: ' + myTileList.selectedIndex + ' is at row: ' + selectedRow + ' column: ' + selectedColumn);
}
Note, I've used the TileList in Flash, so dataProvider might be slightly different, but you'll
still be able to get the picture.
HTH!
Related
I have script that is taking a HTMLElement and the css.top and css.marginLeft of an element which refuses to set the properties in TypeScript.
here's my code:
let moveable1: HTMLElement = document.getElementsByClassName('moveable1')[0] as HTMLElement;
Here's how I'm getting the values and "trying" to set the properties.
console.log("**style.top** = " + (moveable1.style.top =
String((+this.chatScrollTop + +this.boxScrollTop).toFixed(0))));
console.log("**style.marginLeft** = " + (moveable1.style.marginLeft = String((+this.chatScrollLeft + +this.boxScrollLeft).toFixed(0))));
moveable1.style.top = String(moveable1.style.top);
moveable1.style.marginLeft = String(moveable1.style.marginLeft);
What's happening is:
moveable1.style.marginLeft and moveable1.style.top ALWAYS equals ""
I don't understand.
The console logs are reporting the correct values
style.top = 69
style.marginLeft = 100
top: **<<<=== "EMPTY"** and should be 69
marginLeft: **<<<=== "EMPTY"** and should be 100
Thoughts, anyone?
UPDATE:
Zeh suggested the solution:
I modified it a wee bit...
let top = +this.chatScrollTop + +this.boxScrollTop;
const marginLeft = this.chatScrollLeft + this.boxScrollLeft;
moveable1.style.top = top.toFixed(0) + "px";
moveable1.style.marginLeft = String(parseInt(marginLeft).toFixed(0)) + "px";
console.log("top: " + moveable1.style.top);
console.log("marginLeft: " + moveable1.style.marginLeft);
THANK YOU ZEH!
You're setting a style property to a number and then trying to re-read and convert it to a string. This doesn't work; top (et al) cannot be numbers therefore they're kept at their previous value("").
Also, you need units ("px", "pt", etc) when setting a style, otherwise it won't set either, even if it's a string. Hence when you try converting them from number to string you get another blank string.
// This returns 1
console.log(document.body.style.top = 1);
// Nevertheless, it didn't work, since this returns ""
console.log(document.body.style.top);
This is not a TypeScript problem, this is a JavaScript (rather, a DOM) "problem".
My suggestion is to simplify this code. It's not just hard to read, it's doing a lot that it shouldn't be doing - unnecessary conversions, depending on assignment side effects, etc.
Something like this should work:
const top = this.chatScrollTop + this.boxScrollTop;
const marginLeft = this.chatScrollLeft + this.boxScrollLeft;
moveable1.style.top = top.toFixed(0) + "px";
moveable1.style.marginLeft = marginLeft.toFixed(0) + "px";
Scenario:
I have a calculated SQL that returns 100 results.
Added a table (from this calculated SQL) and limited the size of the page by 25 results.
This will generate 4 pages.
Pager form AppMaker works well (navigates between pages) but i need a button that navigates directly from page 1 to the page 4.
is this possible?
Anyone got a solution for this?
Regards
If you need to know how many entries your table has (in your case it's seems fixed to 100, but maybe it could grow), you can still do what you want:
E.g. say your table on YOURPAGE depends on a datasource called Customers.
Create a new Data item called CustomerCount, with just one field, called Count (integer).
Its data source would be a sql query script:
Select count(CustomerName) as Count from Customers
on the page you are having the table on, add a custom property (say called
Count of type integer)
In the page attach event, set the property asynchronously with this custom action:
app.datasources.CustomerCount.load(function() {
app.pages.YOURPAGE.properties.Count = app.datasources.CustomerCount.count;
app.datasources.Customers.query.pageIndex = #properties.Count / 25;
app.datasources.Customers.datasource.load();
});
I tried similar things successfully in the past.
Found a solution for this:
ServerScript:
function CandidateCountRows() {
var query = app.models.candidate.newQuery();
var records = query.run();
console.log("Number of records: " + records.length);
return records.length;
}
in the button code:
var psize = widget.datasource.query.pageSize;
var pidx = widget.datasource.query.pageIndex;
var posicao = psize * pidx;
var nreg = posicao;
google.script.run.withSuccessHandler(function(Xresult) {
nreg = Xresult;
console.log('position: ' + posicao);
console.log('nreg: ' + nreg);
console.log('psize: ' + psize);
console.log('pidx: ' + pidx);
var i;
for (i = pidx; i < (nreg/psize); i++) {
widget.datasource.nextPage();
}
widget.datasource.selectIndex(1);
}).CandidateCountRows();
This will allow to navigate to last page.
If you know for a fact that your query always returns 100 records and that your page size will always be 25 records then the simplest approach is to make sure your button is tied to the same datasource and attach the following onClick event:
widget.datasource.query.pageIndex = 4;
widget.datasource.load();
In this example:
http://mleibman.github.io/SlickGrid/examples/example-grouping
You can group the rows by certain columns, but I would like the rows inside the groups to be indented. Is there a way I can add a class to the grouped rows or something? I can't seem to find a good way to do this.
I'm creating the grouping by doing:
function groupByDuration() {
dataView.setGrouping({
getter: "duration",
formatter: function (g) {
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
}
});
}
I tried this Slickgrid grouping rows style
var myFormatter = function(row, cell, value, columnDef, dataContext) {
var groupings = this.getGrouping().length;
var indentation = groupings * 15 + 'px';
var spacer = '<span style="margin-left:' + indentation + '"></span>';
return spacer + value;
};
But my question is How do I bind this function with slickgrid's dataView so I can access the groupings as currently I am getting the error "Object doesn't support property or method 'getGrouping'"
Thanks
Thanks!
I'm pretty sure you are trying to shift left some of the column values or the header of the group based on the number of the grouped up rows.
I've modified the grouping-example groupByDuration formatter to try and show this off. Here is the link to the jsFiddle.
If I haven't gotten to the root of what you are trying to accomplish, please try and update the jsFiddle further to illustrate what exactly you are trying to do.
Or putting it more accurately, I want to be able to get the distance between the top of a control to the top of one of its children (and adding the height member of all the above children yields specious results!) but the process of getting the absolute coordinates, and comparing them, looks really messed up.
I use this function to calculate the height between the tops of 2 tags:
private static function GetRemainingHeight(oParent:Container, oChild:Container,
yParent:Number, yChild:Number):Number {
const ptParent:Point = oParent.localToGlobal(new Point(0, yParent));
const ptChild:Point = oChild.localToGlobal(new Point(0, yChild));
const nHeightOfEverythingAbove:Number = ptChild.y - ptParent.y;
trace(ptChild.y.toString() + '[' + yChild.toString() + '] - ' +
ptParent.y.toString() + '[' + yParent.toString() + '] = ' + nHeightOfEverythingAbove.toString() + ' > ' + oParent.height.toString());
return nHeightOfEverythingAbove;
}
Note that oParent.y == yParent and oChild.y == yChild but I did it this way for binding reasons.
The result I get is very surprising:
822[329] - 124[0] = 698 > 439
which is impossible, because the top of oChild does not disappear below oParent. The only figure I find unexpected is ptChild.y. All the other numbers look quite sane. So I'm assuming that my mistake was in subtracting two figures that are not supposed to be comparable.
Of course, if anyone has a method of calculating the difference between two points that doesn't involve localToGlobal(), that'd be fine, too.
I'm using the 3.5 SDK.
I found a partial answer by looking to http://rjria.blogspot.ca/2008/05/localtoglobal-vs-contenttoglobal-in.html (including the comments). It dithers on whether or not I should be using localToGlobal() or contentToGlobal(), but it filled in some blanks that Adobe's documentation left, which is that you get the global coordinates by feeding the function new Point(0, 0). In the end, I used this:
public static function GetRemainingHeight(oParent:DisplayObject, oChild:DisplayObject,
yParent:Number, yChild:Number):Number {
const ptParent:Point = oParent.localToGlobal(new Point(0, 0));
const ptChild:Point = oChild.localToGlobal(new Point(0, 0));
const nHeightOfEverythingAbove:Number = ptChild.y - ptParent.y;
return nHeightOfEverythingAbove;
}
See question for an explanation for the seemingly unnecessary parameters, which now seem like they might really be irrelevant.
However, I didn't need this function as often as I thought, and I'm not terribly happy w/the way it works anyway. I've learned that the way I've done it, it isn't possible to just make all those parameters to the function Bindable and expect this function to be called when changes to oChild are made. In one case I had to call this function in the handler for the updateComplete event.
I'm working with ordered data and ran into this problem:
I add items to a location with push() and set their priority to their creation date in milliseconds so they are ordered by date. When I try to change the order of the items I find the next, or previous (if there's no next) item and get it's priority, then I add or substract one and set the priority of the moved item to the result. I fetch the priority ok, but when I call setPriority() the item loses the priority. Exporting the item with the graphical debugger returns no priority for each item moved. Returns correct priority for unmoved items.
Some code:
/* id is the id of the div being moved
using jquery ui's sortable
div id's are formed like "item_" + firebaseref.name()
*/
name = id.substr(id.indexOf('_') + 1);
id2 = $('#' + id).next().attr('id');
if(id2){
name2 = id2.substr(id2.indexOf('_') + 1);
itemRef = rootRef.child('path/to/my/items/'+name2);
itemRef.once('value', function (dataSnapshot){
var pr = Number(dataSnapshot.getPriority()),
myRef = rootRef.child('path/to/my/items/'+name);
myRef.setPriority(pr - 1); // tried this or toString as below
});
} else {
// try previous item
id2 = $('#' + id).prev().attr('id');
if(id2){
name2 = id2.substr(id2.indexOf('_') + 1);
itemRef = rootRef.child('path/to/my/items/'+name2);
itemRef.once('value', function (dataSnapshot){
var pr = Number(dataSnapshot.getPriority()) + 1,
myRef = rootRef.child('path/to/my/items/'+name);
myRef.setPriority(pr.toString());
});
}
}
I had a 'child_moved' listener but I'm not using it now. Any ideas?
This is a bug in Firebase. I'm not sure of the cause at this point but it appears that numbers larger than a certain size are not being properly saved. We'll investigate and update this answer when complete.
Update: This bug has been resolved. Give it another try!