getViewById dynamic


#1

Is it possible do send a string to this function?
I tried the following sentences without success:

case 1:
var itemListView = page.getViewById(“classItem” + oldItemSelected);

case 2:
var nameObj = “classItem” + oldItemSelected;
var itemListView = page.getViewById(nameObj);

case 3:
var itemListView = page.getViewById(eval(“classItem” + oldItemSelected));


#2

Hi, have you tried to use binding context?
I put the id in xml ( I am using ts not angular)

<StackLayout id="{{saleOrderItem.itemCode}}" width="100%">
                  <StackLayout orientation="vertical" width="50%">
                    <Label class="list-item-label" text="{{ saleOrderItem.itemCode }}" />
                    <Label class="list-item-label" text="{{ itemDesc }}" textWrap="true"/>
                  </StackLayout>
</StackLayout>

And in model.ts

let layout = page.getViewById<layout.StackLayout>(itemCode);

#3

Hi ashley, thank you for your reply.
I am using JS (no angular). But really the main issue is try to control the item in a ListView. So, I do not how can i do this in the XML.
Let me give more details about the functionality:
I have a form (simulating a Dataform) and one field is select an item in a ListView. So, I want to add in the UI (maybe an icon) something to identify which item the user selected. For this reason, I want to change the visibility of the element for an specific item (using getViewById).
BTW, the XML recognize the dynamic id like your proposal, but in the JS I cannot do that. I have to put the string with the name (i.e. getViewById(“classItem13”) )
I am attaching some pictures to illustrate the goal :grinning:


#4

You can send string to that function, if that doesn’t work for you, please create a playground where we can see the issue.

Besides, I may not encourage setting ids if you are creating n number of dynamic elements. May be you can set id to it’s parent and access child by index.


#5

Hi @egonzalez,
If you use dynamic in xml, you should use dynamic id as well.
I have done a similar case as yours, I post some of my code, hope it will help.

  1. I am using MVVM system. Create a viewModel for data I want to bind in that view(xml), then in js file, you can use whichever you did.
    If ui element has binding context, args may help
export function editItem(args) {
        let bindingCtx = args.view.bindingContext;
//then get id in bindingCtx
}
  1. For my listview, I can get element by “hard code” id or variable
//itemCode is viewModel, and binding in ui like my last post
let layout = page.getViewById<layout.StackLayout>(itemCode); 
//or
 let listView = <listViewModule.RadListView>frameModule.topmost().currentPage.getViewById("itemList");
  1. agree with @manojdcoder, use index of listview for dynamic id is a better idea
 <lv:RadListView items="{{ preferItems }}" 
                              class="" itemTap="onItemClick" height="80%" itemSelected="itemSelected"
                              id="itemList" 
                              itemSwipeProgressEnded="onSwipeCellFinished" 
                              itemSwipeProgressStarted="onSwipeCellStarted" 
                              itemSwipeProgressChanged="onCellSwiping"
                              itemSwipe="false">
export function onItemClick(args) {
    const INDEX = args.index;
    let selectedItem = ItemList.getItem(INDEX);
}
  1. If you want to use UI to identity item is selected, maybe you can use “onItemTap” function to set up css class for item.
    Such as,
 <StackLayout orientation="horizontal" class="{{selected ?'listItem-item-selected' : 'listItem-item-notSelected'}}">

//then in js, set up 'selected' 

#6

Thank you @ashley. It is a good solution. I am going to implement in another version because I am using JS instead of TS.


#7

No worries. Let me know if you need some hints in js, I got js version as well( I wrote in ts but generated in ts)