2013-07-09 3 views
5

자바 스크립트에서 스크롤 가능한 검도 그리드에 바인딩하고 열 너비에 몇 가지 문제가 있습니다. 이 fiddle은 문제 (코드 끝에있는 코드)를 보여줍니다. html에 헤더를 지정하고 헤더 중 하나에 너비를 추가합니다. 그런 다음 javascript는 dataSource를 설정합니다 (프로덕션 코드에서 이것은 ajax 호출을 통해 수행됩니다).검도 그리드 열 너비 + 스크롤 가능

나는 내 viewmodels 신중하게 구성되어 있기 때문에, 자동으로 필요한 열을 식별 할 수있는 많은 그리드가

  • 때문에 자바 스크립트에 columns.width 속성을 설정하는 것을 피하기 싶어요. 우리는 우리의 응용 프로그램에서 100 개 이상의 새들을 가지고 있으며, 모두에 대한 열 목록을 지정하는 데 다루기 힘들 것입니다.
  • 어쨌든 잘못된 것처럼 보입니다.이 정보는 스타일 정보입니다.

이 기능은 검도가 머리글과 스크롤 컨텐트 용으로 2 개의 그리드를 생성하기 때문에 발생합니다. 그러나 필자가 과거에 사용했던 다른 컨트롤 라이브러리는 두 테이블을 동기화 된 상태로 유지하면서 선언 스타일을 쉽게하기 위해 항상 두 그리드 사이의 스타일 정보를 복사했습니다. "검도" 이게 길이야. 바이올린

<table> 
    <thead> 
     <th class="p20" data-field="status">Status</th> 
     <th data-field="description">Description</th> 
    </thead> 
</table> 

자바 스크립트

$('table').kendoGrid({ 
    dataSource: [ 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' } 
    ], 
    scrollable: true 
}); 

여기에 CSS

.k-grid-content { 
    height: 100px; 
} 
.p20 { 
    width: 20%; 
} 

답변

3

에서

HTML은 수평 스크롤 꽤 똑바로 앞으로 그리드 (가상화를 무시) http://demos.kendoui.com/web/grid/virtualization-remote-data.html입니다. 그리드에 폭이 있거나 그 다음 당신의 스크롤 얻을 실제 그리드 폭을 통해 자신의 합과 각 열에 대해 부모와 폭의 :

{ field: "OrderID", title: "Order ID", width: 60 }, 

이미 다른 게시물에 어제 답변 : Column lines are not in sync in a Kendo grid

또는를

http://jsfiddle.net/vojtiik/2ApvC/3/

주 나는 검도의 비트 최신 버전을 사용하고 jQuery를 다음 당신이 할.

+1

절대적으로 작동하지만 자바 스크립트가 아닌 마크 업에서 너비를 지정하고 싶습니다. 모든 그리드에 대한 모든 열의 세부 정보를 지정해야하는 것은 작업이 부담스럽고 ​​스타일링을 지정하는 데는 (의미 상으로는) 잘못된 장소입니다. –

+0

예, 나는 당신에 대해 무엇을하고 있는지 나중에 깨달았습니다. 어제 질문과는 조금 다릅니다. 텍스트/값 너비가 20 %를 초과하는 그리드를 어떻게 처리 할 계획입니까? 항상 열에 동일한 데이터를 표시합니까? 원하는 모든 열과 헤더에 너비를 설정하고 줄/동기화 차이를 피하기 위해 줄임표 ("my incomplete value ...")를 배치 할 수 있습니다. – Vojtiik

+0

기본적으로 검도는 일부 열이 너무 너비가 큰 스크롤 가능한 격자 (처음에는 짜증납니다)의 테이블 레이아웃을 '고정'으로 설정합니다. 우리는 단지 상태 지시자 아이콘 인 몇개의 열을 가지고 있고 그것들을 단지 몇 픽셀 너비로 설정하고 싶습니다. 다른 모든 것은 줄임표를 가져오고 그리드도 크기를 조정할 수 있도록 설정되며 필요한 경우 가로 스크롤바가 나타납니다 (기능 종류의 예는 푸른 관리 포털의 표를 참조하십시오). 검도가 소비자에게 보이지 않는 복잡함을주지 않으면 서 "두 가지 격자"접근법을 사용하는 것은 수치 스럽다. –

0

또 다른 옵션은 스타일/클래스 속성이있는 <colgroup/><col/> 요소를 사용하는 것입니다.