joaoneto/angular-bootstrap-select

DEPRECATED DON'T USE - Directive to wrap bootstrap-select

(DEPRECATED) angular-bootstrap-select

I decide to unregister this package from the bower, if someone interessed in maintain this with angular-bootstrap-select name, that's the chance.

Directive to wrap bootstrap-select. This directive aims to proxy the behavior of the plugin bootstrap-select, in the AngularJS style, see the documentation on the plugin page.

Requirements

• (jQuery)
• (bootstrap-select)
• (AngularJS)

Install

$ bower install angular-bootstrap-select

Examples

• ./demo/index.html
• Live demo
• Codepen.io

Html snippet

<script src="../bower_components/angular-bootstrap-select/build/angular-bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Testing

$ npm install
$ bower install
$ grunt

License

The MIT License (MIT)

Copyright (c) 2014 João Pinto Neto

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

angular-bootstrap-select's Issues

Default picker choice?

Hi there.

I am using this and I am very happy with it.

However I am not sure how to go about selecting the default choice for the picker...

Currently i do this:

<select class="m-l-20 pull-right selectpicker" selectpicker ng-model="currentLanguage">
    <option ng-repeat="language in defaultLanguage" data-content="<span class=''><img src='/assets/img/flags/{{language.Value}}.png'/> {{language.Name}}</span>" value="{{language}}"> </option>

    <option ng-repeat="language in campaign.Languages" data-content="<span class=''><img src='/assets/img/flags/{{language.Value}}.png'/> {{language.Name}}</span>" value="{{language}}"> </option>
</select>

But it seems a very nasty way of doing it.. Basically I have my Languages as objects in an array (campaign.Languages) but in order to have the first language selected by default I have to add the first and do ng-repeat on an array with 1 single item which i initialize it to be the first language of the main language array.

There must be a better way of doing this..

O que é possível fazer com esta diretiva?

Bom dia João, tudo bem?
Seguinte cara, eu estou precisando fazer um bom uso do bootstrap-select, ao ponto de apresentar opções em uma forma de hierarquia. Usando o "data-content" eu consigo a seguinte apresentação (primeiro select da imagem)

Porém, o que quero é o segundo select da imagem. A diferença é que elementos que estão no nível 0 da hierarquia (são as raizes) não podem apresentar a imagem do lado. No entanto, estou com problemas com o parse do AngularJS no "data-content". Abaixo segue o template que uso para a minha diretiva:

<select class="selectpicker span10" multiple ng-if="config.hierarchy">
        <option ng-repeat="opcao in config.opcoes" ng-style="{'padding-left': opcao.profundidade*15 + 'px'}"
                data-content='<span><i ng-if="opcao.profundidade" class="icone_tpl_select2 profund_{{opcao.profundidade}}"></i> {{opcao.text}}</span>'
                ng-class="{disabled: opcao.locked}" value="{{opcao}}">
            {{opcao.text}}
        </option>
    </select>

A sua diretiva dá um melhor suporte para o "data-content"?

The select doesn't handle click outside to hide options

At a given time you can notice two select show the dropdown list, normally when you choose another select the other one should hide his options automatically. Something like that:

How to use with ngOptions

Hi!

I just "fixed" library to support following structure:

<select class="form-control"
    data-style="btn-primary"
    data-live-search="true"
    data-selectpicker
    ng-model="selectedPeople"
    ng-collection="people"
    ng-options="p.id as p.name for p in people"
></select>

And actual directive:

angular.module("angular-bootstrap-select", [])
    .directive("selectpicker",
        [
            "$timeout",
            function($timeout) {
                return {
                    restrict: "A",
                    require: ["?ngModel", "?ngCollection"],
                    compile: function(tElement, tAttrs, transclude) {
                        console.log("init bootstrap-select");
                        tElement.selectpicker();

                        if (angular.isUndefined(tAttrs.ngModel)) {
                            throw new Error("Please add ng-model attribute!");
                        } else if (angular.isUndefined(tAttrs.ngCollection)) {
                            throw new Error("Please add ng-collection attribute!");
                        }

                        return function(scope, element, attrs, ngModel) {
                            if (angular.isUndefined(ngModel)){
                                return;
                            }

                            scope.$watch(attrs.ngModel, function(newVal, oldVal) {
                                if (newVal !== oldVal) {
                                    $timeout(function() {
                                        console.log("value selected");
                                        element.selectpicker("val", element.val());
                                    });
                                }
                            });

                            scope.$watch(attrs.ngCollection, function(newVal, oldVal) {
                                if (newVal && newVal !== oldVal) {
                                    $timeout(function() {
                                        console.log("select collection updated");
                                        element.selectpicker("refresh");
                                    });
                                }
                            });

                            ngModel.$render = function() {
                                element.selectpicker("val", ngModel.$viewValue || "");
                            };

                            ngModel.$viewValue = element.val();
                        };
                    }
                }
            }
        ]
    );

