TextInput in a DataGrid

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

TextInput in a DataGrid

kamcknig
Hey everyone,

I'm using a spark DataGrid that has an inline ItemRenderer which has a TextInput inside of it. Whenever the data provider for the DataGrid changes the amount of ItemRenderers change based on the length of the dataProvider properly, but the TextInput's text doesnt empty back out. Any renderer's used previously still have their values filled in.

I have set useVirtualLayout to false on the VerticalLayout I've given it. I've tried adding an initialText property to the data items and then setting text="{ data.initialText }" and that clears out the field, but then when the user puts the cursor in the text area and types the first key they press doesn't seem to be registered, only on the second key does text actually get entered.

Following is the DataGrid in MXML the denominationCount TextInput is the one that I would like cleared when the dataProvider is refreshed.

<s:DataGroup id="denominationsDataGroup">
    <s:layout>
        <s:VerticalLayout gap="5" useVirtualLayout="false" />
    </s:layout>

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer autoDrawBackground="false">
                <fx:Script>
                    <![CDATA[
                        import com.accesso.utils.CurrencyFormatterWrapper
                    ]]>
                </fx:Script>

                <s:HGroup verticalAlign="middle">
                    <s:Label styleName="uiMockuptext"
                        width="100"
                        textAlign="right"
                        text="{ data.name == -1 ? '' : CurrencyFormatterWrapper.format(data.name) }" />

                    <s:TextInput id="denominationCount"
                        textAlign="center"
                        width="50"
                        change="{ outerDocument.updateTotal(data, denominationCount.text) }" />

                    <s:Label text=" = " />

                    <s:Label width="100"
                        styleName="uiMockupText"
                        text="{ CurrencyFormatterWrapper.format(data.flex_value) }" />
                </s:HGroup>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: TextInput in a DataGrid

kamcknig
Well apparently the text didn't show up in the email but it does on the
forum sight.

Not sure how this will show up but here it is via email.

<s:DataGroup id="denominationsDataGroup">
    <s:layout>
        <s:VerticalLayout gap="5" useVirtualLayout="false" />
    </s:layout>

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer autoDrawBackground="false">
                <fx:Script>
                    <![CDATA[
                        import com.accesso.utils.CurrencyFormatterWrapper
                    ]]>
                </fx:Script>

                <s:HGroup verticalAlign="middle">
                    <s:Label styleName="uiMockuptext"
                        width="100"
                        textAlign="right"
                        text="{ data.name == -1 ? '' :
CurrencyFormatterWrapper.format(data.name) }" />

                    <s:TextInput id="denominationCount"
                        textAlign="center"
                        width="50"
                        change="{ outerDocument.updateTotal(data,
denominationCount.text) }" />

                    <s:Label text=" = " />

                    <s:Label width="100"
                        styleName="uiMockupText"
                        text="{
CurrencyFormatterWrapper.format(data.flex_value) }" />
                </s:HGroup>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>



Kyle McKnight
Senior UI Engineer - Accesso
602.515.1444 <(602)%20515-1444> (M)

On Tue, Jan 31, 2017 at 8:50 AM, kamcknig <[hidden email]> wrote:

Hey everyone,

I'm using a spark DataGrid that has an inline ItemRenderer which has a
TextInput inside of it. Whenever the data provider for the DataGrid changes
the amount of ItemRenderers change based on the length of the dataProvider
properly, but the TextInput's text doesnt empty back out. Any renderer's
used previously still have their values filled in.

I have set useVirtualLayout to false on the VerticalLayout I've given it.
I've tried adding an initialText property to the data items and then setting
text="{ data.initialText }" and that clears out the field, but then when the
user puts the cursor in the text area and types the first key they press
doesn't seem to be registered, only on the second key does text actually get
entered.

Following is the DataGrid in MXML the denominationCount TextInput is the one
that I would like cleared when the dataProvider is refreshed.





--
View this message in context:
http://apache-flex-users.2333346.n4.nabble.com/TextInput-in-a-DataGrid-tp14588.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: TextInput in a DataGrid

kamcknig
I solved it by binding the TextInput's text property to a property of the ItemRenderer's data Object and setting that data in a change handler on the TextInput and then calling dataProvider.itemUpdated().

I feel this is a bit hacky, so please, if anyone else has a way to do it, let me know? :)

Thanks!
Kyle
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: TextInput in a DataGrid

Josh Tynjala
That sounds like the correct way to do it to me. I'm not sure that
itemUpdated() should be required, but I haven't dealt with Flex item
renderers in a while, so maybe there some quirk I've forgotten.

Ultimately, you want to store any text or other data that is associated
with a specific item in the data provider. Item renderers get recycled, and
you need to replace text or anything else that may have been displayed
before. Flex has no way of knowing that the old text in your TextInput
should be cleared or set to a new value unless you tell it.

- Josh

On Jan 31, 2017 6:06 AM, "kamcknig" <[hidden email]> wrote:

I solved it by binding the TextInput's text property to a property of the
ItemRenderer's data Object and setting that data in a change handler on the
TextInput and then calling dataProvider.itemUpdated().

I feel this is a bit hacky, so please, if anyone else has a way to do it,
let me know? :)

Thanks!
Kyle



--
View this message in context: http://apache-flex-users.
2333346.n4.nabble.com/TextInput-in-a-DataGrid-tp14588p14590.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: TextInput in a DataGrid

kamcknig
I had thought that useVirtualLayout to false would stop it from re-using
renderers. And when I set the text initially to an empty string "" then the
text i entered would be registered and my totals would show up, but the
text itself wouldn't show up until i pressed another key. It was jus
tweird. But it is working th is way. So I suppose that's ok haha


Kyle McKnight
Senior UI Engineer - Accesso
602.515.1444 (M)

On Tue, Jan 31, 2017 at 10:44 AM, Josh Tynjala <[hidden email]>
wrote:

> That sounds like the correct way to do it to me. I'm not sure that
> itemUpdated() should be required, but I haven't dealt with Flex item
> renderers in a while, so maybe there some quirk I've forgotten.
>
> Ultimately, you want to store any text or other data that is associated
> with a specific item in the data provider. Item renderers get recycled, and
> you need to replace text or anything else that may have been displayed
> before. Flex has no way of knowing that the old text in your TextInput
> should be cleared or set to a new value unless you tell it.
>
> - Josh
>
> On Jan 31, 2017 6:06 AM, "kamcknig" <[hidden email]> wrote:
>
> I solved it by binding the TextInput's text property to a property of the
> ItemRenderer's data Object and setting that data in a change handler on the
> TextInput and then calling dataProvider.itemUpdated().
>
> I feel this is a bit hacky, so please, if anyone else has a way to do it,
> let me know? :)
>
> Thanks!
> Kyle
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/TextInput-in-a-DataGrid-tp14588p14590.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Loading...