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
  • 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.

  • 17590
    Offline posted in reply to TRE

    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.

Reply Children