ember.js - How to disable multi-select-component in ember-widgets -


is there way disable multi-select-component addepar's ember-widgets?

this works single select-component

{{select-component   contentbinding="selectcountries"   prompt="select country"   value=selectselected   disabled=true }} 

the same not work multi-select-component

{{multi-select-component   contentbinding="selectcountries"   prompt="select country"   selections=multiselectselected   disabled=true }} 

here's not-working js bin example. looked through source code, there doesn't seem option this.

the fastest way think of doing it, short of editing source code (updated js bin):

i defined ember component takes array of strings (selections) parameter. used classes used multi-select-component didn't have redefine css:

<script type="text/x-handlebars" id="components/disabled-multi-select">   <div class="ember-view ember-select multi-select-disabled" tabindex="-1">     <div class="ember-select-container ember-select-multi dropdown-toggle js-dropdown-toggle">       <ul class="form-control ember-select-choices">         {{#each selection in selections}}         <li class="ember-view ember-select-search-choice">           <div>{{selection}}</div>           <div class="ember-select-search-choice-close">×</div>         </li>         {{/each}}       </ul>     </div>   </div> </script> 

then added css make disabled select:

.ember-select.multi-select-disabled > .ember-select-container > .form-control {   cursor: not-allowed;   background-color: #eee;   opacity: 1; } .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice {   background-color: #d8d8d8;   cursor: not-allowed; } .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close {   cursor: not-allowed; } .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close:hover {   background-color: #d8d8d8; } 

it's used this:

{{#if isinputdisabled}}   // stick multi-select-component in here {{else}}   {{disabled-multi-select selections=multiselectselected}} {{/if}} 

Comments

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -