Angular Xeditable Grid is not working with Typeahead

[Sampath-Lokuge]

Hi,

I have tried as shown below.But it is not working.Could you tell me why ? Thanks.

<span editable-select="user.status" e-name="status" e-form="rowform" 
        e-typeahead="s.value as s.text for s in statuses | filter:$viewValue">
          {{ showStatus(user) }}
  </span>

Here is the : Fiddle

[ckosloski]

Have you tried building the latest version? There were some changes in a recent commit to work with the latest version of ui-bootstrap.

[Sampath-Lokuge]

@ckosloski Actually if you see the above example then it uses latest build (2016-03-24).But still it is not working.Am I missing something on the above fiddler ? Thanks.

[ckosloski]

You need to download and build it yourself. The uib changes are merged but not yet released.

[eugef]

@Sampath-Lokuge, new version was just released, so you can install it with npm

[Sampath-Lokuge]

@eugef Thanks.But still it is not working with e-typeahead.Could you give me a working example ? Thanks.

[Sampath-Lokuge]

@ckosloski But still it is not working with e-typeahead.Could you give me a working example ? Thanks.

[ckosloski]

Look at the examples here - http://vitalets.github.io/angular-xeditable/

It is using editable-text, not editable-select.

You could also try the new ui-select that was added.

[Sampath-Lokuge]

@eugef @ckosloski Here is the updated Fiddle which is not working.

[Sampath-Lokuge]

@ckosloski Is that mean can't we use the drop downs with the e-typeahead ? Thanks.

[ckosloski]

I haven't tried that, but it sounds like you should try the ui-select.

[Sampath-Lokuge]

@ckosloski I have used typeahead with the Angular only drop downs. Which are working fine.The only problem is within the Xeditable grid which is not working ? Thanks.

Here is the AngulaJs drop down with the typeahead.Which is working.

<input name="contactType" id="contactType" type="text" placeholder="@L("OiEnterContactType")"
 ng-model="vm.occupantDetail.contactType" typeahead="a as a.name for a in vm.contactTypes | filter:$viewValue" class="form-control" required> 

[Sampath-Lokuge]

@ckosloski The problem on the ui-select is, we cannot add a new item to the drop down if that item is not in the popup list.But with typeahead we can do that.My requirement is that.That means,if a particular item was not there on the drop down then user can add it to the drop down.After that app will save that item into the table.Thanks.

[ckosloski]

Your AngularJS drop down example is using a text field. The editable-text and typeahead should work the same.

[Sampath-Lokuge]

@ckosloski Very good point.I have done that way.But still it's having issue when user clicks the Edit button.When user clicks, it shows the id of the property.But it should be the text.How can I get rid of this ? Thanks.

 <span editable-text="user.status" e-name="status" e-form="rowform" 
        e-typeahead="s as s.text for s in statuses | filter:$viewValue">
          {{ showStatus(user) }}
 </span>

Here is the Fiddle

[ckosloski]

Here is your Fiddle working.

[Sampath-Lokuge]

Wow ... Thanks a lot @ckosloski :smile:

If you don't mind can you put this answer on the StackOverflow also.