I know that this not yet "ready" but I hope it will help someone. If you wanna i could make pull request of this.

0.1.0-rc2 files under build folder is not built from src?

I found some inconsistency between the source file and the build file.
in bower.json, the main file is pointed to the dist file, so when building my project with grunt, it uses the file under build/

bower package is not published

Hi,

It seems you haven't published your latest version in bower? The bower version is not supporting ng-repeat but your git version does.

Cheers.

Does this support any of the new JS dependencies?

Bootstrap-select's current version 1.4.3 and Angular's latest version 1.2.14 — both seem to cry foul with this bootstrap-select-plugin. Any plans to update?

Using $http seems to have timing issue and makes an empty list

Thanks a lot for your directive, it works great except when I populate a <select> by an $htttp, in this case it seems to give some timing issue and I end up with an empty list. The selecpicker seem to be displayed with an empty list but is not refreshed properly when the data finally arrives from the server. Perhaps it's missing a watcher of some kind?

I also submitted a question on Stack Overflow, so we might also get some valid answers and help there on resolving this issue.
http://stackoverflow.com/questions/28336106/angular-bootstrap-select-timing-issue-to-refresh

selectpicker directive not in README file

Looks like your select element in your readme isn't corrent: Since this is the angular version, it should also include the directive

loads in list format

I have the following situation:

/home without angular-select

/test with angular-select

When access #/test Direct testing for the navigation bar, the select is loaded correctly. However if I access the #/home for the navigation bar and a link through to access the #/test (without reload - SPA) angular-select is not loaded, appearing only in the select list and not in the format of select.

Can someone give me a hand !?

syntax err line 8

just ran a bower install on this and there's an extra ")" on line 8.

pic:

[enhancement] Modify directives to allow classe or element

This just mean do restrict: "ACE" instead of restrict: "A" ! ;-)

restrict option in directive should include class

I have installed the module using bower, and i could not get it to work. I double checked everything a couple of times, and then i looked at the source. in both the toggle and selectpicker directive the restrict parameter should include 'C' as the examples indicate a classname should be used to invoke the directive. That means that:

restrict: 'A'

should become

restrict: 'AC'

Or is this something specific to my use case and should it work out of the box?

Is there a support for options with search?

I would like to have a feature for searching the options list and selecting one, as there is one in bootstrap select with a live-search="true" attribute.

select in ng-repeat do not work

html:

<-div ng-repeat="f in filters">
<-select ng-model="f.v" ng-options="o.d for o in f.o" m-select data-live-search="true"> </-select>
<-/div>

js:
$scope.filters = [
{n:'A',o:[{d:"A1",v:'1'},{d:"A2",v:'2'},{d:"A3",v:'3'}],v:2},
{n:'B',o:[{d:"B1",v:'1'},{d:"B2",v:'2'},{d:"B3",v:'3'}],v:2},
{n:'C',o:[{d:"C1",v:'1'},{d:"C2",v:'2'},{d:"C3",v:'3'}],v:2}
];
the option will not be initiated.

Invalid Version: 0.1.0rc2 when installing via Bower

Attempt of installing 0.1.0-rc2 via Bower causes the following error:

bower install
bower angular-bootstrap-select#0.1.0-rc2       not-cached git://github.com/joaoneto/angular-bootstrap-select.git#0.1.0-rc2
bower angular-bootstrap-select#0.1.0-rc2          resolve git://github.com/joaoneto/angular-bootstrap-select.git#0.1.0-rc2
bower angular-bootstrap-select#0.1.0-rc2         download https://github.com/joaoneto/angular-bootstrap-select/archive/v0.1.0-rc2.tar.gz
bower angular-bootstrap-select#0.1.0-rc2          extract archive.tar.gz
bower angular-bootstrap-select#0.1.0-rc2            error Invalid Version: 0.1.0rc2

Stack trace:
TypeError: Invalid Version: 0.1.0rc2
    at new SemVer (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:273:11)
    at compare (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:460:10)
    at Object.neq (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:504:10)
    at GitHubResolver.GitResolver._savePkgMeta (/usr/local/lib/node_modules/bower/lib/core/resolvers/GitResolver.js:224:56)
    at GitHubResolver._savePkgMeta (/usr/local/lib/node_modules/bower/lib/core/resolvers/GitHubResolver.js:131:53)
    at _fulfilled (/usr/local/lib/node_modules/bower/node_modules/q/q.js:787:54)
    at self.promiseDispatch.done (/usr/local/lib/node_modules/bower/node_modules/q/q.js:816:30)
    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:749:13)
    at /usr/local/lib/node_modules/bower/node_modules/q/q.js:557:44
    at flush (/usr/local/lib/node_modules/bower/node_modules/q/q.js:108:17)

