The subject explains what I'm trying to do:
igGrid with fixed row virtualization, grid set to dynamic height (a hack), and some of my columns justified right.
This might be a bug, or maybe I'm just not setting something up right. I found a workaround and it is included in the jsfiddle (you'll have to remove the comment line that I added to fix it to see it work.
Here's the abbreviated code to describe how I'm set up:
$("#grid").igGrid({ autoGenerateColumns: false, width: "100%", height: "600px", rowVirtualization: true, virtualizationMode: "fixed", avgRowHeight: "43px", columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" }, { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" }, { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" } ], dataSource: adventureWorks, dataRendered: function (evt, ui) { //Original way that infragistics forum post showed how to right align. //ui.owner.element.find("tr th:nth-child(1)").css("text-align", "right"); //ui.owner.element.find("tr th:nth-child(1)").css("text-align", "right"); //RIGHT ALIGNMENT: this is the way I figured out how to do it once I enabled virtualization/fixed. $("#grid_ProductID").css("text-align", "right"); $(ui.owner.element[0]).find("tr td:nth-child(1)").css("text-align", "right"); },......
The bold code above shows that I'm set up with virtualization, a fixed height, and in the dataRendered event, I found a way to right align the text in both the header and the row data.
The problem is, I don't like the fixed height on the grid. If I set it too small, my users that work with a maximized window complain that they can't see more rows at once. If I make it too large, users that do not maximize their window have to scroll the browser to see the whole grid, in conjunction with the grid scrollbar, it's a pain. I'm sure you get the idea.
I came across this post: http://ko.infragistics.com/community/forums/p/90651/447960.aspx#447960
The code below is the working version. When the grid height is set, anything in the dataRendered event is lost. So the text-align has to be redone. Perhaps I'm using the wrong event? dataRendered is the event that I saw in the forum to use to set up this sort of thing. It wouldn't surprise me is not the best place for this.
function setGridHeight() { $("#grid").igGrid("option", "height", $(window).height() - 120); //RESET the text-align here because it is lost during the resize of the grid. $(".ui-iggrid-virtualrow").find("td:nth-child(1)").css("text-align", "right"); //pretty sure the class I'm using is only going to work with virtualization enabled}
$(window).resize(function () { setGridHeight();});setGridHeight(); //set the initial size of the grid.
Here's the fidde: http://jsfiddle.net/uszr4hsw/3/
It's also worth mentioning that I was trying to right pad the contents of a right justified cell (because they sort of blend too much with an adjacent left justified cell).
I lost the padding with the virtualization as well. Furthermore, I found that my solution to reset the right alignment in the setGridHeight function did not work for the padding. It seems to be overridden by something. I couldn't right pad even using important.
What did work was just adding a style to the top of the page:
.ui-iggrid-virtualrow td:nth-child(2) { padding-right: 20px !important; }
just set the index of your column there and you can right align each column in your grid. For whatever reason, doing it through jquery wouldn't make it stick.
Hello TRE,
Thank you for posting in our community.
First thing that I noticed in your sample is that Updating feature of igGrid I enabled however, there is not primaryKey defined. In case that you would like to use the updating primaryKey option should be set.
Additionally, in the given scenario what I can suggest is using continuous virtualization instead of fixed. The reason is that fixed virtualization requires avgRowheight to be set to a value that is evenly divisible by the value of the height of the grid. Since the size of the window is dynamically changed grids height will be changed as well. In case that you want to stick to this type of virtualization you will have to set the avgRowHeigh property as well (in order to be evenly divisible to the height of the grid) and you need to check whether it meets the requirement which could be a tricky scenario. On the other side, there is no such requirement for the continuous type of virtualization.
Some further reference about configuring both types of virtualization could be found at:
http://www.igniteui.com/help/iggrid-enabling-and-configuring-virtualization
Your modified sample using continuous type of virtualization could be found at:
jsfiddle.net/.../
Please let me know if you need any further assistance with this matter.
Well, I pulled that fiddle from one of your examples in your online documentation and accidentally included the updating feature unintentionally. I do have the PrimaryKey defined in my local version. Thanks for the tip, though.
I noticed that nuance with the 'fixed' virtualization, having to set the avgRowHeight. I saw that and avoided it at first because it seems like it could get complicated. So I used continuous and it seemed ok; it stretched the row height a little but looked ok. But as soon as I edited a row, all the rows in the grid would shrink down the default grid height. Very strange... I tried to figure out what was causing it, but it couldn't figure it out and switched to 'fixed' mode and it appears to be working fine even with resizing the grid and such.
Thank you for your explanation.
Are you experiencing these issues in the sample project provided in this forum thread?
On my side rows do not change their height after they are being edited and continuous type of virtualization. Can you please modify the sample in order to reproduce the issue since in order to debug and investigate this further I need a working sample on my side which I can debug. This is going to be highly appreciated and will help me in finding the root cause of the issue.
Looking forward to hearing from you.
I created the following case for you: CAS-153175-Z5P4L5 and will update you through it. You could see it in your account in the 'Support Activity' page.
Please let me know if you need any additional information.
Yes, fortunately, I'm waiting on yet another unresolved issue to be answered. I had time to go in and reproduce....
Here are steps to see what I am talking about:
This link is modified from my original fiddle above.
I am selecting only the first row from the adventureWorks datasource to put in the grid to show that the continuous virtualization stretches the single row to the whole grid.
It looks silly like that. Especially when you select it for edit (huge text boxes).
Then after clicking done, the row shrinks back down to a normal size (probably what the original row size should have been).
http://jsfiddle.net/uszr4hsw/5/
Thank you for getting back to me.
Did you have the chance to reproduce the issue in an isolated sample?
I have it on my todo list to try to reproduce the problem that I'm having with the continuous mode virtualization in a portable sample that I can share.
I'm currently working on a problem I am having with the igCombo on a different thread.
I'll be back...