Databinding doesnt work

[pc11000]

Hi
I think thats an easy one.

I have a json-object containing items with two attributes (name,state)

I try to bind this into iron-data-table

<template is="dom-bind" >
  <remote-data data-source="{{riskCombined}}" ></remote-data>
  <iron-data-table selection-enabled size="100000" data-source="[[riskCombined]]"  >
    <data-table-column name="First Name">
      <template>[[item.name]]</template>
    </data-table-column>
    <data-table-column name="Last Name">
      <template>[[item.state]]</template>
    </data-table-column>
    <data-table-column name="Email">
      <template>test</template>
    </data-table-column>
  </iron-data-table>
</template>

Where am I going wrong?

[joebordes]

Have you loaded the remote-data component? It is defined below in the demo code. Try a direct iron-ajax to get the information

[pc11000]

I have two ajax requests:

` <iron-ajax auto verbose
      url="../state"
      last-response="{{ajaxResponse}}"
      last-error="{{ajaxError}}"
      on-response="handleResponse"
      ></iron-ajax>

   <iron-ajax auto verbose
  url="../name"
  last-response="{{ajaxResponse}}"
  last-error="{{ajaxError}}"
  on-response="handleResponse1"
  ></iron-ajax>`

put them into arrays

`    handleResponse: function(data) {
 this.riskNamesArr = data.detail.response.items;
      },

  handleResponse1: function(data) {
 this.StateArr = data.detail.response.items;
      }`

and combine them into one object:

properties: {
   riskNamesArr: {
              type: Array,
              notify: true
            },

         StateArr: {
                type: Array,
                notify: true
             },

             testArr: {
                 type: Array,
                 notify: true
              },

              riskCombined: {
                  computed: '_computeRiskCombo(riskNamesArr, StateArr)'
                }
}

    _computeRiskCombo: function(riskNamesArr, StateArr) {
                return this.testArr = this.riskNamesArr.map( function(x, i){
                    return {"name": x, "state": this.StateArr[i]}
                }.bind(this));
            },

This is working with paper-datatable but not with iron-data-table

[web-padawan]

If you have two properties testArr and riskCombined, and only the first has a notify: true, try using this:

<remote-data test-arr="{{riskCombined}}" ></remote-data>

[pc11000]

this ends in a

Uncaught TypeError: dataSource is not a function

[web-padawan]

My mistake, try using items instead of data-source attribute.

[pc11000]

finally its working with items but why?

[web-padawan]

When using data-source instead of items, you should pass a function which loads items lazily, not an array. It might look like this:

properties: {
  dataSource: {
    value: function () {
      return this._dataSource.bind(this);
    }
  }
},
_dataSource: function (opts, callback) {
  // perform some requests here
  callback(); 
}

[pc11000]

ah ok, thank you!

[Saulis]

@pad90 you got everything sorted out?

[pc11000]

@Saulis yes this one is solved. just another Question I dont really understand how to use the API Reference properties (selectItem...) Do you have some examples that could help me getting started?

[Saulis]

@pad90 http://saulis.github.io/iron-data-table/demo/ contains pretty much all the examples I have, but they don't have anything about selectedItem or selectedItems properties.

I can make you a code example if you can elaborate a bit what specifically you're interested in.

[pc11000]

@Saulis yes i have seen those demos.

What i want to do no is a sort of an edit function. My code now:

`    <data-table-column name="Risk" width="100px" flex="0">
      <template>[[item.name]]</template>
    </data-table-column>
    <data-table-column name="State" width="80px" flex="0">
      <template>[[item.state]]</template>
    </data-table-column>
       <data-table-column name="Edit">
      <template><a href="app-info.html"> <img src="Edit-50.png"> </a></template>
    </data-table-column>`

If the user clicks on the Edit Icon I want to show him a new window containing the information of the clicked object. Is there existing already something like that ?

[Saulis]

I suggest you use something like <paper-icon-button> for triggering the edit window instead of a link. You can add a tap listener to it easily and use event.model.item to check which row was tapped on.

Secondly, you might want to look into the row details template, which I think would be handy for making an editor. Depends on the amount of data you need to display of course.

I made a really simple example on how to use an icon button and row details template: http://jsbin.com/gayosa/edit?html,output

[pc11000]

Thank you thats a nice solution. I think for my case it would be better to show a sort of a dropdown where the user can chose a predefined value.

[Saulis]

@pad90 sure, I recommend vaadin-combo-box for that.

[pc11000]

@Saulis thx i'll try this

[Saulis]

OK, I'll close this issue now, please reopen if something new comes up.

[pc11000]

Hi @saulis maybe you can help me. I have now the vaadin Combobox inside an iron-data-table. Now on the iPhone I dont want to open the virtual Keyboard when tapping the combobox item. The User should just choose one of the Dropdown values. where can I deactivate the keyboard input?

[Saulis]

Answered in https://github.com/vaadin/vaadin-combo-box/issues/274

[alenkvakic]

@pad90 (and any other that may struggle here)

to make use of selected-item and take the values and edit it; i can give you a direction where you dont have to use a button or a link:

In your markup: <iron-data-table id="foo" items="{{state.bar}}" selected-item="{{selectedItem}}" selection-enabled>

Now you can access the selected item via this.$.foo.selectedItem; if you console log this, you'll get all the items data that was passed inside the datatable. From there you can add an observer in your elements props e.g. selectedItem: { observer: '_selectedItemChanged' },

Now observe the change and do something with the observation e.g. fire an event

_selectedItemChanged: function (item) {
          if (this.selectedItem) {
            this.fire('edit-item', item);
            //or this.$.editorelement.open()
          }
        },

From here you can add a listener to listen for the change and execute something (e.g. opening a new element as your editor element, just make sure to make a copy of the parsed item by catching it via a function). You can do pretty much anything at this point.