Table View how to bind to change events of fields on rows

Questions
1

I have a tableview I set the datasource for. It binds up and you can edits the contents of rows.

It also populates the edits with what data was in the rows already.

I am trying to figure out what event to bind to to know a row was edited so I can mark the data as dirty for saving back to the server.

I have tried binding to UIEvent.CHANGE on the table and on the specific fields but that doesn’t appear to trigger. Any suggestions on where to look for this would be appreciated.

      <tableview id="answersTable" width="100%" height="100%">
          <header width="100%">
              <column id="correct" text="Correct" width="80" />
              <column id="answer" text="Answer" width="100%" />
              <column id="deleteAnswer" text="" width="80" />
          </header>
          <item-renderer verticalAlign="center" >
              <textfield id="answer" verticalAlign="center"  width="100%"/>
          </item-renderer>
          <item-renderer verticalAlign="center" >
              <checkbox id="correct" horizontalAlign="center"/>
          </item-renderer>
          <item-renderer  verticalAlign="center">
              <button id="deleteAnswer" width="100%" text="Delete"/>
          </item-renderer>

          <data>
          </data>
      </tableview>



    @:bind(answersTable, UIEvent.CHANGE)
    @:bind(answer, UIEvent.CHANGE)
    private function tableChanged(q){
        trace("update detected ",q);
    }

Neither of those binds trigger when I edit the table row value for question.

I am very new to HaxeUI so I am aware I may be missing something obvious.

2

Hello… welcome!

So I was about to link you to a component explorer example, except i found out instead that there isnt one! The basic idea is that any interactive component in a item renderer will dispatch a “ItemEvent”, heres a basic idea: http://haxeui.org/builder/?3a9657d2. Heres the code for completness:

	<tableview id="theTable" width="100%" height="200" styleName="editable-table">
		<header width="100%">
			<column id="colA" text="Column A" width="100%" />
			<column id="colB" text="Column B" width="100%" />
			<column id="colC" text="Column C" width="100%" />
		</header>

		<item-renderer>
			<textfield id="colA" width="100%" />
		</item-renderer>
		<item-renderer>
			<textfield id="colB" width="100%" />
		</item-renderer>
		<item-renderer>
			<textfield id="colC" width="100%" />
		</item-renderer>
	</tableview>

...
    @:bind(theTable, ItemEvent.COMPONENT_CHANGE_EVENT)
    private function onTheTableComponentChangeEvent(event:ItemEvent) {
        trace(event.source.id + " changed to '" + event.source.value + "'");
    }
...

Hope that helps.

Cheers,
Ian

PS: ill see about adding an example to the explorer :slight_smile:

3

Thank you that was what I was missing.

1 Like
4

fyi, i found an example: http://haxeui.org/explorer/#containers/list_views/component_events

Its for listview, but the concept is the same for any ItemRenderer

Cheers,
Ian