setting up grid

[hupeky]

Hi,

I would like to use the declarative grid component but im not sure how to set the props up or what the structure of the children should be.

In a non declarative style the prop addColumnDefinition would be declared several times

grid.addColumnDefinition(100, true);
grid.addColumnDefinition(0.5);
grid.addColumnDefinition(0.5);
grid.addColumnDefinition(100, true);
grid.addRowDefinition(0.5);
grid.addRowDefinition(0.5);

however in the compoenent the prop can only be declared once.

<grid addColumnDefinition={}

further more the type definitinion for addColumnDefinition seems to be set to any. so i cant infer how to use it.

is there an example of how i can set grid up in react?

thanks for your time.

[brianzinn]

can you share a code sample that you would like to be declaratively done?

Then I think we can look at a declarative equivalent. The GUI components call ie: addControl(...) automatically behind the scenes. This is an example markup - appreciate any feedback:

<grid>
  <columnDefinition width={100} isPixel />
  <columnDefinition width={0.5} />
  <columnDefinition width={0.5} />
  <columnDefinition width={100} isPixel />
  <rowDefinition height={0.5}>...</rowDefinition>
  <rowDefinition height={0.5}>...</rowDefinition>
</grid>

I've never used the grid control before, so if you can prove the imperative code example then maybe we can work backwards. It looks like those methods are fluent (and return a grid), so I don't see a way to update ie: column width by updating <columnDefnition .../>. So, I'm not familiar with a good way to make it responsive to attaching width to state. Also, looking for how to declaratively add row content.

[brianzinn]

Feel free to move this to an issue if possible and we can work on a PR.

[hupeky]

Hi Brian, thanks for your reply.

sounds like a great solution.

I dont hav any code examples of where ive used a grid in Babyon yet. but im building this kind of design which currently i just do by building separate stackPanels as rows and then build the number of rows i need.

we are also doing the same thing right now for our pagination views