This is a migrated thread and some comments may be shown as answers.

[Solved] Javascript not working after sorting

1 Answer 124 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Greg
Top achievements
Rank 1
Greg asked on 15 Feb 2012, 11:03 PM
I have an MVC Grid with Ajax binding and sorting enabled.  I also have a textbox in each row with a call to autonumeric.js and another call on blur to a rounding function. This all works great on the initial grid load.  After sorting any column the javascript stops firing.  Any suggestions?

Javascript:
<script type="text/javascript">
<!--    //
    $(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);
            }
            //-->
</script>

Grid:
<% int Iter = 0; %>
<% Html.Telerik().Grid(Model.Students)
    .Name("AddClassStudentHours")
    .TableHtmlAttributes(new {summary = "Add Student Class Hours"})
    .HtmlAttributes(
        new
            {
                @style = "font-size: .9em; font-family: Arial, Verdana, Helvetica, Sans-Serif; padding-bottom: 0;margin-top:0;"
            })
    .Columns(columns =>
                 {
                     columns.Bound(o => o.Sid)
                         .Template(o => {%><a href="<%=Url.Content("~/Student/Summary/" + Model.Students[Iter].EncodedStudentId)%>"> <%=Model.Students[Iter].Sid%></a><%})
                            .ClientTemplate("<a href='" + Url.Content("Student/Summary/") + "<#= EncodedStudentId #>'><#= Sid #></a>")
                            .Title("SID")
                            .Width(120);
                    columns.Bound(o => o.Name)
                         .Title("Name");
                    columns.Bound(o => o.Hours)
                        .Format("{0:0.#}")
                        .HtmlAttributes(new { @style = "text-align: right;" })
                        .Title("Hours")
                        .Width(100);
                     columns.Template(o =>{%>
                        <%: Html.HiddenFor(model => Model.Students[Iter].AcademicYearCode)%>
                        <%: Html.HiddenFor(model => Model.Students[Iter].StudentId)%>
                        <%: Html.HiddenFor(model => Model.Students[Iter].CourseId)%>
                        <%: Html.HiddenFor(model => Model.Students[Iter].Hours)%>
                        <%: Html.HiddenFor(model => Model.Students[Iter].StudentCourseId)%>
                        <%: Html.TextBoxFor(model => Model.Students[Iter].HoursNew, new { @class = "HoursNew", style = "font-size: 1em; font-family: Arial, Verdana, Helvetica, Sans-Serif;width: 50px;text-align: right;", @maxlength = "6", @title = "Add Hours" })%>
                        <%})
                         .ClientTemplate("<input type=\"hidden\" id=\"Students_<#= index #>__.CourseId\" name=\"Students[<#= index #>].CourseId\" value=\"<#= CourseId #>\" /><input type=\"hidden\" id=\"Students_<#= index #>__.StudentCourseId\" name=\"Students[<#= index #>].StudentCourseId\" value=\"<#= StudentCourseId #>\" /><input type=\"hidden\" id=\"Students_<#= index #>__.StudentId\" name=\"Students[<#= index #>].StudentId\" value=\"<#= StudentId #>\" /><input type=\"text\" id=\"Students_<#= index #>__HoursNew\" class='HoursNew' style=\"font-size: 1em; font-family: Arial, Verdana, Helvetica, Sans-Serif;width: 50px;text-align: right;\" maxlength=\"6\" title=\"Add Hours\" name=\"Students[<#= index #>].HoursNew\" value=\"<#= HoursNew #>\" />")
                         .Title("Add Hours")
                         .HtmlAttributes(new { @style = "font-size: .9em; font-family: Arial, Verdana, Helvetica, Sans-Serif; vertical-align:top; text-align: center; width:20px;" })
                         .Width(100);
                     columns.Template(o => {%><% Iter++; %><%})
                         .ClientTemplate("<#= ++index #>")
                         .Hidden();
                    columns.Template(o => {%><%: Html.HiddenIndexerInputForModel()%><%})
                        .ClientTemplate("<input name='Index' value='<#= index #>' type='hidden'>")
                        .Hidden();
                 })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_AddHours", "Class"))
    .ClientEvents(events => events.OnDataBinding("onDataBinding"))
    .Sortable()
    .Footer(false)
    .NoRecordsTemplate("<p class='instructions'>No Records Available</p>")
    .Render();
%>
    <script type="text/javascript">
        var index = 0;
        function onDataBinding() {
            var grid = $('#AddClassStudentHours').data('tGrid');
            index = (grid.currentPage - 1) * grid.pageSize;
        }
    </script>
 

1 Answer, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 17 Feb 2012, 08:42 PM
Found a fix .. thanks to Lester on Stack Overflow
Grid was being refilled (Bound?) on sort so for some reason the calls in the "$(document).ready" were being lost. So ....
Added to Grid this ClientEvent:  .OnDataBound("onDataBound")
Then in the onDataBound function added the complete "$(document).ready" call:
function onDataBound(e) {
      $(document).ready(function () {
           $('.HoursNew').autoNumeric({ pSign's'vMin'-999.5'vMax'999.5'mRound'C'aPadfalse });
           $('.HoursNew').blur(function () { roundToHalf(this); });
      });
}

Works like a charm now.
Tags
Grid
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Share this question
or