Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
295
igGrid / Virtualization / Grid Height 100% / Text-Align right
posted

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/

Parents
No Data
Reply
  • 295
    posted

    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.

Children