Blazor Grid Lite Data Binding

Grid Lite는 aList<T>를 데이터 소스로 받아들이며, 여기서T는 모델을 나타냅니다. 각 그리드 행은 배열 내 데이터 레코드의 렌더링된 표현이며, 행 셀은 열 구성에 의해 제어됩니다.

정렬 및 필터링과 같은 데이터 변환을 적용할 때, 그리드는 원래 데이터 참조를 수정하지 않습니다. 즉, 데이터 변환은 원본 소스에 반영되지 않습니다. 그리드는 데이터 배열 내 객체의 변화를 추적하지 않으므로 데이터 객체의 직접적인 수정은 반영되지 않습니다.

Change the Data Source at Runtime

이 컴포넌트는 런타임에 데이터 소스를 변경하는 것을 지원합니다. 새 소스가 이전 것과 다른 '형태'를 가지고 있다면 컬럼 구성도 반드시 업데이트하세요.

<IgbGridLite Data="data">
    <!-- Update column configuration, add or remove columns as needed to represent the new data. -->
    <IgbGridLiteColumn Field="Id" />
</IgbGridLite>

@code {
    this.data = new List<T>
    {
        // records follow
    };
}

If the grid has AutoGenerate enabled, it will "infer" the new column configuration automatically when the data changes.

<IgbGridLite Data="data" AutoGenerate="true" />

@code {
    // After the new binding the grid will infer the column collection from the bound data.
    this.data = new List<T>();
}

[!NOTE] The sort/filter states of the Grid Lite are kept when changing the data source in this manner. Usually you will want to reset them by calling either ClearSort() and/or ClearFilter().

아래 샘플에서는 격자가 열의 자동 생성이 활성화되어 있습니다. 데이터 전환 버튼을 클릭하면 열 컬렉션이 초기화되고 새로운 데이터 소스가 그리드에 바인딩됩니다.

Additional Resources

• Column Configuration
• 정렬
• 필터링
• 테마 및 스타일링

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Grid Lite GitHub