height


KO Grid Scrollbars not visible & Display issues


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

Related Links

Truncating paragraph text with a fixed hight and no bleed
<!doctype html> breaks 100% height
Footer not pushed down - tried everything already
Vertical spacing of cells containing a parbox
What happened to the bodytag?
Displaying height disables jquery ui resizable
Set page tab content height
Setting a LI to 100% height in a responsive framework
Parent DIV with min-height and child with percentage height doesn't working
CKEditor Inline toolbar misplaced when div height changed
How to change size of CKEditor toolbar?
KineticJS: is there any way of getting the height of a Sprite?
100% floating div in height: auto parent
Mootools Morph Height and back
Infragistics XamGrid with different row heights
section covering 100% height of the viewport

Categories

HOME
vue.js
sidekiq
answer-set-programming
angular-cli
cpu-architecture
google-sheets-api
adsense
docker-windows
currency
onenote-api
vuex
gatsby
spinnaker
mongodb-query
cratedb
aptana
cvs2svn
esql
dspic
richfaces
source-maps
jflex
reply
cell-array
picturebox
pyscripter
pdflatex
recurrence-relation
openpgp
honeysql
forecasting
inkscape
issue-tracking
haskell-pipes
tic-tac-toe
code-composer
jupyter-console
automator
chown
appstore-approval
uicollectionviewlayout
build-process
libtiff.net
master
zurb-foundation-apps
group-concat
void
difference
data-import
jenkins-scriptler
ninject.web.mvc
vips
registrykey
windowlistener
visual-studio-code
sparse-file
gray-code
isml
google-hadoop
git-checkout
es2015
consensus
obfuscar
ghostdoc
method-overriding
humanizer
voldemort
late-static-binding
map-force
zipalign
resource-files
arangodb-php
confusion-matrix
loop-invariant
sttwitter
dig
lame
manage.py
xslkey
magickwand
tridion2009
pys60
enumerators
continuous-testing
gdt
windows-phone-7-emulator
applicationcontext
text-size
posting
port-scanning
phpcrawl
rijndael
aio
grooveshark
front-controller
usability-testing
method-signature
castle-validators

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App