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://es.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
  • 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.

Reply Children