Console trace:
Trace
    at StandardRenderer.error (/usr/local/lib/node_modules/bower/lib/renderers/StandardRenderer.js:82:17)
    at Logger.<anonymous> (/usr/local/lib/node_modules/bower/bin/bower:110:22)
    at Logger.emit (events.js:95:17)
    at Logger.emit (/usr/local/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
    at /usr/local/lib/node_modules/bower/lib/commands/index.js:40:20
    at _rejected (/usr/local/lib/node_modules/bower/node_modules/q/q.js:797:24)
    at /usr/local/lib/node_modules/bower/node_modules/q/q.js:823:30
    at Promise.when (/usr/local/lib/node_modules/bower/node_modules/q/q.js:1035:31)
    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:741:41)
    at /usr/local/lib/node_modules/bower/node_modules/q/q.js:557:44

System info:
Bower version: 1.3.12
Node version: 0.10.32
OS: Darwin 13.4.0 x64

Significant slow down with a lot of options

I've noticed the directive slows down the loading of the whole page if there are a lot of options (I have ~200, combined with data-live-search).

Directive is duplicating the dropdown boxes in a ng-table column

Hi,

I'm having an issue when trying to use a selectpicker inside a column of a ng-table, the dropdown is being duplicated and I can't find the reason.

Just as an example, I created the following table:

<div class="table-responsive" style="width: 1300px;">
      <table ng-table="batchUserCtrl.tableParams" class="table table-bordered table-hover">
        <tr ng-repeat="classification in $data" class="vert-align">
          <td data-title="'ID'" sortable="'object.object_id'" class="vert-align col-sm-1">
              <a href="">{{classification.object.object_id}}</a>
          </td>
          <td data-title="'Texto'" sortable="'object.text'" class="vert-align col-sm-2">
            {{ classification.object.text }}
          </td>
          <td data-title="'Sentimento'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(1)">
            <select title="Selecionar" ng-model="batchUserCtrl.bla" selectpicker data-live-search="true" id="teste">
              <option>1</option>
              <option>2</option>
            </select>
          </td>
          <td data-title="'Tema'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(2)">
            {{ batchUserCtrl.getValue(classification.category_values, 2).val }}
          </td>
          <td data-title="'Manifestação'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(4)">
            manif
          </td>
          <td data-title="'Complemento 1'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(5)">
            {{ batchUserCtrl.getValue(classification.category_values, 5).val }}
          </td>
          <td data-title="'Outros'" class="vert-align col-sm-1">
              {{classification.others}}
          </td>
          <td data-title="'Lixo'" class="vert-align col-sm-1">
              {{classification.garbagePretty}}
          </td>
        </tr>
      </table> 
  </div>

In the third column I created only one selectpicker with fixed options, but when the page is rendered there are 2 dropdowns, instead of one:

And only the upper one works, which means that the user can select an option, the other one shows the options and even let the user choose one of them, but doesn't change the selected option text. If I put the same <select> tag outside the table it works ok.

Here's the HTML code of the selectpickers after the page is fully rendered:

