Knockout-Contrib / KoGrid

A Knockout DataGrid
https://knockout-contrib.github.io/KoGrid/
280 stars 129 forks source link

kgRow Height #117

Open ozkarservices opened 11 years ago

ozkarservices commented 11 years ago

Hi Guys,

Below is my KoGrid that I'm currently using. I'm having an issue trying to make my address column wrap the text which should automatically adjust the height. I'm using the default KOGrid CSS and I tried modifying the class kgRows but I haven't has any luck as of yet. Any idea on how I could accomplish this?

<div id="DataTable" class="example" style="height: 100%; max-width: 100%;" data-bind="koGrid: { data: myObsArray, columnDefs: [ { field: 'id', displayName: 'ID', width: 40 }, { field: 'Name', displayName: 'Name', width: 100, headerClass: 'specialHeader' }, { field: 'Address', displayName: 'Address', width: 100, cellClass: 'kgRow', cellTemplate: 'MultiLineTextTemplate'}, { field: 'Status', displayName: 'Status', width: 100, cellTemplate: 'LinkTemplate'}], autogenerateColumns: false, isMultiSelect: false, enablePaging: true, useExternalFiltering: true, useExternalSorting: true, filterInfo: filterInfo, sortInfo: sortInfo, pageSize: pageSize, pageSizes: [15, 30, 45], currentPage: currentPage, totalServerItems: totalServerItems, selectedItem: selectedItem }">

HoosierMike commented 11 years ago

I just had the same issue, I used a template that had a " br " tag in it and the rowHeight for grid was set to ridiculously large. Something in koGrid only shows a single line in the cell. This was strange because using IE's debugging tools I could see my html in the page, it just wasn't showing up in the cell even though it was there in the cell?

ozkarservices commented 11 years ago

How did you fix the issue? I think the issue has to be with the koGrid.min.js library. I was looking through the koGrid.min.jscode and its seems like they are harding certain styles.

HoosierMike commented 11 years ago

AHA !!!

I just figured out the problem. KoGrid sets the "line-height" to the full row height in .kgRow which means you're never go see anything but that one single line even if you wrap

ozkarservices commented 11 years ago

What's the line code?

Thanks Pal!!

ozkarservices commented 11 years ago

Okay, I was able to fix the issue by doing the following

.kgRow { border-bottom: 1px solid rgb(229, 229, 229); cursor: pointer; line-height:normal !important; }

but their has too be a better way of doing this. I will see if it could be done through the koGrid.min.js file. I'll let you know.

HoosierMike commented 11 years ago

Awesome, ok, I got it figured out and you'd don't have to touch the koGrid, here's what I did. I have a custom template that has 4 rows in it (ie, four separate lines in 1 cell). My lines are 20px tall, so I set the "rowHeight" on the koGrid definition (not on the column) to 80. That's 20px at 4 rows.

Then I added this style at the top of my page

works perfectly ...

ozkarservices commented 11 years ago

I was able to locate the code in the koGrid.min.js file that actually applies the style. Do a CTRL+ F and Replace the following code line-height: {1}px with line-height: normal

HoosierMike commented 11 years ago

Ya, I could modify the source for koGrid but with this one line

.kgRow { line-height:normal !important; }

at the top of my html page it's a no brainer and I can always upgrade without having to remember to modify the code, maybe Eric can make this change permanent? Eric and team? Eric, you would want to make the checkbox in the row to align to the vertical top, but that's an easy change

ozkarservices commented 11 years ago

My2ndGeneration,

I'm trying to make the Row margin to be 5px and its not taking my variables if i add it to the kgRow. Have you been able to do this?

HoosierMike commented 11 years ago

this lines everything up perfectly, including the checkbox which I have in my row:

.kgRow  {
    line-height:normal !important;
    margin-top:2px !important;
}

.kgCell {
    margin-top:1px !important;
}

.kgSelectionCell input[type='checkbox'] {
    margin-top:-2px !important;
}
ozkarservices commented 11 years ago

Yes the code will adjust the content inside the row but it will not make the Row Height bigger then what the default is rendering.

orneryd commented 11 years ago

Currently the rows won't adjust height because they are all position absolute for the virtualization. each row calculates its position based on the rowIndex * the configured rowHeight. Until we change that (and it will take redoing the css and virtualization technique before we will have variable height rows like a table.