justinmind-logo
 
Upvote 3

Creating data grid that is not simply a series of rows

Answered Victor Conesa 12 years ago

I am having problems figuring out how to create a data grid that is more complex than simply a series of rows and columns. I can see from the tutorials and user manual that it is possible, but I am not sure how to do so.


For example, what if I want to create a typical Amazon-style book listing with a Book Cover image on left and then Book Title, Author and Price on right. I can get them to display as one row, but not the way that I want it.

Best Answer
photo

Check out this tutorial to learn how to customize data grids.

Replies (26)
photo
1

Again this prototype http://www.justinmind.com/extras/down... can help you with that. Take a look at the screen called 'Health plans - choose plan'. There you 'll find a data grid. If you take a closer look you'll see that the first column has several things in it. The trick is to select the cell and, in the Properties - layout' select the 'Free layout' option. Then you will be able to move all the elements inside the cell freely.

photo
1

Hmm.. I am not seeing a screen named "Health Plans - choose plan". I see many screens that start off with "Health Plans" but none that have that name. When I scan through all of them, I don't see a data grid.

photo
1

Sorry, the prototype was wrong. Can you download it again please? Remember to clean your internet browser's cache.

photo
1

Found it. "Free Layout". That is what I was missing. Thanks.

photo
1

Cool!

photo
1

Is there any way to have the text inside a data grid cell wrap like this?


0bde9f0353398e77590619463daeb0fe

photo
1

Yes, you have to change the input type from text to text area in properties.

photo
1

Thanks, Victor,


Two issues. The text area is resizable and has a right-hand scrollbar.


Is it possible to:


- Disable or hide the draggable resize control in the bottom right corner of the text area


- Hide the scrollbar?


559898d46150c1538b9ce3183025d4d4

photo
1

Yes. There's a quick and dirty way and a more complex and clean one. The quick way is to make the text area longer than the column so the scroll bars and the corner are hidden below it. The other way is to remove that text area, place a rich text in the cell and create an on page load event on that text that sets the text's value as the attribute you want from the row.

photo
1

Hey Victor.


The quick and dirty way works for my purposes.


Thanks for your help!


D

photo
1

Good!

photo
1

Hi Victor,


I would still like to see a datagrid that offers the option to use a grid layout, rather than a row based layout.


The work arounds are fine with pagination or column filtering, but then using filters gets complex. WIth one of our products here: http://www.spreadshirt.net/-C59?tablo... I want to use the grid to mimic the product layout and then change the filter options in the brown area at the top.


With your product, I can do this but I have to use a workaround to make it seem like the grid is filtering... but I WANT to be able to use the Datagrid properly because it makes it easier to use as you layer on more complexity.


Markus.

photo
1

When you say column filtering workaround, are you talking about the file that Albert sent you?


I'm assuming you are talking about this tutorial when you say working around with pagination. http://www.justinmind.com/usernote/te...


If you really want data grid to use a grid layout, rather than a row based layout, and apply filter to those products,you can set a screen just for the filtered products.


Say, you select color blue and medium size on the filter. You need to create a screen that displays all the products that satisfy both conditions. You need to do this for all the different colors and sizes.


The hard part is doing the page where all the products are in there.This is complex because your on Page Load action event can get really long especially if you have that many products in a page (although it really is just copy/paste the action).


Once you have the products page ready, you can just duplicate that screen, delete all the other products that do not satisfy that particular filter, then rearrange the individual data grids.

photo
1

Hi John


Thanks for the ideas. But I think this proves the point, the datagrid element really doesn't work for grid based layouts when you're doing hi-fidelity prototypes because it's designed for row based layouts.


My problem is that presenting the data, then applying content filters such "funny" or "bestseller" and then filtering by colour are possible with a row based layout but not when you're working a grid layout (or at least, it's not easy)


I'd say this is a feature request?


M.

photo
1

Ok, I will tell our product manager about your feature request.

photo
1

