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
"margin-left" css property is not working in "iggriddatarendered" event.

I am trying to set "margin-left" in igGrid cells, inside "iggriddatarendered" event, like below:

grid.on("iggriddatarendered", function(evt,ui){
var gridId =; //getting gridId of current controller
var columnIndex;

if(gridId == "_IndexPro")
for(i = 0; i <= 1="" i="" br=""> {
columnIndex = $("#" + gridId + "_" + "_DESC_Column").data("columnIndex")-1;

$(grid.igGrid("cellAt", columnIndex, i)).css('margin-left, '20px');


All other css properties are working fine here except "margin-left"

Please let me know what is missing in my code? How to set margin-left in my above code ?

Thanks in advance

  • 235
    Suggested Answer
    Offline posted

    Hello Pree Khanna,

    Since the igGrid acts in ways similar to a plain html table, the styling of the cells is very similar as well. The css margin properties, just like for the html table if are set for a cell will not be taken into account, because that would have more negative effects and that's why it is standard for all browsers.

    I assume you are looking to shift the content of the cells to the right and there could be two ways of doing that:

    One way that can be achieved by setting the padding-left instead of the margin-left.

    Another way would be to wrap the content of each cell with a div element, and then set the margin-left attribute for those div elements.
    The wrapping of the content can be achieved by setting the template option for each column. It would look something like the code bellow:

    { headerText: "Product Name", key: "Name", dataType: "string", template: "<div class='myContentClass' >${Name}</div>" }

    Let me know if you need more information.

    Svetoslav Krastev,