kgRow Height

[ozkarservices]

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]

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]

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]

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]

What's the line code?

Thanks Pal!!

[ozkarservices]

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]

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]

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]

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]

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]

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]

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]

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.