Custom Bindings and templates

[Rich]

Hi Kendo,

Is it possible to have custom bindings applied to template items?

i have this in a template:

<input style="width:22px;" type="text" data-bind="value: PercentOfValue" data-keyup="numericOnly" data-value-update="keyup" />

and this as a binding:
kendo.data.binders.numericOnly = kendo.data.Binder.extend({
    refresh: function () {
        $(this.element).bind('keyup', function (evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode;
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57)) {
                return false;
            }
            return true;

        });        
    }
});


This is the latest thing i've tried. I've also attempted to use the 'refresh' to simply rewrite the bound value to not include any letters etc without any success. It seems as though the refresh is simply ignored to those properties bound in a template. it is initially called when a new array item is added to the viewModel.. but never called when the value is "refreshed".

PLEASE respond to this.

[Atanas Korchev]

Hello Rich,

 Custom bindings are set via the data-bind attribute. On a side note you don't need a custom binding for this. Just execute your code:

$("input[data-keyup=numericOnly]").bind('keyup', function (evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode;
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57)) {
                return false;
            }
            return true;

});        

Kind regards,
Atanas Korchev
the Telerik team

[Rich]

Thanks for your response,

I understand a custom binding is not needed. But is there a reason to not use use this approach? I can think of a few reasons this should be a custom binding. 

If we had some more info on kendoui custom bindings it might become clear as to why and when people should use them. The one example on the kendoui site (http://demos.kendoui.com/web/mvvm/custom.html)
could also be accomplished using straight up javascript right?

The data-bind attribute is working for me now but unfortunately kendoui has already modified the viewmodel property value by the time the keyup event is hit in the custom binding. Also, if i try to bind the event in the init of the custom binding it simply doesn't work. There is no error or anything. This is a common practice with knockoutjs. Custom bindings where the init property is used to bind events to elements. Like animations.

1. If it is possible to do this using a custom binding i would really appreciate some information on how it would be accomplished.

2. If it doesn't work or is a flat out bad idea to make it work can you please elaborate exactly where the problem is or WHY i shouldn't be making this a custom binding?

I'm not bent on using a custom binding.. Just that with knockoutjs this type of problem is often solved using custom bindings so i am a bit confused. thanks!

[Rich]

The attempt to bind the keyup event to items that don't exist (templated items) at the time of document.ready being called, as i described in my original OP will not work as well. So it appears this MUST be customBinding unless i a missing something??

For those elements on the page that can have the event bound your example does not work because kendoui is still in control of the viewmodel's value.. the event does not change the value.


Played around with it some more and this is what is working:

kendo.data.binders.numericOnly = kendo.data.Binder.extend({
    refresh: function () {
        this.bindings["value"].set(value.toString().replace(/[^0-9]/g, ''));   
    },    
});

template:

<script id="row-template" type="text/x-kendo-template">     
        <tr>   
            <td style="padding-left:8px;" data-bind="text: CostDriverName">
            </td>
            <td style="text-align:right; padding-right:26px;">
                <span data-bind="text:CostOnStartDate"></span>
            </td>
            <td style="text-align:center">
                <input style="width:22px;" type="text" data-bind="value: PercentOfSellingPrice, numericOnly:PercentOfSellingPrice"  data-value-update="keyup" />
            </td>
            <td>
                <textarea rows="2" cols="24" style="font-size:11px" data-bind="value: Note" />
            </td>
            <td style="padding-right:8px;"><input type="image" src="/Content/images/member/delete_icon.gif" data-bind="click: deleteCostDriver"/></td>
        </tr>
    
    </script>

Can you PLEASE give us some documentation in terms of what properties are passed to the customBindings?? Ie: best way to access the element, value of the binding, other bindings in the element??

[Alexander Valchev]

Hi Rich,

Thank you for the feedback.
I created a help topic that explains the MVVM custom binding. The on-line documentation is already updated and you can view it here.

Regards,
Alexander Valchev
the Telerik team