Vaadin 요소 Vaadin-grid 사용자 정의 렌더러 (API 2 이상)

vaadin 요소를 기반으로하는 몇 가지 프로젝트를 포팅하는 작업이 거의 끝났습니다. API 1.x에서 최신 버전까지 vaadin-grid 하지만 예제 나 설명서를 찾지 못했습니다. 사용자 정의 렌더러를 열에 할당하는 방법에 대해 설명합니다.Vaadin 요소 Vaadin-grid 사용자 정의 렌더러 (API 2 이상)

grid.columns[2].renderer = function (cell) { 
    cell.element.innerHTML = ''; 
    var progressBar = document.createElement('progress'); 
    progressBar.setAttribute('value', ((statuses.indexOf(cell.data) + 1)/statuses.length).toString()); 
    cell.element.appendChild(progressBar); 
    };

여기에 특정 문제가 API에 2+ columns이 undefined

인가 있다는 것입니다 :

main.js의 예를 들어 내가 어떻게 다음 2 + API의 포트에 알아낼 수 없습니다 사용자 지정 렌더링 동작을 vaadin-grid-column으로 돌릴 수 있습니까?

주의 :
가

출처

2017-11-18 Franco Rondini

JS API는 상당히입니다 :이 질문에 대한 vaadin framework하지만 약 vaadin elements

이 내가 지금까지 아무것도 발견 TemplateRenderer 또는 이와 유사한 같은 도움이 될 수 있습니다 뭔가를 찾고 있지만

디버그 세션 아니다 v1에서 v2로 변경되었으며 더 이상 columns 개체가 없습니다. 대신 JS를 사용하여 열을 구성하려는 경우 <vaadin-grid-column> 요소의 속성을 직접 수정해야합니다 (DOM 참조가 필요함).

특별히 렌더러의 경우 the migration guide에서 언급 한 것처럼 열 템플릿에 일반 HTML을 사용합니다 (Wiki가 어떤 이유로 닫 혔고 방금 다시 열었습니다).

<vaadin-grid> 
    <vaadin-grid-column> 
    <template> 
    <progress value="[[item.value]]"></progress> 
    </template> 
    </vaadin-grid-column> 
</vaadin-grid>

는 데이터 객체의 정확한 속성 item.value을 교체 (또는 당신이에 전달하기 전에 어떻게 든 데이터를 변환해야하는 경우 계산 된 속성을 사용 :

특정 코드 예를 들어

, 그것을 번역 할 것 <progress> 요소

보너스 :.

당신이 <vaadin-progress-bar>를 사용하여 고려 되세요)

Valo 테마 데모 : https://cdn.vaadin.com/vaadin-valo-theme/2.0.0-alpha4/demo/progress-bars.html

출처

2017-11-20 07:22:38 Jouni

Vaadin 요소 Vaadin-grid 사용자 정의 렌더러 (API 2 이상)

답변

관련 문제