Adding a drop down menu to Grid Template

Question

Hi, I am new to Windows 8.1 Store App Development and I have created an Application named Quick EarthQuake and its in Windows Store right now.

It currently shows 4.5+ magnitude earthquakes of past day and past week. I have lot of more categories of data to add to this application and hence I need to add a drop down menu like I am showing in image attached.

Please guide me what I need to do in HTML [I am using Grid Template and RSS as data source] and JavaScript because I tried to find answer to this question but no luck.

Thanks

Answer 1

Hi AKoutlook,

Looks like you need a PopupMenu class, add the menu dynamically by some event like mouse click on the listview item.

For more similar controls, you could ref: Controls by function

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

You can make a button when ever someone clicks on the button then make the visibility of listBox to visible and show all the sub categories in that listbox and also use SelectionChanged event to get user input, otherwise collapsed. This is the best solution which i have found on this topic and i use this same senerio in my apps to.

I hope this will help you.

Muhammad Asad.

 

Answer 3

I think you misunderstood my question. I have looked into PopupMenu and its a different thing.

What I need is something you call drop down menu or lets get down to HTML code here

<select>

<option> Option 1 </option>

<option> Option 2 </option>

<option> Option 3 </option>

</select>

I am attaching a screenshot from Windows Store and Windows Store App is using this menu as well.

In HTML its no big deal but I am new to Windows Store Apps that's why I don't know specifics. A sample App or code sample will help me a lot.

Thanks

Answer 4

Let me explain your screenshot with you.

Program the WinJS app as you normal HTML does. Or do I still misunderstand you?

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 5

Yes I know these are simple HTML controls but where do I add them? I added them to GroupedItems.html file and the drop down did not open on click and if it came out then it went close again in a second and this is because of grid just beneath it [I am using Grid Template and I can send you screenshots and even a sample testing app to look yourself]

Lets assume I somehow manage to add the HTML and it works, next when I try to get the value from select element it gives error "can't get value of undefined or null reference"

I am using the simple JS to get value using document.GetElementById method and get this above mentioned error.

Is there any sample in Windows Store App samples that does this thing? Just let me know I will handle the rest of it myself. I wanna know a way to retrieve the value from HTML select element and then pass it on to change the RSS URL so that Grid then shows the different data on the fly when I select element from dropdown list.

Thanks

Answer 6

Hi AKoutlook,

Thanks for your explanation, It really confuse me from your screenshot and your description.

The screenshot you paste here is the Windows Store search result page, and the select control is individual without inside the ListView, but your description sounds more like you put the select control inside the ListView template. Which one is your prefer?

To reproduce your problem, I create a demo and I can see what you describe in your post, but the issue only happens when putting select control inside the ListView item template. I'm now working on how to use select control inside listview item. I think this might be a focus issue, I will update here later once I have some conclusing.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 7

Hi AKoutlook,

Still there? Per documentation Quickstart: Adding a ListView mentioned:

Normally, when the user interacts with an element, the ListView captures that interaction and uses it to determine whether   the user selected or invoked an item or is panning through items. For an interactive element, such as a control, to receive input, you must attach the win-interactive CSS class to the interactive element or one of its parent elements. That element and its children receive the interaction and no longer trigger events for the ListView.

Try following code:

        <select class="win-interactive">
            <option>asdasda</option>
            <option>asdasda</option>
            <option>asdasda</option>
            <option>asdasda</option>
        </select>

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.