Header Bar in Telerik Grid doesn't scroll along with body when the horizontal scroll bar is moved

See more:

Javascript

jQuery

Scrollbar

, +

Basically, I have two Telerik Grids. Now, I have a checkbox to synchronize the horizontal scroll bar in both the grids and want to disable the synchronization when the checkbox is unchecked. Now, the problem is that as soon as I disable the checkbox i.e. the unbind function is executed, the header bars in both the Telerik Grids doesn't scroll along with the corresponding content in the body in the individual Telerik Grid. I believe the unbind("scroll") breaks the link between the header and the body and I think If I can somehow rebind the header bar in the Telerik grids to the scroll function, the problem would be solved. I tried simply writing the ("selector").bind.("scroll") but that didn't work. Different approaches of solving the problem are welcome.

$(function () {

        $("#checkboxforscrollbarsyncHorizontal").change(function () {
            if (this.checked) {

             // The following code was written to try to rebind the header bar with its scroll event
             //   $('#firstscrollbarlb .t-grid-content').unbind("scroll");
             //   $('#secondscrollbarlb .t-grid-content').unbind("scroll");

         firstscrollbarlb

                $('#firstscrollbarlb .t-grid-content').scroll(function () {
                    var varforfirstscrollbar = $(this).scrollLeft();
                    $('#secondscrollbarlb .t-grid-content').scrollLeft(varforfirstscrollbar);

                });

                $('#secondscrollbarlb .t-grid-content').scroll(function () {

                    var varforsecondscrollbar = $(this).scrollLeft();
                    $('#firstscrollbarlb .t-grid-content').scrollLeft(varforsecondscrollbar);

                });


                });
            }

            else {

                $('#firstscrollbarlb .t-grid-content').unbind("scroll");
                $('#secondscrollbarlb .t-grid-content').unbind("scroll");

            }

        });
    })(checkboxcheckerHorizontal);

Here are the grids

<table>
          <tr>
          <td id="firstscrollbarlb">
            //The Telerik Grid code goes here
          </td>

          <td id="secondscrollbarlb">
           //The Telerik Grid code goes here
         </td> 
        </tr>
       </table>

This is the code for the checkbox.

<input type="checkbox" id="checkboxforscrollbarsyncHorizontal" onClick="checkboxcheckerHorizontal();"/>Horizontal