scrolling in gridview

Question

I've one grid view which is having 4 columns --> Food Type,Dish Name, Price, Quantity.

The "Food Type" column has values "French,Chinese,Italian"

"Dish Name" column has the name of dish for respected food type for ex. for Chinese one of the dish will be noodles.

"Price column" has price of each dish

"Quantity" column has text box where costumer will insert the quantity of dish to be order.

There can be hundreds of dishes for each of 3 food type. I am displaying all the dishes of all food type in a single grid view with scrolling enabled.

The problem is that, at a time the grid view can display only 20 rows in a scrolling panel. I want to avoid the manual scrolling for getting to the dishes of particular Food type.

I want to use one DropDown list (DDL) which will have values French,Chinese,Italian (food type) for scrolling in a grid view. When user will select any of the value in DDL user should be scrolled to the related region of the grid view. Assume that the grid will have rows for French food type first(rows can be any numbers) then Chinese and lastly Italian.

Please help me to make this vertical scrolling functionality using DDL.

To visualize the grid view follow below link:

http://www.flickr.com/photos/94027637@N05/8556915219/

Thanks in advance.

Why not simply filter the GridView based on selection in your FoodType ComboBox? For example, when the user selects FoodType as Chinese, show only the chinese items in the GridView. This way you can even get rid of FoodType column in the GridView. — publicgk, Mar 14 '13 at 18:04

score 0 · Answer 1 · answered Mar 14 '13 at 18:01

I have another suggestion which i have used for this type of work.

Use Collapsible Panel/Accordian for each Food Category. First all Food Categories will be seen collapsed and when Customer wants to view a particular category he/she will click on header of that category which will expand to show the related food items.

Depends on you, you can use multiple grid or a single grid.

score 0 · Answer 2 · answered Mar 15 '13 at 05:42

If you are ok replacing the dropdown list with a short list of links, you can add an anchor tag with the ID of each food type to the first entry of that type. It would look something like this:

<a href="#French">French</a>
<a href="#French">Chinese</a>
<a href="#French">Italian</a>

<table>
    <tr><td><a id="French"></a>French</td><td>Steak au poivre</td></tr>
    <tr><td>French</td><td>Steak frites</td></tr>
    <tr><td>French</td><td>Poulet frites</td></tr>
    ...
    <tr><td><a id="Chinese"></a>Chinese</td><td>Chinese noodles</td></tr>
    <tr><td>Chinese</td><td>Noodle Soup</td></tr>
    ...
    <tr><td><a id="Italian"></a>Italian</td><td>Braciole</td></tr>
    <tr><td>Italian</td><td>Pizza marinara</td></tr>
</table>

scrolling in gridview

2 Answers2