<td data-title="'Sentimento'" class="vert-align col-sm-1 ng-scope" ng-if="batchUserCtrl.controlColumnsVisibility(1)" data-title-text="Sentimento">

            <!--{{ batchUserCtrl.getValue(classification.category_values, 1).val }}-->
            <select title="Selecionar" ng-model="batchUserCtrl.bla" selectpicker="" data-live-search="true" id="teste" class="bs-select-hidden ng-untouched ng-valid ng-dirty ng-valid-parse"><option class="bs-title-option" value="">Selecionar</option>
             <!--2-->
              <option value="1">1</option>
              <option value="2">2</option>
            </select>
            <div class="btn-group bootstrap-select ng-pristine ng-untouched ng-valid ng-dirty ng-valid-parse">
                <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="teste" title="2" aria-expanded="false">
                     <span class="filter-option pull-left">2</span>&nbsp;<span class="caret">
                     </span>
                </button>
              <div class="dropdown-menu open" style="max-height: 141px; overflow: hidden; min-height: 42px;">
                <div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off">
                </div>
                <ul class="dropdown-menu inner" role="menu" style="max-height: 87px; overflow-y: auto; min-height: 0px;">
                     <li data-original-index="1" class="">
                           <a tabindex="0" class="" style="" data-tokens="null">
                               <span class="text">1</span>
                               <span class="glyphicon glyphicon-ok check-mark"></span>
                           </a>
                    </li>
                    <li data-original-index="2" class="selected active">
                          <a tabindex="0" class="" style="" data-tokens="null">
                              <span class="text">2</span>
                              <span class="glyphicon glyphicon-ok check-mark"></span>
                          </a>
                    </li>
                </ul>
            </div>
         </div>
         <div class="btn-group bootstrap-select">
             <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="teste" title="Selecionar" aria-expanded="false">
                  <span class="filter-option pull-left">Selecionar</span>&nbsp;<span class="caret"></span>
             </button>
             <div class="dropdown-menu open">
                  <div class="bs-searchbox">
                       <input type="text" class="form-control" autocomplete="off">
                  </div>
                  <ul class="dropdown-menu inner" role="menu">
                      <li data-original-index="1" class="active">
                           <a tabindex="0" class="" style="" data-tokens="null">
                                 <span class="text">1</span>
                                 <span class="glyphicon glyphicon-ok check-mark"></span>
                            </a>
                      </li>
                      <li data-original-index="2">
                          <a tabindex="0" class="" style="" data-tokens="null">
                              <span class="text">2</span>
                              <span class="glyphicon glyphicon-ok check-mark"></span>
                          </a>
                      </li>
                  </ul>
           </div>
        </div>
   </td>

Can someone please help?

Thanks!

ng-options support in angular 1.4

When using ng-options with selectpicker in angular 1.4 - changing the model value does not correctly update the selectpicker. I think this may be related to this update of ng-options: https://docs.angularjs.org/guide/migration#ngoptions

Specifically it could be caused by the fact ng-options option values are now prefixed with type like number:1 string:foobar.

<select selectpicker
    ng-model="dobMonth"
    name="dobMonth"
    ng-options="month.id as month.name for month in months">
  <option value>Month</option>
</select>

Using track by seems to work around the issue:
ng-options="month.id as month.name for month in months track by month.id"

Livesearch to filter data by mapping string in the begining

Can you help me to filter the live search data which maps the string that starts from the user entered string.

Question : Why does not default selectpicker work?

Thanks for angular-bootstrap-select. i appreciate it. I am just curious to know why does not the default selectpicker work with angular? does angular dependency injection feature cause some issue ?

CSS style not applied

I have tried to make this work in my angular app but it doesn't. the instruction don't seem clear either.

I have imported the following:
`<script type="text/javascript" charset="utf-8" src="js/vendor/angular-bootstrap-select.js"></script>

<script type="text/javascript" charset="utf-8" src="js/vendor/bootstrap-select.js"></script>`

as well as the css: <link href="css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />

however it still looks like a normal select:

my html:

`

`

Could someone tell me what I am doing wrong / why the select button style isn't applied?

Looks like the there might be timing issues in Angular 1.3

just upgraded to Angular 1.3 and all of my instances of this directive have broken. They are no longer displaying the data from their respective models. Just a bunch of empty dropdowns.

Any thoughts as to what may be causing this?

with ng-model twice selct boxes

In my HTML 2 select boxes are visible:

<select selectpicker  ng-model="mymodel.selectvalue" >
                                    <option value="A">Option A</option>
                                    <option value="B">Option B</option>
</select>

"track by" doesn't work

See http://codepen.io/caseyjhol/pen/dPRXBN

Example:

scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];

<select selectpicker ng-model="selected" ng-options="c.name for c in colors track by c.id"></select>

When an option is selected, the value of the select is set to the object, rather than the track by property. So, selecting "Green" from the list sets the value to {id: 20, name: 'Green' }, instead of 20.

I created a workaround by implementing a trackBy attribute and altering the refresh function.

      function refresh(newVal) {
        $timeout(function () {
          if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) {
            if (attrs.trackBy && newVal) {
              element.val(newVal[attrs.trackBy]);
            } else {
              element.val(newVal);
            }
          }
          element.selectpicker('refresh');
        });
      }

<select selectpicker ng-model="selected" ng-options="c.name for c in colors track by c.id" track-by="id"></select>

This isn't ideal and doesn't work when tracking by $index, but it works for me for now.

ng-required="true" shows as an error on load of pristine form

If I put ng-required="true" on a selectpicker select it is $invalid: true, $pristine: false, and $modelValue: undefined

Without the ng-required, the $modelValue: null (and, of course, no error on load)

I am working around this with custom validation, but was wondering if this is a known issue or fact of life.