Hi John,

Axure RP7 Beta includes a Repeater widget that does what I'm asking for.

However, when you read the forum posts you can see that grabbing data and using it on other screens isn't as easy as it is in your product.

As a VP Product working with 8 Agile teams, I know that Agile UXrs need the ability to go from lo-fi to sophisticated data prototypes and your data features are a major point of difference. Also, as someone who used Axure from version RP2 I know that their product is getting ever more complex where I can see your product is more manageable.

Would be great to see your datagrid working like the "repeater" concept. It would really complete the toolkit you offer and I prefer the usability of your product.

photo
1

FEATURE REQUEST


Hello, sorry for mistakes.


I am working on picture gallery prototype. Pictures are stored in database. And datagrids arranged like here but rows and columns are strait: http://photo.net/gallery/photocritiqu...


And I have to say it was not easy:


1. It was important to show that gallery is scrollable. So I did 15 datagrids and 105 pagination actions.


2. Next you need to rearrange 15 datagrid manually to find good padding between rows and columns.


3. There are some buttons user could click to select pictures she need. If database has (for example) 10 pictures with this filter, that last 5 datagrids will show the same picture #10.


O’k, let’s do another trick. We will count filtered items and add 15 “when-do” with 15 “show-hide datagrid” in each (225 actions total) for the “on click” event of the button.


We did it! Congratulation! And it took only 3 days to find out how to do this.


Nowadays pictures gallery pattern is very popular. I like JIM very much. But please, please, please add to the datagrid some of the most important feature from Axure’s 7 Beta “Repeater widget”:


1. Ability to repeat rows as vertically and horizontally.


2. Enter a value for Row and Column padding.


P.S.: there is a good intro: http://www.axure.com/forum/v7-beta-re...

photo
1

Hi Ev,


You can do the following.


1.Create you datamaster and include an extra datamaster field called “column”, for example.


2.You have to write the column number to the new field. For example, if you want to show five rows per column and 4 columns for page, write five times the number “1”, five times “2”, etc. If you have two or more pages, the first column of the second page will be "5".


8ec6f4fbdbdce2ba28ef116f258a85cf


3.Now, select your datagrid and configure it to show “0” rows per page.


4.Go to the outline and select the row cell where the images will be loaded. Click on “add event”.


5.Choose the “Set value” action and select the datagrid. Now, click on the calculator and create the following expression. When you’re done, click ok.


6.Go to the outline, select the datagrid and duplicate it. Now, you only have to change the value of the filter.

photo
1

You are genius!


Of course, It is so much easier this way. And I’ll use it in prototypes for simple galleries.


But in my situation, there is a problem. Look.


I have 9 button on page you could click on to show only pictures with kitchen or living room or bedroom etc... Moreover, you could select several buttons to make combination you need. I can’t do screen or panel for every combination (it’s obviously too much). And I can’t use your simple way in this case (or I just don’t know how to do it) because there may be the situation when in first column will be shown only 1 picture, in second - 5 picture, in third - 3 etc.


So, for situation like my one, I have to use many, many pagination...Or you could help me again.


Thank you.

photo
1

Hi Ev,


could you send your prototype to us? We will try to find the best solution for your case.


Thanks

photo
1

I'v sent the EvMazGallery prototype.

photo
1

We included a new widget in version 6.5 that will make this much easier.

photo
1

any chance I can get the sample prottoype mentioned years ago? http://www.justinmind.com/extras/down...


i am trying to do something simple: conditionally hide/show/change text inputs or buttons on a per row basis in a datagrid. It is frsutratingly easy to describe compared to how impossible it seems to be in the tool.

photo
1

What is this widget you speak of?

photo
1

Hi James,


The widget is called "Data Grid". See the screenshot attached.


https://www.dropbox.com/s/r5u6zja3p7r...


Best,


Sonia Durán

photo
1

Check out this tutorial to learn how to customize data grids.

Leave a Comment
 
Attach a file