CODEWITHSUNDEEP
nativescript
relez
relez

Reputation: 790

A modal list-picker

I am trying to implement a list where I should pick an item from it, I am trying to use a ListPicker:

<StackLayout verticalAlignment="top">
    <ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</StackLayout>

Is there any way to make the ListPicker modal, and show it by clicking on a readonly TextField?

I am using Javascript on Nativescript.

Thanks!

Upvotes: 1

Views: 2718

Answers (2)

Marek Maszay
Marek Maszay

Reputation: 1547

Put ListPicker to modal dialog wont be good idea as u need to create platform dependend creating and processing that picker

So first approach would be dialogs actions and on tap open dialog with options, array of options, only strings http://docs.nativescript.org/cookbook/ui/dialogs#action

Example (taken from link above if it happens it wont work for u and little rewrited for your case):

var options = {
    title: "Inquiry Type",
    message: "Choose inquiry type",
    cancelButtonText: "Cancel",
    actions: inquiryTypeItems 
};
dialogs.action(options).then((result) => { 
    console.log(result);
});

or as second approach,

U can set ListPicker as hidden on load of page after tapping on something(definitely not TextField, as u can get problem with showing keyboard, either Label or Button) show ListPicker with animation or visibility property and on change or maybe on Done button which would be together with ListPicker it would let people to choose from list of items :)

If u have other data together with other properties better for second approach but if u have some simple array of strings u can use first one

Upvotes: 2

George Edwards
George Edwards

Reputation: 9229

I am not sure how you would do this in plain NativeScript, however, if you are using Angular2, then you can use an angular modal and then nest the nativescript ListPicker inside that.

So the README of the Angular2 Modal Project describes creating ui agnostic modals very thoroughly. Then in its content, you would do something like:

    <div class="container-fluid custom-modal-container">
        <div class="row custom-modal-header">
            <div class="col-sm-12">
                <h1>A Custom modal design</h1>
            </div>
        </div>
        <div class="row" [ngClass]="{'myclass' : shouldUseMyClass}">
            <div class="col-xs-12">
                <div class="jumbotron">
                    <h1>Pick Something:</h1>
                    <ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
                </div>
            </div>
        </div>
    </div>`

Here shows how the components might fit together.

You can see the issue which track supporting this in NativeScript.

Upvotes: 0

Related Questions