KO Grid Scrollbars not visible & Display issues

Question

I am having two problems with KOgrid.

1) I could not get scroll bars in the kogrid .It is very difficult to do data entry without scroll bars.

2) I also could not get kogrid to working wihout specifying hard coded height and width.In my application I can not have a fixed height and width. Did anybody else had the same issue ?

I tried a workaround suggestion from this thread ( using jQuery fix as last line in my viewmodel). KO Grid Display Isseues, On resize Gird shows one row. Images also included

that just increased that size of the grid but it did not display any data . However, when I resize the page data shows up.

Below are my HTML and kogrid options ( I tried with and without paging options, Ideally I do not want to use paging )

 <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 }
        ]

    }

Please let me know if you need any more information

Thanks

Kenner Dev

score 2 · Accepted Answer · answered Jun 09 '14 at 18:11

I found a solution to the problems I am facing.

1) I used Jquery to add scroll bar. I added code line below as last line of my data loading function. I am not sure id this breaks any other KOGrid functionality.In my application I did some basic testing and it seems to be working fine.

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

2) I still dont know how to solve this problem 100%. It still does not work unless fixed width and height are mentioned in style. In my app I used vw and vh as opposed fixed width and height to solve the problem of making it work on all screen sizes.

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

KO Grid Scrollbars not visible & Display issues

1 Answers1