Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Bob M.
835
using igCurrencyEditor with both data binding and Validation
posted

I'm working off the igEditor sample code, and creating some nice looking web user forms.

I can get both the Binding and the Validation working separately, but for some reason I cannot seem to combine them into one input field.

For example, my Max Exposure field does NOT show the validation spinner when I also use the data-bind object with Knockout JS:

 <script type="text/javascript">

    var viewModel = {
        maxExposure: ko.observable(5000000)
    };

    $(function(){
        $('#maxExposure').igCurrencyEditor({
            required: true,       
            button: 'spin',
            minValue: 100000,
            maxValue: 5000000000,
            width: 150
        });

    });

</script>

  <div class="row">
                <!-- currency editor -->
                <input id="maxExposure" class="row-control" data-bind="igCurrencyEditor: { value: maxExposure }"/>               
   </div>

Again, I would like to see the SPINNER icon but it doesn't show up.

Forgive me ahead of time if I'm missing something totally obvious. I'll keep researching.

thank you.

Bob

Parents
No Data
Reply
  • 3115
    Offline posted

    Hi Bob M,

     

    You don't need that extra script block, you have to include the configuration into the markup where you are dataBinding the value. As well as you need to include validatatorOptions, so the validation message is shown when changing the value otherwise the editor automatically fails to min, or max value depending which is closer to your value.

    <div class="row">                

     <!-- currency editor -->                

    <input id="maxExposure" class="row-control" data-bind="igCurrencyEditor:

    { value: maxExposure,

        required: true,

            button: 'spin',            

    minValue: 100000,           

      maxValue: 5000000000,            

     width: 150,

    ,    validatorOptions: {     validateOnBlur: true    } }"/>                  

    </div>

     

    Hope that will help,

    Thanks,

Children
No Data