Jewel DataGrid Column Sizing

classic Classic list List threaded Threaded
19 messages Options
Reply | Threaded
Open this post in threaded view
|

Jewel DataGrid Column Sizing

Brian Raymes

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

 

In Flex 3, it was possible to set the DataGrid’s width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

 

I’ve been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

 

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

 

This is how it appears with every build:

 

 

If the image does not display, here is an ascii representation:

 

---------------------------------------------------------------------------------------------------------------------------------------------

|                      WHEN                      |                      RECIPIENT                      |                      DURATION                      |

---------------------------------------------------------------------------------------------------------------------------------------------

|        |        |        |
|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

---------------------------------------------------------------------------------------------------------------------------------------------

 

Sample code:

 

xmlns:j="library://ns.apache.org/royale/jewel"

 

<j:Card>

 

<j:DataGrid

    id="activityLogDataGrid"

    width="100%"

    dataProvider="{activityLogs}"

    rowHeight="42"

    emphasis="emphasized">

     

    <j:columns>

     

        <j:DataGridColumn

            dataField="formattedTimestamp" label="When"/>

              

        <j:DataGridColumn

            dataField="recipient" label="Recipient"/>

              

        <j:DataGridColumn

            dataField="duration" label="Duration"/>

              

    </j:columns>

     

</j:DataGrid>

 

</j:Card>

 

 

Any help would be appreciated.

 

Brian

 

Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira
Hi Brian,
still not the right group ;)
can you upload the image to a service and post the link, can see the image
thanks

El mar., 18 feb. 2020 a las 1:59, Brian Raymes (<[hidden email]>) escribió:
My apologies, sent to wrong group. Sending to Royale Users.

From: Brian Raymes <[hidden email]>
Sent: Monday, February 17, 2020 4:53 PM
To: '[hidden email]' <[hidden email]>
Subject: Jewel DataGrid Column Sizing

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

In Flex 3, it was possible to set the DataGrid's width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

I've been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

This is how it appears with every build:

[cid:image001.png@01D5E5B1.69171470]

Sample code:

xmlns:j="library://ns.apache.org/royale/jewel"

<j:Card>

<j:DataGrid
    id="activityLogDataGrid"
    width="100%"
    dataProvider="{activityLogs}"
    rowHeight="42"
    emphasis="emphasized">

    <j:columns>

        <j:DataGridColumn
            dataField="formattedTimestamp" label="When"/>

        <j:DataGridColumn
            dataField="recipient" label="Recipient"/>

        <j:DataGridColumn
            dataField="duration" label="Duration"/>

    </j:columns>

</j:DataGrid>

</j:Card>


Any help would be appreciated.

Brian


--



Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


Conócenos en 1 minuto!


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIFA85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada enPaseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de [hidden email]


Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
In reply to this post by Brian Raymes
Hi Brian,
thanks for reporting, I'll take a look

El mar., 18 feb. 2020 a las 2:05, Brian Raymes (<[hidden email]>) escribió:

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

 

In Flex 3, it was possible to set the DataGrid’s width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

 

I’ve been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

 

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

 

This is how it appears with every build:

 

 

If the image does not display, here is an ascii representation:

 

---------------------------------------------------------------------------------------------------------------------------------------------

|                      WHEN                      |                      RECIPIENT                      |                      DURATION                      |

---------------------------------------------------------------------------------------------------------------------------------------------

|        |        |        |
|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

---------------------------------------------------------------------------------------------------------------------------------------------

 

Sample code:

 

xmlns:j="library://ns.apache.org/royale/jewel"

 

<j:Card>

 

<j:DataGrid

    id="activityLogDataGrid"

    width="100%"

    dataProvider="{activityLogs}"

    rowHeight="42"

    emphasis="emphasized">

     

    <j:columns>

     

        <j:DataGridColumn

            dataField="formattedTimestamp" label="When"/>

              

        <j:DataGridColumn

            dataField="recipient" label="Recipient"/>

              

        <j:DataGridColumn

            dataField="duration" label="Duration"/>

              

    </j:columns>

     

</j:DataGrid>

 

</j:Card>

 

 

Any help would be appreciated.

 

Brian

 



--
Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

yishayw
In reply to this post by Carlos Rovira

I think [1] you need to either use percentages or fixed width. Mixing them is not supported.

 

[1] https://stackoverflow.com/questions/58438995/how-to-set-column-100-width-on-basic-jsdatagrid-on-apache-royale

 

From: [hidden email]
Sent: Tuesday, February 18, 2020 9:26 AM
To: [hidden email]; [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

still not the right group ;)

can you upload the image to a service and post the link, can see the image

thanks

 

El mar., 18 feb. 2020 a las 1:59, Brian Raymes (<[hidden email]>) escribió:

My apologies, sent to wrong group. Sending to Royale Users.

From: Brian Raymes <[hidden email]>
Sent: Monday, February 17, 2020 4:53 PM
To: '[hidden email]' <[hidden email]>
Subject: Jewel DataGrid Column Sizing

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

In Flex 3, it was possible to set the DataGrid's width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

I've been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

This is how it appears with every build:

[cid:image001.png@01D5E5B1.69171470]

Sample code:

xmlns:j="library://ns.apache.org/royale/jewel"

<j:Card>

<j:DataGrid
    id="activityLogDataGrid"
    width="100%"
    dataProvider="{activityLogs}"
    rowHeight="42"
    emphasis="emphasized">

    <j:columns>

        <j:DataGridColumn
            dataField="formattedTimestamp" label="When"/>

        <j:DataGridColumn
            dataField="recipient" label="Recipient"/>

        <j:DataGridColumn
            dataField="duration" label="Duration"/>

    </j:columns>

</j:DataGrid>

</j:Card>


Any help would be appreciated.

Brian


 

--

 

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com

 

Conócenos en 1 minuto!

 

AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIFA85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada enPaseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de [hidden email]



 

Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
Hi Yishay,

Brian is using Jewel DataGrid. The Jewel version is designed to make possible to work with pixel values and with percentage values. I'll respond now what I see in the royale thread

thanks 

El mar., 18 feb. 2020 a las 10:43, Yishay Weiss (<[hidden email]>) escribió:
I think [1] you need to either use percentages or fixed width. Mixing them is not supported.

[1] https://stackoverflow.com/questions/58438995/how-to-set-column-100-width-on-basic-jsdatagrid-on-apache-royale

From: Carlos Rovira<mailto:[hidden email]>
Sent: Tuesday, February 18, 2020 9:26 AM
To: [hidden email]<mailto:[hidden email]>; [hidden email]<mailto:[hidden email]>
Subject: Re: Jewel DataGrid Column Sizing

Hi Brian,
still not the right group ;)
can you upload the image to a service and post the link, can see the image
thanks

El mar., 18 feb. 2020 a las 1:59, Brian Raymes (<[hidden email]<mailto:[hidden email]>>) escribió:
My apologies, sent to wrong group. Sending to Royale Users.

From: Brian Raymes <[hidden email]<mailto:[hidden email]>>
Sent: Monday, February 17, 2020 4:53 PM
To: '[hidden email]<mailto:[hidden email]>' <[hidden email]<mailto:[hidden email]>>
Subject: Jewel DataGrid Column Sizing

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

In Flex 3, it was possible to set the DataGrid's width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

I've been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

This is how it appears with every build:

[cid:image001.png@01D5E5B1.69171470]

Sample code:

xmlns:j="library://ns.apache.org/royale/jewel<http://ns.apache.org/royale/jewel>"

<j:Card>

<j:DataGrid
    id="activityLogDataGrid"
    width="100%"
    dataProvider="{activityLogs}"
    rowHeight="42"
    emphasis="emphasized">

    <j:columns>

        <j:DataGridColumn
            dataField="formattedTimestamp" label="When"/>

        <j:DataGridColumn
            dataField="recipient" label="Recipient"/>

        <j:DataGridColumn
            dataField="duration" label="Duration"/>

    </j:columns>

</j:DataGrid>

</j:Card>


Any help would be appreciated.

Brian


--

[https://drive.google.com/a/codeoscopic.com/uc?id=1Mctdl3ft3ZHWiLZWbhx_8K1rlt6NUHjg&export=download]



Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com<http://www.codeoscopic.com/>



Conócenos en 1 minuto!<https://avant2.es/#video>



AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIFA85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada enPaseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email [hidden email]<mailto:[hidden email]>, con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de [hidden email]<mailto:[hidden email]>





--
Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
In reply to this post by Carlos Rovira-2
Hi Brian,

the example is very similar to the one in Tour De Jewel here [1] that is working, that uses width 100% for the datagrid, and since no width por columns is specified it defaults to the same proportional width for each column. Did you check TDJ examples?

In your image it seems like there's no data. Maybe there's some runtime error. Can you check in the browser console if something is wrong?

A part from that, there could be other width issues as we all try this new component. Let me know more about this issue.




El mar., 18 feb. 2020 a las 9:31, Carlos Rovira (<[hidden email]>) escribió:
Hi Brian,
thanks for reporting, I'll take a look

El mar., 18 feb. 2020 a las 2:05, Brian Raymes (<[hidden email]>) escribió:

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

 

In Flex 3, it was possible to set the DataGrid’s width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

 

I’ve been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

 

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

 

This is how it appears with every build:

 

 

If the image does not display, here is an ascii representation:

 

---------------------------------------------------------------------------------------------------------------------------------------------

|                      WHEN                      |                      RECIPIENT                      |                      DURATION                      |

---------------------------------------------------------------------------------------------------------------------------------------------

|        |        |        |
|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

---------------------------------------------------------------------------------------------------------------------------------------------

 

Sample code:

 

xmlns:j="library://ns.apache.org/royale/jewel"

 

<j:Card>

 

<j:DataGrid

    id="activityLogDataGrid"

    width="100%"

    dataProvider="{activityLogs}"

    rowHeight="42"

    emphasis="emphasized">

     

    <j:columns>

     

        <j:DataGridColumn

            dataField="formattedTimestamp" label="When"/>

              

        <j:DataGridColumn

            dataField="recipient" label="Recipient"/>

              

        <j:DataGridColumn

            dataField="duration" label="Duration"/>

              

    </j:columns>

     

</j:DataGrid>

 

</j:Card>

 

 

Any help would be appreciated.

 

Brian

 



--


--
Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

yishayw
In reply to this post by Carlos Rovira-2

Can you mix pixel and percent? E.g

 

<column width=”40”/>

<column widt

 

From: [hidden email]
Sent: Tuesday, February 18, 2020 3:36 PM
To: [hidden email]; [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Yishay,

 

Brian is using Jewel DataGrid. The Jewel version is designed to make possible to work with pixel values and with percentage values. I'll respond now what I see in the royale thread

 

thanks 

 

El mar., 18 feb. 2020 a las 10:43, Yishay Weiss (<[hidden email]>) escribió:

I think [1] you need to either use percentages or fixed width. Mixing them is not supported.

[1] https://stackoverflow.com/questions/58438995/how-to-set-column-100-width-on-basic-jsdatagrid-on-apache-royale

From: Carlos Rovira<mailto:[hidden email]>
Sent: Tuesday, February 18, 2020 9:26 AM
To: [hidden email]<mailto:[hidden email]>; [hidden email]<mailto:[hidden email]>
Subject: Re: Jewel DataGrid Column Sizing

Hi Brian,
still not the right group ;)
can you upload the image to a service and post the link, can see the image
thanks

El mar., 18 feb. 2020 a las 1:59, Brian Raymes (<[hidden email]<mailto:[hidden email]>>) escribió:
My apologies, sent to wrong group. Sending to Royale Users.

From: Brian Raymes <[hidden email]<mailto:[hidden email]>>
Sent: Monday, February 17, 2020 4:53 PM
To: '[hidden email]<mailto:[hidden email]>' <[hidden email]<mailto:[hidden email]>>
Subject: Jewel DataGrid Column Sizing

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

In Flex 3, it was possible to set the DataGrid's width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

I've been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

This is how it appears with every build:

[cid:image001.png@01D5E5B1.69171470]

Sample code:

xmlns:j="library://ns.apache.org/royale/jewel<http://ns.apache.org/royale/jewel>"

<j:Card>

<j:DataGrid
    id="activityLogDataGrid"
    width="100%"
    dataProvider="{activityLogs}"
    rowHeight="42"
    emphasis="emphasized">

    <j:columns>

        <j:DataGridColumn
            dataField="formattedTimestamp" label="When"/>

        <j:DataGridColumn
            dataField="recipient" label="Recipient"/>

        <j:DataGridColumn
            dataField="duration" label="Duration"/>

    </j:columns>

</j:DataGrid>

</j:Card>


Any help would be appreciated.

Brian


--

[https://drive.google.com/a/codeoscopic.com/uc?id=1Mctdl3ft3ZHWiLZWbhx_8K1rlt6NUHjg&export=download]



Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com<http://www.codeoscopic.com/>



Conócenos en 1 minuto!<https://avant2.es/#video>



AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIFA85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada enPaseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email [hidden email]<mailto:[hidden email]>, con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de [hidden email]<mailto:[hidden email]>



 

--

 

 

Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

yishayw

Sorry Carlos, sent too soon. This may or may not be relevant to what Brian is asking, so I don’t want to distract him from your answer.

 

From: [hidden email]
Sent: Tuesday, February 18, 2020 10:32 PM
To: [hidden email]; [hidden email]
Subject: RE: Jewel DataGrid Column Sizing

 

Can you mix pixel and percent? E.g

 

<column width=”40”/>

<column widt

 

From: [hidden email]
Sent: Tuesday, February 18, 2020 3:36 PM
To: [hidden email]; [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Yishay,

 

Brian is using Jewel DataGrid. The Jewel version is designed to make possible to work with pixel values and with percentage values. I'll respond now what I see in the royale thread

 

thanks 

 

El mar., 18 feb. 2020 a las 10:43, Yishay Weiss (<[hidden email]>) escribió:

I think [1] you need to either use percentages or fixed width. Mixing them is not supported.

[1] https://stackoverflow.com/questions/58438995/how-to-set-column-100-width-on-basic-jsdatagrid-on-apache-royale

From: Carlos Rovira<mailto:[hidden email]>
Sent: Tuesday, February 18, 2020 9:26 AM
To: [hidden email]<mailto:[hidden email]>; [hidden email]<mailto:[hidden email]>
Subject: Re: Jewel DataGrid Column Sizing

Hi Brian,
still not the right group ;)
can you upload the image to a service and post the link, can see the image
thanks

El mar., 18 feb. 2020 a las 1:59, Brian Raymes (<[hidden email]<mailto:[hidden email]>>) escribió:
My apologies, sent to wrong group. Sending to Royale Users.

From: Brian Raymes <[hidden email]<mailto:[hidden email]>>
Sent: Monday, February 17, 2020 4:53 PM
To: '[hidden email]<mailto:[hidden email]>' <[hidden email]<mailto:[hidden email]>>
Subject: Jewel DataGrid Column Sizing

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

In Flex 3, it was possible to set the DataGrid's width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

I've been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

This is how it appears with every build:

[cid:image001.png@01D5E5B1.69171470]

Sample code:

xmlns:j="library://ns.apache.org/royale/jewel<http://ns.apache.org/royale/jewel>"

<j:Card>

<j:DataGrid
    id="activityLogDataGrid"
    width="100%"
    dataProvider="{activityLogs}"
    rowHeight="42"
    emphasis="emphasized">

    <j:columns>

        <j:DataGridColumn
            dataField="formattedTimestamp" label="When"/>

        <j:DataGridColumn
            dataField="recipient" label="Recipient"/>

        <j:DataGridColumn
            dataField="duration" label="Duration"/>

    </j:columns>

</j:DataGrid>

</j:Card>


Any help would be appreciated.

Brian


--

[https://drive.google.com/a/codeoscopic.com/uc?id=1Mctdl3ft3ZHWiLZWbhx_8K1rlt6NUHjg&export=download]



Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com<http://www.codeoscopic.com/>



Conócenos en 1 minuto!<https://avant2.es/#video>



AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIFA85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada enPaseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email [hidden email]<mailto:[hidden email]>, con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de [hidden email]<mailto:[hidden email]>


 

--

 

 

 

Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

Brian Raymes
In reply to this post by Carlos Rovira-2

Hi Carlos,

 

I am using a “gutted-clone” of Tour De Jewel as a place to test out Jewel (same navigation, drawer, etc). Just my own ScrollableSectionContent within for test.

 

We use MXRoyale for RemoteObjects (Java/BlazeDS). At the moment, I populate the data after the view is displayed.

 

My requirement is to build a responsive UI, so Tour De Jewel seems to be a great place to start given that it is a great responsive example.

 

The image I shared before is with no data as my expectation is data should not be a requirement for proper renderering. But, to help describe my issues, I have provided examples with and without data as there seems to be several inconsistencies in most scenarios.

 

My basic expectation is that columns will auto split remaining space when not set to fixed-widths as that is how Flex behaved. In every case, it fails.

 

Here are a few scenarios with my expectations, and actual results:

 

Scenario 1: DataGrid with 600px width with three columns with no widths set.

Expectation: Each would auto set to 200px.

Actual, before data: Headers are evenly sized, columns as well, but in no relation to the headers.

 

 

Actual after data: Same as before data, but with data. Headers do not match.

 

 

Scenario 2: DataGrid with 100% width with first column set to 100px and the other two not set.

Expectation: First column would be 100px and both other columns would split the remaining width.

Actual, before data: First column is 100px, with the second and third the same as above. Headers do not match at all.

 

 

Actual, after data: Same as above, with data.

 

 

Scenario 3: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column would be 100px and both other columns would split the remaining width.

Actual, before data: Second column is 100 px, first and third are small with. Headers do not match.

 

 

Actual, after data: Same as above, with data. Headers do not match.

 

 

This is where things start to get really weird:

 

Scenario 4: DataGrid with 600px width with first column set to 100px and the other two not set.

Expectation: First column would be auto set to 100px, second and third would be 250px each (auto filling remaining space).

Actual, before data: It looks like the first is 100px, with the second and third as 1px? Headers do not match.

 

 

Actual, after data: The first column is 100px, the second is considerably large (larger than any of the contents), and the third is somewhat larger than before, but not by much. A horizontal scrollbar is added, and the headers do not match at all.

 

 

Scenario 5: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column will be 100px wide with the first and third splitting the remaining space (250px each).

Actual, before data: First column may be 1px wide, second is 100px, and third may be 1px? Headers do not match.

 

 

Actual, after data: First column is randomly ~220px wide, second is 100px, and third is, well, something. Headers do not match.

 

 

Lastly: The DataGrid “height” property seems to literally do nothing at all. If I attempt width=”600” height=”600”, it is always the same height as any picture I posted above.

 

--------------------------------

 

As for console errors, there are none.

 

Please let me know if there is anything else I can provide to assist with this issue.

 

 

Thank you,

 

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Tuesday, February 18, 2020 5:42 AM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

the example is very similar to the one in Tour De Jewel here [1] that is working, that uses width 100% for the datagrid, and since no width por columns is specified it defaults to the same proportional width for each column. Did you check TDJ examples?

 

In your image it seems like there's no data. Maybe there's some runtime error. Can you check in the browser console if something is wrong?

 

A part from that, there could be other width issues as we all try this new component. Let me know more about this issue.

 

 

 

 

El mar., 18 feb. 2020 a las 9:31, Carlos Rovira (<[hidden email]>) escribió:

Hi Brian,

thanks for reporting, I'll take a look

 

El mar., 18 feb. 2020 a las 2:05, Brian Raymes (<[hidden email]>) escribió:

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

 

In Flex 3, it was possible to set the DataGrid’s width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

 

I’ve been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

 

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

 

This is how it appears with every build:

 

 

If the image does not display, here is an ascii representation:

 

---------------------------------------------------------------------------------------------------------------------------------------------

|                      WHEN                      |                      RECIPIENT                      |                      DURATION                      |

---------------------------------------------------------------------------------------------------------------------------------------------

|        |        |        |
|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

---------------------------------------------------------------------------------------------------------------------------------------------

 

Sample code:

 

xmlns:j="library://ns.apache.org/royale/jewel"

 

<j:Card>

 

<j:DataGrid

    id="activityLogDataGrid"

    width="100%"

    dataProvider="{activityLogs}"

    rowHeight="42"

    emphasis="emphasized">

     

    <j:columns>

     

        <j:DataGridColumn

            dataField="formattedTimestamp" label="When"/>

              

        <j:DataGridColumn

            dataField="recipient" label="Recipient"/>

              

        <j:DataGridColumn

            dataField="duration" label="Duration"/>

              

    </j:columns>

     

</j:DataGrid>

 

</j:Card>

 

 

Any help would be appreciated.

 

Brian

 


 

--

Carlos Rovira

 


 

--

Carlos Rovira

 

Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
Hi Brian,

I just committed a fix that fix datagrid layout when there's no dataprovider (or is empty) to show empty white columns.

I notice that you has scrollbars, so maybe you're using IE or Edge browser?

I tested in Mac's Chrome/Safari/Firefox but must say I didn't try on any Windows browser. So I just uploaded a fresh version of TDJ with latest changes and tried in latest Edge through BrowserStack.

Edge shows scrollbars while in Mac are hidden and part of the bounding box of the datagrid. I was in the believe that MS will make Edge more close to work as the rest of browsers, but seems that's not the case. So I must see how to fix that.

What I can't reproduce is the other strange columns layout scenarios. Can you provide me with a the simplest test project that showcase that cases? We'll get at the end of what could be happening.

Thanks for showing me the issues!

Carlos


El mié., 19 feb. 2020 a las 3:05, Brian Raymes (<[hidden email]>) escribió:

Hi Carlos,

 

I am using a “gutted-clone” of Tour De Jewel as a place to test out Jewel (same navigation, drawer, etc). Just my own ScrollableSectionContent within for test.

 

We use MXRoyale for RemoteObjects (Java/BlazeDS). At the moment, I populate the data after the view is displayed.

 

My requirement is to build a responsive UI, so Tour De Jewel seems to be a great place to start given that it is a great responsive example.

 

The image I shared before is with no data as my expectation is data should not be a requirement for proper renderering. But, to help describe my issues, I have provided examples with and without data as there seems to be several inconsistencies in most scenarios.

 

My basic expectation is that columns will auto split remaining space when not set to fixed-widths as that is how Flex behaved. In every case, it fails.

 

Here are a few scenarios with my expectations, and actual results:

 

Scenario 1: DataGrid with 600px width with three columns with no widths set.

Expectation: Each would auto set to 200px.

Actual, before data: Headers are evenly sized, columns as well, but in no relation to the headers.

 

 

Actual after data: Same as before data, but with data. Headers do not match.

 

 

Scenario 2: DataGrid with 100% width with first column set to 100px and the other two not set.

Expectation: First column would be 100px and both other columns would split the remaining width.

Actual, before data: First column is 100px, with the second and third the same as above. Headers do not match at all.

 

 

Actual, after data: Same as above, with data.

 

 

Scenario 3: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column would be 100px and both other columns would split the remaining width.

Actual, before data: Second column is 100 px, first and third are small with. Headers do not match.

 

 

Actual, after data: Same as above, with data. Headers do not match.

 

 

This is where things start to get really weird:

 

Scenario 4: DataGrid with 600px width with first column set to 100px and the other two not set.

Expectation: First column would be auto set to 100px, second and third would be 250px each (auto filling remaining space).

Actual, before data: It looks like the first is 100px, with the second and third as 1px? Headers do not match.

 

 

Actual, after data: The first column is 100px, the second is considerably large (larger than any of the contents), and the third is somewhat larger than before, but not by much. A horizontal scrollbar is added, and the headers do not match at all.

 

 

Scenario 5: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column will be 100px wide with the first and third splitting the remaining space (250px each).

Actual, before data: First column may be 1px wide, second is 100px, and third may be 1px? Headers do not match.

 

 

Actual, after data: First column is randomly ~220px wide, second is 100px, and third is, well, something. Headers do not match.

 

 

Lastly: The DataGrid “height” property seems to literally do nothing at all. If I attempt width=”600” height=”600”, it is always the same height as any picture I posted above.

 

--------------------------------

 

As for console errors, there are none.

 

Please let me know if there is anything else I can provide to assist with this issue.

 

 

Thank you,

 

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Tuesday, February 18, 2020 5:42 AM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

the example is very similar to the one in Tour De Jewel here [1] that is working, that uses width 100% for the datagrid, and since no width por columns is specified it defaults to the same proportional width for each column. Did you check TDJ examples?

 

In your image it seems like there's no data. Maybe there's some runtime error. Can you check in the browser console if something is wrong?

 

A part from that, there could be other width issues as we all try this new component. Let me know more about this issue.

 

 

 

 

El mar., 18 feb. 2020 a las 9:31, Carlos Rovira (<[hidden email]>) escribió:

Hi Brian,

thanks for reporting, I'll take a look

 

El mar., 18 feb. 2020 a las 2:05, Brian Raymes (<[hidden email]>) escribió:

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

 

In Flex 3, it was possible to set the DataGrid’s width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

 

I’ve been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

 

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

 

This is how it appears with every build:

 

 

If the image does not display, here is an ascii representation:

 

---------------------------------------------------------------------------------------------------------------------------------------------

|                      WHEN                      |                      RECIPIENT                      |                      DURATION                      |

---------------------------------------------------------------------------------------------------------------------------------------------

|        |        |        |
|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

---------------------------------------------------------------------------------------------------------------------------------------------

 

Sample code:

 

xmlns:j="library://ns.apache.org/royale/jewel"

 

<j:Card>

 

<j:DataGrid

    id="activityLogDataGrid"

    width="100%"

    dataProvider="{activityLogs}"

    rowHeight="42"

    emphasis="emphasized">

     

    <j:columns>

     

        <j:DataGridColumn

            dataField="formattedTimestamp" label="When"/>

              

        <j:DataGridColumn

            dataField="recipient" label="Recipient"/>

              

        <j:DataGridColumn

            dataField="duration" label="Duration"/>

              

    </j:columns>

     

</j:DataGrid>

 

</j:Card>

 

 

Any help would be appreciated.

 

Brian

 


 

--

Carlos Rovira

 


 

--

Carlos Rovira

 



--
Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

Brian Raymes

Hi Carlos,

 

I am using the latest Firefox Developer Edition, the latest Chrome, the latest iPad/iPhone Safari, and the latest Chrome on an older Android device.

 

All of these issues are seen on all of the browsers listed above. I have not actually tested with any MS browser.. until now. Same exact result as the other browsers (Edge 44).

 

I am also using the latest Royale compiler, typedefs, and asjs framework as I clean and rebuild daily, with ant, to pick up any changes.

 

As for your latest changes, they seem to introduce a new problem: all columns now scroll independently on all devices/browsers I listed above, and still are incorrectly sized.

 

 

I am working on a small test project to demonstrate the issue.

 

 

Thank you for taking the time to assist. I greatly appreciate it.

 

Brian

 

 

From: Carlos Rovira <[hidden email]>
Sent: Wednesday, February 19, 2020 3:48 AM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

I just committed a fix that fix datagrid layout when there's no dataprovider (or is empty) to show empty white columns.

 

I notice that you has scrollbars, so maybe you're using IE or Edge browser?

 

I tested in Mac's Chrome/Safari/Firefox but must say I didn't try on any Windows browser. So I just uploaded a fresh version of TDJ with latest changes and tried in latest Edge through BrowserStack.

 

Edge shows scrollbars while in Mac are hidden and part of the bounding box of the datagrid. I was in the believe that MS will make Edge more close to work as the rest of browsers, but seems that's not the case. So I must see how to fix that.

 

What I can't reproduce is the other strange columns layout scenarios. Can you provide me with a the simplest test project that showcase that cases? We'll get at the end of what could be happening.

 

Thanks for showing me the issues!

 

Carlos

 

 

El mié., 19 feb. 2020 a las 3:05, Brian Raymes (<[hidden email]>) escribió:

Hi Carlos,

 

I am using a “gutted-clone” of Tour De Jewel as a place to test out Jewel (same navigation, drawer, etc). Just my own ScrollableSectionContent within for test.

 

We use MXRoyale for RemoteObjects (Java/BlazeDS). At the moment, I populate the data after the view is displayed.

 

My requirement is to build a responsive UI, so Tour De Jewel seems to be a great place to start given that it is a great responsive example.

 

The image I shared before is with no data as my expectation is data should not be a requirement for proper renderering. But, to help describe my issues, I have provided examples with and without data as there seems to be several inconsistencies in most scenarios.

 

My basic expectation is that columns will auto split remaining space when not set to fixed-widths as that is how Flex behaved. In every case, it fails.

 

Here are a few scenarios with my expectations, and actual results:

 

Scenario 1: DataGrid with 600px width with three columns with no widths set.

Expectation: Each would auto set to 200px.

Actual, before data: Headers are evenly sized, columns as well, but in no relation to the headers.

 

 

Actual after data: Same as before data, but with data. Headers do not match.

 

 

Scenario 2: DataGrid with 100% width with first column set to 100px and the other two not set.

Expectation: First column would be 100px and both other columns would split the remaining width.

Actual, before data: First column is 100px, with the second and third the same as above. Headers do not match at all.

 

 

Actual, after data: Same as above, with data.

 

 

Scenario 3: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column would be 100px and both other columns would split the remaining width.

Actual, before data: Second column is 100 px, first and third are small with. Headers do not match.

 

 

Actual, after data: Same as above, with data. Headers do not match.

 

 

This is where things start to get really weird:

 

Scenario 4: DataGrid with 600px width with first column set to 100px and the other two not set.

Expectation: First column would be auto set to 100px, second and third would be 250px each (auto filling remaining space).

Actual, before data: It looks like the first is 100px, with the second and third as 1px? Headers do not match.

 

 

Actual, after data: The first column is 100px, the second is considerably large (larger than any of the contents), and the third is somewhat larger than before, but not by much. A horizontal scrollbar is added, and the headers do not match at all.

 

 

Scenario 5: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column will be 100px wide with the first and third splitting the remaining space (250px each).

Actual, before data: First column may be 1px wide, second is 100px, and third may be 1px? Headers do not match.

 

 

Actual, after data: First column is randomly ~220px wide, second is 100px, and third is, well, something. Headers do not match.

 

 

Lastly: The DataGrid “height” property seems to literally do nothing at all. If I attempt width=”600” height=”600”, it is always the same height as any picture I posted above.

 

--------------------------------

 

As for console errors, there are none.

 

Please let me know if there is anything else I can provide to assist with this issue.

 

 

Thank you,

 

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Tuesday, February 18, 2020 5:42 AM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

the example is very similar to the one in Tour De Jewel here [1] that is working, that uses width 100% for the datagrid, and since no width por columns is specified it defaults to the same proportional width for each column. Did you check TDJ examples?

 

In your image it seems like there's no data. Maybe there's some runtime error. Can you check in the browser console if something is wrong?

 

A part from that, there could be other width issues as we all try this new component. Let me know more about this issue.

 

 

 

 

El mar., 18 feb. 2020 a las 9:31, Carlos Rovira (<[hidden email]>) escribió:

Hi Brian,

thanks for reporting, I'll take a look

 

El mar., 18 feb. 2020 a las 2:05, Brian Raymes (<[hidden email]>) escribió:

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

 

In Flex 3, it was possible to set the DataGrid’s width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

 

I’ve been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

 

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

 

This is how it appears with every build:

 

 

If the image does not display, here is an ascii representation:

 

---------------------------------------------------------------------------------------------------------------------------------------------

|                      WHEN                      |                      RECIPIENT                      |                      DURATION                      |

---------------------------------------------------------------------------------------------------------------------------------------------

|        |        |        |
|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

---------------------------------------------------------------------------------------------------------------------------------------------

 

Sample code:

 

xmlns:j="library://ns.apache.org/royale/jewel"

 

<j:Card>

 

<j:DataGrid

    id="activityLogDataGrid"

    width="100%"

    dataProvider="{activityLogs}"

    rowHeight="42"

    emphasis="emphasized">

     

    <j:columns>

     

        <j:DataGridColumn

            dataField="formattedTimestamp" label="When"/>

              

        <j:DataGridColumn

            dataField="recipient" label="Recipient"/>

              

        <j:DataGridColumn

            dataField="duration" label="Duration"/>

              

    </j:columns>

     

</j:DataGrid>

 

</j:Card>

 

 

Any help would be appreciated.

 

Brian

 


 

--

Carlos Rovira

 


 

--

Carlos Rovira

 


 

--

Carlos Rovira

 

Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

Brian Raymes

Hi Carlos,

 

Strangely enough, I can no longer replicate the individual scrolling columns…

 

I have committed a small test project here: https://github.com/brianraymes/jewel-component-test

 

Correct me if I’m wrong, but shouldn’t the DataGrid behave like an Excel spreadsheet? Show all rows/columns as empty regardless of data? If not, that’s fine, but I need to know the expected behavior.

 

For example, if I have a DataGrid with rowHeigh=”42” with enough space to show 10 rows, shouldn’t I see all of them in an empty state regardless of data? That, at the least, is how Flex behaved.

 

Here are screenshots of the linked demo project:

 

Initial load with your latest changes. All DataGrids start empty, columns are misaligned and/or not to the size set in the code. Headers are incorrectly sized in all cases.

 

 

LOAD SMALL DATA pressed. The only things that make sense is the columns set to 100px are 100px, but nothing else matches. Headers are incorrectly sized.

 

 

After CLEAR DATA pressed. Only the 100px columns are correct, in some cases, they have shrunk to 0/1px? Headers are incorrectly sized.

 

 

LOAD LARGE DATA pressed. Only the 100px columns are correctly sized. Headers are incorrectly sized.

 

 

CLEAR DATA pressed again. All columns now seem to have 0/1px height? No idea on widths.

 

 

 

Brian

 

From: Brian Raymes <[hidden email]>
Sent: Wednesday, February 19, 2020 9:42 AM
To: [hidden email]
Subject: RE: Jewel DataGrid Column Sizing

 

Hi Carlos,

 

I am using the latest Firefox Developer Edition, the latest Chrome, the latest iPad/iPhone Safari, and the latest Chrome on an older Android device.

 

All of these issues are seen on all of the browsers listed above. I have not actually tested with any MS browser.. until now. Same exact result as the other browsers (Edge 44).

 

I am also using the latest Royale compiler, typedefs, and asjs framework as I clean and rebuild daily, with ant, to pick up any changes.

 

As for your latest changes, they seem to introduce a new problem: all columns now scroll independently on all devices/browsers I listed above, and still are incorrectly sized.

 

 

I am working on a small test project to demonstrate the issue.

 

 

Thank you for taking the time to assist. I greatly appreciate it.

 

Brian

 

 

From: Carlos Rovira <[hidden email]>
Sent: Wednesday, February 19, 2020 3:48 AM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

I just committed a fix that fix datagrid layout when there's no dataprovider (or is empty) to show empty white columns.

 

I notice that you has scrollbars, so maybe you're using IE or Edge browser?

 

I tested in Mac's Chrome/Safari/Firefox but must say I didn't try on any Windows browser. So I just uploaded a fresh version of TDJ with latest changes and tried in latest Edge through BrowserStack.

 

Edge shows scrollbars while in Mac are hidden and part of the bounding box of the datagrid. I was in the believe that MS will make Edge more close to work as the rest of browsers, but seems that's not the case. So I must see how to fix that.

 

What I can't reproduce is the other strange columns layout scenarios. Can you provide me with a the simplest test project that showcase that cases? We'll get at the end of what could be happening.

 

Thanks for showing me the issues!

 

Carlos

 

 

El mié., 19 feb. 2020 a las 3:05, Brian Raymes (<[hidden email]>) escribió:

Hi Carlos,

 

I am using a “gutted-clone” of Tour De Jewel as a place to test out Jewel (same navigation, drawer, etc). Just my own ScrollableSectionContent within for test.

 

We use MXRoyale for RemoteObjects (Java/BlazeDS). At the moment, I populate the data after the view is displayed.

 

My requirement is to build a responsive UI, so Tour De Jewel seems to be a great place to start given that it is a great responsive example.

 

The image I shared before is with no data as my expectation is data should not be a requirement for proper renderering. But, to help describe my issues, I have provided examples with and without data as there seems to be several inconsistencies in most scenarios.

 

My basic expectation is that columns will auto split remaining space when not set to fixed-widths as that is how Flex behaved. In every case, it fails.

 

Here are a few scenarios with my expectations, and actual results:

 

Scenario 1: DataGrid with 600px width with three columns with no widths set.

Expectation: Each would auto set to 200px.

Actual, before data: Headers are evenly sized, columns as well, but in no relation to the headers.

 

 

Actual after data: Same as before data, but with data. Headers do not match.

 

 

Scenario 2: DataGrid with 100% width with first column set to 100px and the other two not set.

Expectation: First column would be 100px and both other columns would split the remaining width.

Actual, before data: First column is 100px, with the second and third the same as above. Headers do not match at all.

 

 

Actual, after data: Same as above, with data.

 

 

Scenario 3: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column would be 100px and both other columns would split the remaining width.

Actual, before data: Second column is 100 px, first and third are small with. Headers do not match.

 

 

Actual, after data: Same as above, with data. Headers do not match.

 

 

This is where things start to get really weird:

 

Scenario 4: DataGrid with 600px width with first column set to 100px and the other two not set.

Expectation: First column would be auto set to 100px, second and third would be 250px each (auto filling remaining space).

Actual, before data: It looks like the first is 100px, with the second and third as 1px? Headers do not match.

 

 

Actual, after data: The first column is 100px, the second is considerably large (larger than any of the contents), and the third is somewhat larger than before, but not by much. A horizontal scrollbar is added, and the headers do not match at all.

 

 

Scenario 5: DataGrid with 600px width with second column set to 100px and the other two not set.

Expectation: Second column will be 100px wide with the first and third splitting the remaining space (250px each).

Actual, before data: First column may be 1px wide, second is 100px, and third may be 1px? Headers do not match.

 

 

Actual, after data: First column is randomly ~220px wide, second is 100px, and third is, well, something. Headers do not match.

 

 

Lastly: The DataGrid “height” property seems to literally do nothing at all. If I attempt width=”600” height=”600”, it is always the same height as any picture I posted above.

 

--------------------------------

 

As for console errors, there are none.

 

Please let me know if there is anything else I can provide to assist with this issue.

 

 

Thank you,

 

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Tuesday, February 18, 2020 5:42 AM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

the example is very similar to the one in Tour De Jewel here [1] that is working, that uses width 100% for the datagrid, and since no width por columns is specified it defaults to the same proportional width for each column. Did you check TDJ examples?

 

In your image it seems like there's no data. Maybe there's some runtime error. Can you check in the browser console if something is wrong?

 

A part from that, there could be other width issues as we all try this new component. Let me know more about this issue.

 

 

 

 

El mar., 18 feb. 2020 a las 9:31, Carlos Rovira (<[hidden email]>) escribió:

Hi Brian,

thanks for reporting, I'll take a look

 

El mar., 18 feb. 2020 a las 2:05, Brian Raymes (<[hidden email]>) escribió:

I cannot seem to make the Jewel DataGrid size properly when the width is set to a percentage.

 

In Flex 3, it was possible to set the DataGrid’s width to a percentage, as well as columns, and/or mix/match with pixel widths. What am I missing?

 

I’ve been toying with examples within Jewel, and cannot seem to replicate the DataGrid that scales.

 

FYI, I am running the absolute latest as I build the framework from a local git clone that I update daily.

 

This is how it appears with every build:

 

 

If the image does not display, here is an ascii representation:

 

---------------------------------------------------------------------------------------------------------------------------------------------

|                      WHEN                      |                      RECIPIENT                      |                      DURATION                      |

---------------------------------------------------------------------------------------------------------------------------------------------

|        |        |        |
|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

|        |        |        |

---------------------------------------------------------------------------------------------------------------------------------------------

 

Sample code:

 

xmlns:j="library://ns.apache.org/royale/jewel"

 

<j:Card>

 

<j:DataGrid

    id="activityLogDataGrid"

    width="100%"

    dataProvider="{activityLogs}"

    rowHeight="42"

    emphasis="emphasized">

     

    <j:columns>

     

        <j:DataGridColumn

            dataField="formattedTimestamp" label="When"/>

              

        <j:DataGridColumn

            dataField="recipient" label="Recipient"/>

              

        <j:DataGridColumn

            dataField="duration" label="Duration"/>

              

    </j:columns>

     

</j:DataGrid>

 

</j:Card>

 

 

Any help would be appreciated.

 

Brian

 


 

--

Carlos Rovira

 


 

--

Carlos Rovira

 


 

--

Carlos Rovira

 

Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
Hi Brian,

ok, I was able to repro some of the issues thanks to your test project.

I think one issue could be that updated CSS with latest changes are only build from SASS files with Maven. Since you're using just ANT, you could eventually not have the latest updated CSS
each time I make changes to themes I try to compile and commit all changes to avoid that to be a problem. So although this could not be an issue, I think is
good you take into account to know how it works.

Other thing is I just commit few minutes ago a fix for "sameWidths", I did one this morning, but was still having issues. So right now empty data providers must generate Datagrids right with
columns and header aligned with the right widths and white. That should fix "columns are misaligned and/or not to the size set in the code"

About your question: "shouldn’t the DataGrid behave like an Excel spreadsheet? Show all rows/columns as empty regardless of data"
Sorry, but don't think so. The actual setup of empty lists that fills all the space and shows vertical lines but not horizontal lines is the way it works, since showing horizontal lines would imply
creating empty dummy rows. I don't have that as a feature, but you can create it yourself as a bead and even create a PR so I can check it and add to Royale so others interested can use it
and even add that to an example in TDJ.

I could reproduce the rest of problems that make columns shrink when load data from a button or clear data, I'll try to solve it as soon as I finish other thing I have on the plate right now and hope to have a fix tomorrow.

Finally, I see you have CSS files linked that mostly copy jewel themes. Why just not link the themes from Royale to get the updates? (unless you are doing changes to the themes to do your own)
 
Thanks

--

image012.png (13K) Download Attachment
image013.png (9K) Download Attachment
image014.png (16K) Download Attachment
image015.png (10K) Download Attachment
image016.png (21K) Download Attachment
image017.png (10K) Download Attachment
image018.png (21K) Download Attachment
image019.png (10K) Download Attachment
image020.png (25K) Download Attachment
image021.png (11K) Download Attachment
image022.png (26K) Download Attachment
image023.png (10K) Download Attachment
image001.png (116K) Download Attachment
image002.png (117K) Download Attachment
image003.png (114K) Download Attachment
image004.png (135K) Download Attachment
image005.png (114K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

Brian Raymes

Hi Carlos,

 

As for the CSS files, I was experimenting with how I may approach customizing themes based off of branding colors for various projects.

 

Would it be better for me to look at the SASS files for theme customization? They are new to me.

 

Also, would it be better for me to use Maven to build the compiler/framework instead of Ant for the time being?

 

I look forward to any updates related to DataGrids as they are used quite extensively in the Flex 3 application we are looking to migrate to Jewel.

 

Thank you,

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Wednesday, February 19, 2020 2:57 PM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

ok, I was able to repro some of the issues thanks to your test project.

 

I think one issue could be that updated CSS with latest changes are only build from SASS files with Maven. Since you're using just ANT, you could eventually not have the latest updated CSS

each time I make changes to themes I try to compile and commit all changes to avoid that to be a problem. So although this could not be an issue, I think is

good you take into account to know how it works.

 

Other thing is I just commit few minutes ago a fix for "sameWidths", I did one this morning, but was still having issues. So right now empty data providers must generate Datagrids right with

columns and header aligned with the right widths and white. That should fix "columns are misaligned and/or not to the size set in the code"

 

About your question: "shouldn’t the DataGrid behave like an Excel spreadsheet? Show all rows/columns as empty regardless of data"

Sorry, but don't think so. The actual setup of empty lists that fills all the space and shows vertical lines but not horizontal lines is the way it works, since showing horizontal lines would imply

creating empty dummy rows. I don't have that as a feature, but you can create it yourself as a bead and even create a PR so I can check it and add to Royale so others interested can use it

and even add that to an example in TDJ.

 

I could reproduce the rest of problems that make columns shrink when load data from a button or clear data, I'll try to solve it as soon as I finish other thing I have on the plate right now and hope to have a fix tomorrow.

 

Finally, I see you have CSS files linked that mostly copy jewel themes. Why just not link the themes from Royale to get the updates? (unless you are doing changes to the themes to do your own)

 

Thanks

 

--

Carlos Rovira

 

Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
Hi Brian,

El jue., 20 feb. 2020 a las 23:09, Brian Raymes (<[hidden email]>) escribió:

Hi Carlos,

 

As for the CSS files, I was experimenting with how I may approach customizing themes based off of branding colors for various projects.

 

Would it be better for me to look at the SASS files for theme customization? They are new to me.


I recommend to use SASS if you want a similar approach to code styles as to code with AS3. You get more organization, structure and error notified.
Code CSS can soon be a nightmare if you don't plan, the same as it happens with your App logic and views.
If you are doing something very small, then you can go with just CSS, since there will be a small number of lines and code involved. 

 

Also, would it be better for me to use Maven to build the compiler/framework instead of Ant for the time being?


I always recommend Maven over ANT for the same reason I recommend AS3/MXML over plain JS, or SASS over CSS, is a matter of reliability. If you work with ANT, then
you lose the dependency management of the libraries used, and if you use a CI, maven is suited for build better on CI servers, so building with maven makes you more safe about the compiled version you get in local is the same to what you get in the server.
 

 

I look forward to any updates related to DataGrids as they are used quite extensively in the Flex 3 application we are looking to migrate to Jewel.


Hope to reach soon to the issues you reported. In the meanwhile, to avoid this problems stops you, I can recommend you to use a List with an item renderer that allows you to at least develop other things that depend on the data showed. So when DG issues are solved, you just need to change List for DataGrid.

Thanks
 

 

Thank you,

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Wednesday, February 19, 2020 2:57 PM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

ok, I was able to repro some of the issues thanks to your test project.

 

I think one issue could be that updated CSS with latest changes are only build from SASS files with Maven. Since you're using just ANT, you could eventually not have the latest updated CSS

each time I make changes to themes I try to compile and commit all changes to avoid that to be a problem. So although this could not be an issue, I think is

good you take into account to know how it works.

 

Other thing is I just commit few minutes ago a fix for "sameWidths", I did one this morning, but was still having issues. So right now empty data providers must generate Datagrids right with

columns and header aligned with the right widths and white. That should fix "columns are misaligned and/or not to the size set in the code"

 

About your question: "shouldn’t the DataGrid behave like an Excel spreadsheet? Show all rows/columns as empty regardless of data"

Sorry, but don't think so. The actual setup of empty lists that fills all the space and shows vertical lines but not horizontal lines is the way it works, since showing horizontal lines would imply

creating empty dummy rows. I don't have that as a feature, but you can create it yourself as a bead and even create a PR so I can check it and add to Royale so others interested can use it

and even add that to an example in TDJ.

 

I could reproduce the rest of problems that make columns shrink when load data from a button or clear data, I'll try to solve it as soon as I finish other thing I have on the plate right now and hope to have a fix tomorrow.

 

Finally, I see you have CSS files linked that mostly copy jewel themes. Why just not link the themes from Royale to get the updates? (unless you are doing changes to the themes to do your own)

 

Thanks

 

--

Carlos Rovira

 



--



Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


Conócenos en 1 minuto!


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIFA85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada enPaseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de [hidden email]


Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
Hi Brian,
just let you know that in my latest commit I fixed some of the problems you reported in this thread with clearing and loading new data providers.
Still see problems in the second and third case in the width, I'll continue as part of the actual refactor I'm doing to improve datagrid in multiple parts.
So although is not completely solved, just want to let you know that some I could test your example and see some of them gone.

Thanks

Carlos



El vie., 21 feb. 2020 a las 14:45, Carlos Rovira (<[hidden email]>) escribió:
Hi Brian,

El jue., 20 feb. 2020 a las 23:09, Brian Raymes (<[hidden email]>) escribió:

Hi Carlos,

 

As for the CSS files, I was experimenting with how I may approach customizing themes based off of branding colors for various projects.

 

Would it be better for me to look at the SASS files for theme customization? They are new to me.


I recommend to use SASS if you want a similar approach to code styles as to code with AS3. You get more organization, structure and error notified.
Code CSS can soon be a nightmare if you don't plan, the same as it happens with your App logic and views.
If you are doing something very small, then you can go with just CSS, since there will be a small number of lines and code involved. 

 

Also, would it be better for me to use Maven to build the compiler/framework instead of Ant for the time being?


I always recommend Maven over ANT for the same reason I recommend AS3/MXML over plain JS, or SASS over CSS, is a matter of reliability. If you work with ANT, then
you lose the dependency management of the libraries used, and if you use a CI, maven is suited for build better on CI servers, so building with maven makes you more safe about the compiled version you get in local is the same to what you get in the server.
 

 

I look forward to any updates related to DataGrids as they are used quite extensively in the Flex 3 application we are looking to migrate to Jewel.


Hope to reach soon to the issues you reported. In the meanwhile, to avoid this problems stops you, I can recommend you to use a List with an item renderer that allows you to at least develop other things that depend on the data showed. So when DG issues are solved, you just need to change List for DataGrid.

Thanks
 

 

Thank you,

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Wednesday, February 19, 2020 2:57 PM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

 

ok, I was able to repro some of the issues thanks to your test project.

 

I think one issue could be that updated CSS with latest changes are only build from SASS files with Maven. Since you're using just ANT, you could eventually not have the latest updated CSS

each time I make changes to themes I try to compile and commit all changes to avoid that to be a problem. So although this could not be an issue, I think is

good you take into account to know how it works.

 

Other thing is I just commit few minutes ago a fix for "sameWidths", I did one this morning, but was still having issues. So right now empty data providers must generate Datagrids right with

columns and header aligned with the right widths and white. That should fix "columns are misaligned and/or not to the size set in the code"

 

About your question: "shouldn’t the DataGrid behave like an Excel spreadsheet? Show all rows/columns as empty regardless of data"

Sorry, but don't think so. The actual setup of empty lists that fills all the space and shows vertical lines but not horizontal lines is the way it works, since showing horizontal lines would imply

creating empty dummy rows. I don't have that as a feature, but you can create it yourself as a bead and even create a PR so I can check it and add to Royale so others interested can use it

and even add that to an example in TDJ.

 

I could reproduce the rest of problems that make columns shrink when load data from a button or clear data, I'll try to solve it as soon as I finish other thing I have on the plate right now and hope to have a fix tomorrow.

 

Finally, I see you have CSS files linked that mostly copy jewel themes. Why just not link the themes from Royale to get the updates? (unless you are doing changes to the themes to do your own)

 

Thanks

 

--

Carlos Rovira

 



--



Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


Conócenos en 1 minuto!


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIFA85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada enPaseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de [hidden email]




--
Reply | Threaded
Open this post in threaded view
|

RE: Jewel DataGrid Column Sizing

Brian Raymes

Thank you Carlos. I will continue to keep testing as I evaluate Royale.

 

FYI, one of the collapsing column bugs can be seen on the live Tour De Jewel site. If you click on any icon to remove a row in the 3rd DataGrid (width = 100%):

 

 

Thank you,

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Thursday, February 27, 2020 5:16 PM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

just let you know that in my latest commit I fixed some of the problems you reported in this thread with clearing and loading new data providers.

Still see problems in the second and third case in the width, I'll continue as part of the actual refactor I'm doing to improve datagrid in multiple parts.

So although is not completely solved, just want to let you know that some I could test your example and see some of them gone.

 

Thanks

 

Carlos

Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
Thanks Brian, for catching that. I think that's an unwanted side effect by reusing the item renderer in list example, since I didn't implement removing rows in that example. Thanks for letting me know!
I fixed yesterday an issue with height 100%, but this week will be taking over more DG issues in sizing and columns
thanks!

El lun., 2 mar. 2020 a las 18:33, Brian Raymes (<[hidden email]>) escribió:

Thank you Carlos. I will continue to keep testing as I evaluate Royale.

 

FYI, one of the collapsing column bugs can be seen on the live Tour De Jewel site. If you click on any icon to remove a row in the 3rd DataGrid (width = 100%):

 

 

Thank you,

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Thursday, February 27, 2020 5:16 PM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

just let you know that in my latest commit I fixed some of the problems you reported in this thread with clearing and loading new data providers.

Still see problems in the second and third case in the width, I'll continue as part of the actual refactor I'm doing to improve datagrid in multiple parts.

So although is not completely solved, just want to let you know that some I could test your example and see some of them gone.

 

Thanks

 

Carlos



--
Reply | Threaded
Open this post in threaded view
|

Re: Jewel DataGrid Column Sizing

Carlos Rovira-2
 Hi Brian,

I think width and height issues in Jewel DataGrid are solved with my latest commit. 

Notice that Piotr signal another problem with Item renderers due to latest changes on initializers that I must still fix, but not related to this one.

Please take a look and let me know if you find any other problems.

Thanks

Carlos



El lun., 2 mar. 2020 a las 22:56, Carlos Rovira (<[hidden email]>) escribió:
Thanks Brian, for catching that. I think that's an unwanted side effect by reusing the item renderer in list example, since I didn't implement removing rows in that example. Thanks for letting me know!
I fixed yesterday an issue with height 100%, but this week will be taking over more DG issues in sizing and columns
thanks!

El lun., 2 mar. 2020 a las 18:33, Brian Raymes (<[hidden email]>) escribió:

Thank you Carlos. I will continue to keep testing as I evaluate Royale.

 

FYI, one of the collapsing column bugs can be seen on the live Tour De Jewel site. If you click on any icon to remove a row in the 3rd DataGrid (width = 100%):

 

 

Thank you,

Brian

 

From: Carlos Rovira <[hidden email]>
Sent: Thursday, February 27, 2020 5:16 PM
To: [hidden email]
Subject: Re: Jewel DataGrid Column Sizing

 

Hi Brian,

just let you know that in my latest commit I fixed some of the problems you reported in this thread with clearing and loading new data providers.

Still see problems in the second and third case in the width, I'll continue as part of the actual refactor I'm doing to improve datagrid in multiple parts.

So although is not completely solved, just want to let you know that some I could test your example and see some of them gone.

 

Thanks

 

Carlos



--


--