Question

I have a page in MVC3 using a Telerik grid. In the grid, for each row, is a textbox that I’m entering an decimal. I have a css class, ‘HoursNew’, which is used to connect a jQuery plugin ( autoNumeric.js ). I also have an onBlur function to round any decimal input to the nearest half decimal.
Problem is, after sorting a column, all JavaScript seems to stop working. The autoNumeric.js stops working along with the function I have that fires onBlur.

    $(document).ready(function () {
    $('.HoursNew').autoNumeric({ pSign: 's', vMin: '-999.5', vMax: '999.5', mRound: 'C', aPad: false });
    $('.HoursNew').blur(function () { roundToHalf(this); });
});

            // Round decimal to nearest .5
            // v is input object
            function roundToHalf(v) {
                var value = v.value;
                var r;
                //alert(v.id);
                var converted = parseFloat(value); // Make sure we have a number
                var decimal = (converted - parseInt(converted, 10)); // Pull the decimal value
                decimal = Math.round(decimal * 10);
                if (decimal == 5) { return (parseInt(converted, 10) + 0.5); } // leave alone if .5
                if ((decimal < 3) || (decimal > 7)) {
                    r = Math.round(converted); // Round up or down to nearest whole number
                } else {
                    r = (parseInt(converted, 10) + 0.5); //round to .5
                }
                //alert(r);
                // reset input value to new value
                $('#' + v.id).val(r);
            }

Page works fine on first load, just this problem after a sort. Any suggestions?

Answer 1

I have a hunch that when sorting, the grid is making an ajax call that renders a new grid. What this means is that any bindings you performed in $(document).ready are removed.

Take a look at this page on client-side events in the Telerik documentation. You’ll need to add this section to your grid definition:

.ClientEvents(events => events
    .OnDataBound("onDataBound")

And this javascript to rebind:

function onDataBound(e) {
    $('.HoursNew').autoNumeric({ pSign: 's', vMin: '-999.5', vMax: '999.5', mRound: 'C', aPad: false });
    $('.HoursNew').blur(function () { roundToHalf(this); });

}