KO 눈금 스크롤 막대가 표시되지 않음 및 표시 문제

Question

KOgrid에 두 가지 문제가 있습니다.

1) kogrid에서 스크롤 막대를 가져올 수 없습니다. 스크롤 막대없이 데이터 입력을 수행하는 것은 매우 어렵습니다.

2) 하드 코딩 된 높이와 너비를 지정하지 않아도 kogrid를 사용할 수 없습니다. 고정 된 높이와 너비를 가질 수 없습니다. 다른 사람에게 동일한 문제가 있었습니까?

이 스레드에서 해결 방법 제안을 시도했습니다 (내 viewmodel의 마지막 줄로 jQuery 수정 사용). KO Grid Display Isseues, On resize Gird shows one row. Images also included

그리드의 크기가 증가했지만 데이터가 표시되지 않았습니다. 그러나 크기를 조정하면 페이지 데이터가 표시됩니다. 다음은

내 HTML 및 kogrid 옵션

<div data-bind="koGrid: gridOptions" 
    style="height: 800px; background-color: none;width: 1850px;"> 
    </div> 


    self.gridOptions = { 
     data: self.mydatarray, 
     footerVisible: true, 
     displaySelectionCheckbox: true, 
     afterSelectionChange: self.RowSelectionChange, 
     rowHeight: 50, 
     selectWithCheckboxOnly: true, 
     enableSorting: false, 
     multiSelect: true, 
     selectedItems: self.SelectedRows, 
     enableColumnResize: true, 
     showFilter: false, 
     canSelectRows: true, 
     enablePaging: true, 
     pagingOptions: { 
      currentPage: ko.observable(1), 
      pageSize: ko.observable(3), 
      pageSizes: ko.observableArray([3, 6, 9]) 

     }, 
     rowTemplate: errrowtmpl, 
     columnDefs: [ 
      { field: 'Customer', displayName: 'Customer', cellTemplate: Customersddedittmpl, headerCellTemplate: headercelltmpl }, 
       ... 
     ... 

      { field: 'GenNotes', displayName: 'GenNotes', cellTemplate: simpleedittmpl, headerCellTemplate: headercelltmpl } 
     ] 

    } 

당신은 어떤 자세한 정보가 필요하면 알려 주시기 바랍니다 (내가 이상적으로는 페이징을 사용하지 않으과 및 페이징 옵션없이 시도)입니다

감사합니다

Kenner Dev

Answer 1

내가 직면 한 문제에 대한 해결책을 찾았습니다.

1) Jquery를 사용하여 스크롤 막대를 추가했습니다. 아래 코드 줄을 데이터로드 기능의 마지막 줄에 추가했습니다. 이드가 다른 KOGrid 기능을 해독하는지 잘 모르겠습니다. 제 애플리케이션에서 몇 가지 기본 테스트를 수행했는데 제대로 작동하는 것 같습니다.

$("div.kgViewport").css("overflow", "scroll"); 

2) 나는이 문제를 100 % 해결하는 방법을 아직도 모릅니다. 고정 너비와 높이를 스타일로 언급하지 않으면 여전히 작동하지 않습니다. 내 응용 프로그램에서 모든 화면 크기에서 작동하게하는 문제를 해결하기 위해 고정 너비 및 높이와 달리 vw 및 vh를 사용했습니다.

<div data-bind="koGrid: gridOptions" 
    style="height: 73vh;overflow:scroll;width: 96vw;"></div>