移动水平滚动条时，Telerik Grid中的标题栏不会与主体一起滚动 [英] Header Bar in Telerik Grid doesn't scroll along with body when the horizontal scroll bar is moved

问题描述

基本上，我有两个Telerik网格。现在，我有一个复选框来同步两个网格中的水平滚动条，并希望在取消选中复选框时禁用同步。现在，问题在于，只要禁用复选框，即执行解除绑定功能，两个Telerik网格中的标题栏就不会与各个Telerik网格中正文中的相应内容一起滚动。我相信unbind（滚动）打破了标题和正文之间的联系，我想如果我能以某种方式将Telerik网格中的标题栏重新绑定到滚动函数，问题就解决了。我试过简单地写（选择器）.bla。（滚动），但这不起作用。欢迎解决问题的不同方法。

 $（ function （）{
 
 $（ ＃checkboxforscrollbarsyncHorizo​​ntal).change( function （）{
  if （ this  .checked）{
 
  //  以下编写代码以尝试使用其滚动事件重新绑定标题栏 
  //   $（ '#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（ 滚动）; 
 $（' ＃secondscrollbarlb .t-grid-content'）。unbind（  scroll）; 
 
} 
 
}）; 
}）（checkboxcheckerHorizo​​ntal）; 

这是网格

< table> 
< tr> 
< td id =   firstscrollbarlb> 
  //   Telerik网格代码在这里 
 < /   td  >  
 
 < td id =   secondscrollbarlb> 
  //   Telerik网格代码在这里 
 < /   td  >  
 < /   tr  >  
 < /   table  >  

这是复选框的代码。

 <  输入    type   = 复选框   < span class =code-attribute> id   =  checkboxf orscrollbarsyncHorizo​​ntal    onClick   =  checkboxcheckerHorizo​​ntal（）;  /  > 水平
 

解决方案

（ function （）{

（ ＃checkboxforscrollbarsyncHorizo​​ntal）。change（ function （）{
if （ this .checked）{

// 编写以下代码以尝试重新绑定标题栏滚动事件
//

（ #fi rstscrollbarlb .t-grid-content'）。unbind（scroll）;
//

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

解决方案

(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"); //

这篇关于移动水平滚动条时，Telerik Grid中的标题栏不会与主体一起滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！