# How do I use data grid to navigate to detail page **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** beginner\ **Created:** [July 20, 2021, 12:26am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095 "2021-07-20T00:26:09Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![delee\_techdeveloper](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/delee_techdeveloper/32/29616_2.png) [@delee\_techdeveloper](https://community.thunkable.com/u/delee_techdeveloper)\ **Post date:** [July 20, 2021, 12:26am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/1 "2021-07-20T00:26:09Z")
What I’m trying to do when the user click on a data grid item to navigates to the detail page of that item ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [July 20, 2021, 12:43am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/2 "2021-07-20T00:43:05Z")
1. Create a screen that takes a variable that’s whatever you need to look up to get the detail page. 2. On your palette, find the Dataviewer list and look for the “on click” event. (I think you might need to expand the menu next to the dataviewer list on the palette.) When the user clicks, grab the row id or index, set the variable to step #1 to that, and then use the orange navigate block to go to the details screen. ---
**Author:** ![offgainbpqn](https://avatars.discourse-cdn.com/v4/letter/o/8491ac/32.png) [@offgainbpqn](https://community.thunkable.com/u/offgainbpqn)\ **Post date:** [July 20, 2021, 1:14pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/3 "2021-07-20T13:14:13Z")
I don’t understand ut, please if you know than explain in details, I want when data viewer item clicked and navigate to the detail screen then I tried to set the lebel text to get value from data source sheet 1 and the row which I want to show and for row id I set the app variable rowID but nothing is showing, please ehelp me ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [July 20, 2021, 1:24pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/4 "2021-07-20T13:24:18Z")
Create a var with value as 0 then add a onClick event. set the var to the row ID and navigate to the detail page. (var = variable) ![Screenshot 2021-07-20 3.23.49 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/53ab5f2089a7f272fdb646681d917ffc4bbc6af2.png) Basicly the same as @catsarisky Hope that helps. cheers Luke ---
**Author:** ![offgainbpqn](https://avatars.discourse-cdn.com/v4/letter/o/8491ac/32.png) [@offgainbpqn](https://community.thunkable.com/u/offgainbpqn)\ **Post date:** [July 20, 2021, 1:40pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/5 "2021-07-20T13:40:33Z")
![IMG_20210720_190742](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/b/5be2326d8b30b058d8b3f64a979f12f508bb6531.jpeg) You can see the blocks, after creating a var with 0 still the photos and text are not showing in the details screen, please help ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [July 20, 2021, 1:45pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/6 "2021-07-20T13:45:03Z")
can you maybe show a link to the project? Or give us some mor information. that makes it a bit easier to find the problem. thanks ---
**Author:** ![offgainbpqn](https://avatars.discourse-cdn.com/v4/letter/o/8491ac/32.png) [@offgainbpqn](https://community.thunkable.com/u/offgainbpqn)\ **Post date:** [July 20, 2021, 2:01pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/7 "2021-07-20T14:01:08Z")
Ok I am actually creating a Property View data viewer grid, where I show property from my sheet, I have also created a custom data viewer layout where I bind around 10 coloum for bedroom, bathroom, and other details and when data viewer item clicked I want to show the image and property details on the labels through data source but no image and text are showing in the details screen please help me I am struggling a lot, can you mail me at ‘‘offgain @ gmail’’ or you can reply here project link [Thunkable](https://x.thunkable.com/projects/60eab66ff5e0db00c47683ce/preview/61570c68-3a18-42b4-a2df-ef007696f172) ---
**Author:** ![offgainbpqn](https://avatars.discourse-cdn.com/v4/letter/o/8491ac/32.png) [@offgainbpqn](https://community.thunkable.com/u/offgainbpqn)\ **Post date:** [July 20, 2021, 2:37pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/8 "2021-07-20T14:37:36Z")
I am hoping for your help brother ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [July 21, 2021, 10:08am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/9 "2021-07-21T10:08:26Z")
I am not able to open the project can you send a copy of it? Also why is the first get value from for row id the ID socket empty? ---
**Author:** ![offgainbpqn](https://avatars.discourse-cdn.com/v4/letter/o/8491ac/32.png) [@offgainbpqn](https://community.thunkable.com/u/offgainbpqn)\ **Post date:** [July 21, 2021, 10:22am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/10 "2021-07-21T10:22:08Z")
Brother please help me the this is the project link [Thunkable](https://x.thunkable.com/copy/a65321adb4912edf201d7213dcdf8a37) and now it is not even opening in thunkable live test app, please look and help me if you can ---
**Author:** ![offgainbpqn](https://avatars.discourse-cdn.com/v4/letter/o/8491ac/32.png) [@offgainbpqn](https://community.thunkable.com/u/offgainbpqn)\ **Post date:** [July 22, 2021, 7:49am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/11 "2021-07-22T07:49:14Z")
Brother no update till now? ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [July 22, 2021, 8:41am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/13 "2021-07-22T08:41:28Z")
You are using [thunkable.com](http://thunkable.com) as image. it wont work because its a link to a website not a image. ---
**Author:** ![offgainbpqn](https://avatars.discourse-cdn.com/v4/letter/o/8491ac/32.png) [@offgainbpqn](https://community.thunkable.com/u/offgainbpqn)\ **Post date:** [July 22, 2021, 10:46am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/14 "2021-07-22T10:46:04Z")
That I did not do, I am so confused ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [July 22, 2021, 12:33pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/15 "2021-07-22T12:33:20Z")
Are you connecting your project with Google sheet or Airtable? If yes, then it will be very difficult for anyone to test your project against your data. In Thunkable, when you share a link to your project, it will disconnect that data tables and replace them with local tables and fill the local tables with sample data. This way no one can actually verify if your are doing the correct coding with your data because no one has access to your data to do the real and complete test. This is my thought of the problem but it could be something else. ---
**Author:** ![delee\_techdeveloper](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/delee_techdeveloper/32/29616_2.png) [@delee\_techdeveloper](https://community.thunkable.com/u/delee_techdeveloper)\ **Post date:** [August 28, 2021, 5:42pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/16 "2021-08-28T17:42:12Z")
![Screen Shot 2021-08-28 at 12.40.56 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/5/6560e9dc9498a04cde9342463d19ef2cab3d87a4.jpeg) I am only trying to show the selected item on the screen. ONLY the selected item from the list. ---
**Author:** ![delee\_techdeveloper](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/delee_techdeveloper/32/29616_2.png) [@delee\_techdeveloper](https://community.thunkable.com/u/delee_techdeveloper)\ **Post date:** [August 28, 2021, 5:42pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/17 "2021-08-28T17:42:31Z")
I am connected through Airtable ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [August 28, 2021, 6:03pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/18 "2021-08-28T18:03:27Z")
Because Data Viewer Lists sync with a data source, the only way to show a single item is to only have one row in your data source. What I usually do is use a Data Viewer List (DVL) on the first screen and then when an item is clicked on, I navigate to a second screen that has the detailed info that I want to display for that single item. But I don’t use a DVL on the second screen. You could but you’d need a second data source that gets updated/replaced each time the user clicks on an item on the first screen. ---
**Author:** ![delee\_techdeveloper](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/delee_techdeveloper/32/29616_2.png) [@delee\_techdeveloper](https://community.thunkable.com/u/delee_techdeveloper)\ **Post date:** [August 29, 2021, 4:26am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/19 "2021-08-29T04:26:48Z")
Yes I have the data list on the first page and the detail on the second page, that’s not the answer to my solution… so your telling me with the entire list you then have to only have 1 row in an entire spreadsheet? Then it wouldn’t be any need for a list at all, I’m sorry but that is totally unclear to me. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [August 29, 2021, 5:45am UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/20 "2021-08-29T05:45:42Z")
I’m saying that if you want to display only one item in a DVL, then you need a data source with only one row. But that’s not my suggestion. If you read the “What I usually do…” part above, I’m saying that you should **not** use a DVL to display a single item. Just use image/label components to display the selected item’s data. Because you can generate the row id (green block) when clicking on a DVL item, you can assign that value to a variable and then use the variable on other screens (or the same screen) to pull information from the data source and display it however you like. ---
**Author:** ![Michael\_Rogulla](https://avatars.discourse-cdn.com/v4/letter/m/ba8739/32.png) [@Michael\_Rogulla](https://community.thunkable.com/u/Michael_Rogulla)\ **Post date:** [August 29, 2021, 10:22pm UTC](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095/21 "2021-08-29T22:22:43Z")
Hi @delee_techdeveloper , a Data Viewer List (DVL) is always connected to a data source. My data sources are connected to airtable, I don’t know if the following works also for other databases. When clicking on an entry of a DVL you get an ID (“row ID”) as a result. This ID is the index into your data source, the purple block: ![grafik](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/0/60f518500f6bf36aa4bc6690a10db01bfcb0d001.png) (BTW: when using other events of an DVL like “right swipe” or “left swipe” you get also the ID) You can query as many blocks (name, address, URL, …) as you like from your data source. I found that they work very slow, so I prefer getting one object, and pick the values from that object: ![grafik](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/b/bb5c94333952503674912ee6d6605e37cb719c3b.png) If you use a separate details screen, just store the “row ID” in an app variable, go to your details screen after the DVL click, and display all the information based on the row ID. Hope that helps. [Next page](https://community.thunkable.com/t/how-do-i-use-data-grid-to-navigate-to-detail-page/1404095.md?page=2)