jQuery를 사용하여 검도 그리드에서 선택한 행으로 스크롤하는 방법은 무엇입니까?

Question

나는이 또한 시도

jQuery scroll to element

및

Kendo Grid scroll to selected row

$("#button").click(function() { 
    $('html, body').animate({ 
    scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
    }); 

내 질문은 유사 할 수 있습니다

:

 this.element.find(".k-grid-content").animate({ 
    scrollTop: this.select().offset().top }); 
    } 

그러나, 제공 솔루션 아보 두 번째 링크에서 제공하는 바이올린 링크에 문제가 있습니다. http://jsfiddle.net/blackjim/9GCYE/5/

어딘가에있는 행 뷰를 가져올 때 솔루션이 제대로 작동합니다. 그러나 그 후 (즉, 그리드의 맨 아래에서 행 중 하나의 포커스를 얻은 후), 맨 위에서 일부 행을 선택하려고하면 컨트롤이 여전히 아래로 굴러 가기 때문에 스크롤 기능의 목적이 의미가 없게됩니다 그곳에.

필자는 행 데이터와 일치하는 내용을 입력 할 수있는 검색 상자가 있으며 일치하는 경우 사용자보기에 선택한 행을 가져올 수 있도록 스크롤이 트리거되어야합니다.

위의 해결 방법에있는 코드는이 기준에 적합합니다. 그러나 이제 다시 그리드 상단의 일부 행과 일치하는 항목을 검색하려고하면 맨 아래쪽 (이전에 선택한 행)에서 그리드 상단의 새로 선택된 행까지 스크롤되지 않습니다.

내 필요에 맞게 위의 코드를 수정하려면 어떻게해야합니까?

Answer 1

사용 된 솔루션의 스크롤 논리가 완전하지 않으므로 스크롤이 가끔씩 만 작동합니다. 또한 선택한 행의 맨 위로 정확하게 스크롤하지 않습니다. 매번 정확하고 안정적으로 스크롤 할 수있는 솔루션을 찾았습니다. 내 onChangeSelection 기능은 다음과 같습니다 : 선택한 행이 그리드 맨 (최초로 표시되는 행)이되도록

는

function onChangeSelection(e) { 
    //calculate scrollTop distance 
    var scrollContentOffset = this.element.find("tbody").offset().top; 
    var selectContentOffset = this.select().offset().top; 
    var distance = selectContentOffset - scrollContentOffset; 

    //animate our scroll 
    this.element.find(".k-grid-content").animate({ 
     scrollTop: distance 
    }, 400); 
} 

이 자동으로 스크롤합니다. 또한 원하는 검색 논리를 추가했으며 대/소문자를 구분하지 않고 항목을 검색 할 수 있습니다. 검색 기능은 다음과 같은 :

$("#searchbtn").click(function() { 
    var searchval = $("#searchbox").val(); 
    //...unimportant code omitted 
    var grid = $("#grid").data("kendoGrid"); 
    grid.select("tr:containsIgnoreCase('" + searchval + "')"); 
}); 

여기 jsfiddle를 참조하십시오.

참고 :

• scrollContentOffset 그것이 뷰 밖으로 스크롤 될지라도 그리드 테이블 본문 내용 (진정한 상단 높이를 잡고 (이 값은
• distance 진정한 스크롤이다) 음수 일 수 내가 containsIgnoreCase을 사용
• 스크롤 컨텐츠의 거리가 정의 this solution

에서 필터링