I’m using a NativeScript <ListView> and I’m trying to get access to the individual elements in each element’s <ListView.itemTemplate>. To give a concrete example, given this code snippet, how do I access each <GridLayout>?
<ListView>
<ListView.itemTemplate>
<GridLayout>...</GridLayout>
</ListView.itemTemplate>
</ListView>
I know that I can add a loaded event to each <GridLayout>—i.e. <GridLayout loaded="myEventHandler">—however, for my use case I need to change attributes on the <GridLayout> after an unrelated event occurs.
Theoretically I could use the loaded event to build an array of all <GridLayout>s in a <ListView.itemTemplate>, and then use that array to perform actions, but that just seems hacky. It seems like there has to be a better way. Any ideas?
Manipulating the visual tree for a list view item doesn't seem like the most robust approach here. Consider the following scenario:
An item gets rendered to the screen.
Your code kicks in and modifies the visual container's tree.
The user scrolls, or something else happens, and the list view reuses the visual container for another item. Your new item now looks broken.
I'd implement this using bindings and, if things get hairy, an appropriate view model that makes bindings straightforward.
You can use the nativescript-dom plugin. The getElementsByClassName actually has code to traverse the ListView's children. Unfortunately after I discovered the issue and put in the bug report into the NS Common Components repo -- I totally forgot to make the same changes to the getElementsByTagName and getElementById functions in the nativescript-dom plugin.
So using getElementsByClassName if you assign it a class name should work right now. Otherwise; I'll probably do an update to the library later this week that will have the listview children traversal code in it for the other two methods.
Update: I've released a new version of nativescript-dom that allows all three getElement* to work on ListView children.
I think you may be able to give the each gridview and id dynamically using something like id="gridView{{$index}}" then use page.getViewById('gridView1') for example. Can't test it out at the moment, but I think that would work.
Related
I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.
I am using this to build a admin UX https://github.com/marmelab/admin-on-rest and it seems to fit perfectly into what I want to build except one feature:
My work project needs to display a tree grid to display groups or subgroups of items in a tree form and also to show a drop-down to display and select a grouping field.
I think this is what is needed to achieve this:
a) Write a custom "Datagrid" which I am able to write
b) Custom "List" component to show grouping combo
c) Add custom List actions to add '_grouping' parameter to the REST request
I am unable to pass my list component to 'Resource' since it breaks the whole app rending / events logic. In OO programming lingo this will be called a classic sub classing but React framework does not support it.
What would be a proper way to achieve this functionality ?
PS: I am new to react, redux, saga so please excuse me if this is already supported in admin-on-rest. I would appreciate if such feature is possible or can be added without forking the whole repo ( modifying the existing )
I don't think you need to implement a custom <List> component for that need. A replacement for <Datagrid> should to the trick. You just need to add a custom action button, and you've already localized the place to add it to (<List actions>).
Try like this first, and then if it doesn't work (but you'll have to illustrate why), I can maybe look into replacing the <List> component.
How can i implement a Section View(like in IOS) in Windows8 ListView ?
I want to break down the Listview into different Sections.
Any Directions ?
ListViews have a property called groupDataSource that lets you define how the items are grouped. You might want to look at the Grid App template in Visual Studio, which has data already set up in this way. You can also take a look at this tutorial: http://msdn.microsoft.com/en-us/library/windows/apps/hh465464.aspx
If you want any more info, you will have to be a bit more specific with your line of questioning.
In my Netflix post on codefoster.com I tried to show grouping in its simplest form. When you have a JS array, you simply make a Binding.List out of it and then you just call createGrouped sending it two lambda functions telling it how to group. Then like #Paul said, you'll get those different sections automatically in your ListView. Hope that helps.
Having no luck here trying to find a solution to this.
I've set up a looping selector based on this guide. (I also used the ListLoopingDataSource class in Part 2 in order to have strings in my looping list).
What I want to be able to do is then change another element (an image box/placeholder) on my layout, based on what is currently selected in the looping selector.
No real idea how to do this, the onSelectionChanged event is kind of abstracted and not really useful? I'm not sure how to programmatically change images either, it doesn't look like I can access a resource from the code base, only from the xaml.
Any help/suggestions would be greatly appreciated.
I found that I could do this by using binding.
I'd like to know if there is a way to access inner controls of the spark control (lets say Panel) through the styleManager?
I've used the following code to access Panel's CSS properties:
styleManager.getStyleDeclaration("spark.components.Panel")
.setStyle("backgroundColor", "blue");
I'm unable to figure out how to access the inner controls like displayLabel. I know that this is possible using the CSS styling, but I'd like to change their properties at runtime.
How can this be done?
I am not sure if this is still current, but I think what you need to do is to declare the inner classes somehow in your CSS (possibly empty if you don't care). As soon as they exist there, the styleManager can access their values. You can also do something like this:
[Style(name="backgroundColor", type="uint", format="Color")]
In your MXML declaration, and then that style exists.
There are a few related examples here:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf687e7-7ff6.html
[This is related to an issue I have myself with the StyleManager and google led me here, that's the reason for the late answer]