Multi render

I'm not sure that is related to bootstrap-select, it's maybe because of the directive so i post the issue here
snapappointments/bootstrap-select#1133

directive select is restricted as attribute instead of class

I found that directive selectpicker is restricted to be attribute instead of class. Based on README.md, we only need to specify class "selectpicker". Is that mean the directive will not be triggered? Thanks for any advice.

ngChange only fires once

I can only get ngChange to fire on the first selection. Is there any reason it doesn't work on subsequent selections?

ng-disabled not working

Hello,

I have some select element that used ng-disabled to dynamically enable/disable this element base on conditions, but when the ng-disabled value is changed, the enablility of the element didn't changed as expect, any workaround on this ?

Click event not triggered on document

I am using this plugin in a project:

<select
  selectpicker="selectpicker"
  data-none-selected-text="Select"
  ng-model="..."
  ng-options="..."
  name="..."
  required="required"
  class="form-control"
></select>

I have listeners in the directive listening for click events:

angular.element($document[ 0 ].body).bind('click', function(event) {
  console.log('CLICK');
});
$document.on('click', function (e) {
  console.log('CLICK');
});

When the selectpicker control is clicked, the first click handler gets triggered, but the second does not. It seems that the click event never propagates to the document.

directive does not work inside a page included by ng-include

When I use the plugin inside a page included via ng-include, the directive does not work.

ng-options Doesn't Rebind After Scope Variable Change

If the variable used in ng-options changes after the view is rendered the select box does not rerender.

This makes this plugin unusable when getting select options from an AJAX call.

Is there a way to get around this? Is the a bug that needs to be looked into?

Up/Down keys do not work with options list

It seems that one cannot use the Up/Down keys with the options list when also using data-live-search="true"

Is this a known issue?

ng-options don't work

With this example I get empty list:

<select selectpicker ng-model="selectedOption" ng-options="term.tid as term.name for term in myOptions>
  <option value="">- select -</option>
</select>

ngModel undefined

I am using this in an application and I am getting the following error on line 27 of
angular-bootstrap-select.js:

Cannot set property '$render' of undefined

It appears ngModel is undefined at the time this is ran. If I check for this and return upon undefined, everything works fine.

data-icon when using ng-options

Is it possible to add an icon to dynamic options?

It's certainly possible to add to static options:
data-icon="icon-heart"
The icon is picked up by the jquery plugin.

But what if these options are being generated by ng-options? (At this point I don't care if it's the same icon repeated for each - I just want to know if placing an icon using ng-options is even possible with angular-bootstrap-select.)

dropdown-toggle doesn't close when used within ng-form

The issues is that path '.bootstrap-select.open' is being fouled by various ng-xxxx form class, ie.

Doesn't work with Bootstrap select 1.5.2

I'm using 1.5.2 bootstrap select and I had a bunch of problems with trying to use angular-bootstrap-select. I did some troubleshooting and I think I've found the issue. This doesn't work with 1.5.2. Here's a fiddle to show it http://jsfiddle.net/8jgy1yjs/

Any ideas what might be causing this issue

Still have 'Nothing Selected' when trying to use Ng-options

Can I confirm latest version is 0.1.0-rc2?

Ng-options is not working correctly even when trying to recreate the demo 'colors' example.

Using with Multiple

When using multiple with angular and the data only has one item selected in the multiple dropdown, it's not showing the one selected item.
[ < td ng-repeat="(key, value) in attributes">
< div ng-if="value.property =='MultiSelect' ">
< select selectpicker="" class="form-control" name="uAttr_{{key}}[]" ng-model="selectedDevice.attributes[key.toLocaleLowerCase()]" multiple="multiple" ng-options="attrType for attrType in value">
< /td>]

the value of selectedDevice.attribues[key.toLocaleLowerCase() = ["700 Mhz"]

Support for optgroups?

ngOptions is limited. Depending on ngOptions means you can't use ng-repeat to create your options that have optgroup tags.

Doesn't support track by in ng-option

It not working well with the latest version of the bootstrap select.

if you using ng-option like this:
ng-options="c.text for c in timeUnit track by c.value"
This piece of code causing problem.
function refresh(newVal) {
scope.$applyAsync(function () {
if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal);
element.selectpicker('refresh');
});
}

example for loading data via ajax

Hello, I am having a problem loading data via ajax with this directive. Would you be having an example for that. I am kind of a beginner with Amgular and might not be seeing things like you are. I added a watch on the scope property that is getting populated with the ajax data, then tried to call the refresh method on the select pciker, but dont see the data being binded. Any ideas?. Thank You