Lets say, I select an element using Prototype like this:
var elem = $$('.someclass')[0];
Is there a way to figure out, what type (li or a or div) this element is?
Thanks!
Related
I'm using RadListView and intercepting onItemLoading event.
Within that event, can I reference individual view elements inside the itemTemplate.
I see args.view._subViews - but I was wondering whether i could find element by name or something else. I assume id would not work because each item would have the same id.
You are correct getting by Id would only return the first one. However, if you have the reference to the ListView child group; using id will work to get the element out of a group.
Now if you use my NativeScript-Dom plugin then it is very simple; you can do:
var elements = RadListView.getElementsByClassName('someClass'); or RadListView.getElementsByTagName('Label'); or the newer functionality `
RadListView.runAgainstTagNames('Label', function(element) {
/* do something with this element */
});
And work with an array of elements that match your criteria.
Please also note that in a ListView that not all elements are preset; ListViews only have as many elements are needed to fill the ListView + 1 typically; so even if you have 2,000 items in the list view; you might only have 10 actual child ListView groups of elements. So when you did a GetElementsByTagNames('Label') you would only get 10 of them...
I am trying to make my chart 508 compliant. Hence in order to make it possible to navigate the chart using keyboard, i want to add anchor elements before every bar column. I tried doing :
d3.select("svg").insert("a",".nv-bar").attr("href","");
but it didnt work.
Can anybody suggest a better way of doing it. Thanks !
Here's one way to do it:
d3.selectAll('.nv-bar')
.each(function() {
var el = this;
d3.select(el.parentNode)
.insert('a', function(){return el;})
.attr('href', '');
});
The insert method will add elements to each item in the current selection, regardless of how many elements the "before" parameter matches.
My solution will add an anchor for each bar in the document, and takes advantage that the insert method can accept a selector string or a function that returns an element to insert before. (Although, somewhat frustratingly, it does not accept a DOM node directly)
Edit: Here's a jsfiddle with an example: https://jsfiddle.net/bgp6atzo/
Given a stackView object, I got an array of stackView.arrangedSubviews
which is a get only property. Hence I can't REPLACE one item of it by merely doing
stackView.arrangedSubviews[i] = newSubView
what came to my mind is I want to replace the content of the reference at stackView.arrangedSubviews[i] with the content of newSubView. For instance if this was in C, I would have done something like
*arrangedSubViews[i] = *newSubView
I know there is a way to do what I need by removing arrangedSubViews and utilizing addArrangedSubView but it won't be very efficient.
You can't modify an immutable array, and this is a good thing in many ways.
You can create an extension method to replace the view like this:
#available(iOS 9.0, *)
extension UIStackView {
func replaceView(atIndex index: Int, withView view: UIView) {
let viewToRemove = arrangedSubviews[index]
removeArrangedSubview(viewToRemove)
insertArrangedSubview(view, atIndex: index)
}
}
Then, instead of using stackView.arrangedSubviews[i] = newSubView you can use this code:
stackView.replaceView(atIndex: i, withView: newSubView)
Performance-wise there's no negative impact on doing it this way.
Let's say I currently have this selection:
te[st<p>test1</p>te]st2
The [] represents the selection.
I would like to expand out the selection to include all <a> elements and remove all the <a> elements.
I tried expanding out using the startContainer and endContainer:
var selection = editor.getSelection();
var range = selection.getRanges()[0];
range.setStartBefore(range.startContainer.getParent());
range.setEndAfter(range.endContainer.getParent());
var style = new CKEDITOR.style( { element: 'a', type: CKEDITOR.STYLE_INLINE, alwaysRemoveElement: 1 } );
editor.removeStyle( style );
But this only removed the stuff in the selection and did not expand the selection.
How can I expand the selection so that it includes whole elements if they are partially selected.
These lines:
range.setStartBefore(range.startContainer.getParent());
range.setEndAfter(range.endContainer.getParent());
Will only change the range object's properties. And range does not mean selection, it's only a logical representation of delimited piece of content. Read more in the CKEDITOR.dom.range documentation.
The editor.removeStyle() method works on a real selection though and therefore the above range modification did not affect the result. So you either need to select that range using range.select() and then use editor.removeStyle() or you can use style.removeFromRange().
I need to select a specific row in kendoGrid but NOT by data-uid (as data-uid is changed when the grid dataSource is loaded again) but by the row itemID. I saw posts but they only select the row by uid which is not what I needed, I actually need to restart the HTML5 application and when grid is loaded, a specific item should be selected. This is what I've been seeing
Demo: jsfiddle.net/rusev/qvKRk/3/
e.g. the object has OrderID as ID, and every time the grid is loaded, it will be the same, unlike uid, I want to know how will I be able to select a row with OrderID, instead of uid.
You cam mix row itemID and data.uid, I guess.
var grid = $("#Grid").data("kendoGrid");
var dataItem = $("#Grid").data("kendoGrid").dataSource.get(itemID);
var row = $("#Grid").data("kendoGrid").tbody.find("tr[data-uid='" + dataItem.uid + "']");
Going along with what umais has mentioned, the better approach, since there is no built in functionality for this as of yet, would be to iterate through all the records to find the one you need. The function that I built will work even if there are pages of data. The only other way that I can think of doing this would be do do a secondary ajax call; But this works well. Note that i haven't tested it with more than 2000 records.
var dataGrid = $("#GATIPS").data("kendoGrid").dataSource;
var numOfRows = dataGrid.total();
var currentPageSize = dataGrid.pageSize();
dataGrid.pageSize(numOfRows);
var dataGridData = dataGrid.data();
for (var i = 0; i < numOfRows; i++) {
if (dataGridData[i].uid == e)
return dataGridData[i];
}
dataGrid.pageSize(currentPageSize); // reset the view
e is the UID. However this can be substituted for what ever variable you need just replace the check.
a work around that I managed to have, was to go through all rows and check which row model has that ID equal to the parameter, and then get that row data-uid and select the item through data-uid. It's working fine for me, since there were no suggestion, it's the better answer for now.
Well, accordingly to what I have done (and worked for me), and even though the work around isn't the prettiest, set one more Column, with your model id and with ClientTemplate then create any html object (div in my case) inside it give it a html id of your id, so when ever you need it, you just have to go and look with something like:
grid.dataItem($("td div#id").closest("tr"));
Because remember that the dataItem method is waiting for a selector then you get your selectedItem as regular one.
EDIT:
I forgot to say, that you should (or could) use the style property
display:none
If you don't want to display that col.