How to align header or data cell for an unbound column? I have something like:
@(Html.Infragistics() .Grid(Model) .DataBind() .PrimaryKey("MyKey") .Columns(pColumn => { pColumn.For(pItem => pItem.MyKey).Hidden(true); pColumn.For(pItem => pItem.Name).HeaderText("Name); pColumn.Unbound("View").Width("15%").HeaderText("View") .Template("<input type='button' onclick='onclickView(${MyKey})' value='Ver' class='delete-button'/>"); }) .ID("MyGrid") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .Render())
Hi Vasya. It works but not as expected. I have a grid with two levels, when I apply the style for every column in the first level, the columns of the second level are centered too and last column in the first level (Description) is not centered. How to center the first column on level 1 and last column on level 2? (just to get an idea how it really works). Look at the attachment. Thanks.
Hello Luis,
Please feel free to contact me if you need any further assistance with this matter.
Thank you for posting in the community.
What I can suggest for achieving your requirement is using selectors to get reference to the particular column you would like to style(regardless whether it is bound or unbound column) and afterwards set the text-align css property for that column. This could be done in the igGrid rendered event. This event is fired after the whole grid widget has been rendered(including headers, footers, etc.) and is going to be fired only when grid is being initialized. Some further reference about igGrid`s rendered event could be found at:
http://help.infragistics.com/jQuery/2014.2/ui.iggrid#events:rendered.
For example:
<script type="text/javascript"> //Delegate $(document).delegate("#grid1", "iggridrendered", function (evt, ui) { //align headers text ui.owner.element.find("tr th:nth-child(4)").css("text-align", "center"); //align celss text ui.owner.element.find("tr td:nth-child(4)").css("text-align", "center"); }); </script>
<script type="text/javascript">
//Delegate
$(document).delegate("#grid1", "iggridrendered", function (evt, ui) {
//align headers text
ui.owner.element.find("tr th:nth-child(4)").css("text-align", "center");
//align celss text
ui.owner.element.find("tr td:nth-child(4)").css("text-align", "center");
});
</script>
I made a small sample illustrating mu suggestion and I am attaching it for your reference.
In my project I am adding unbound column. Afterwards I am handling the rendered event where using css selectors I am getting reference to the particular column and I am setting text-align property for its cells and headers.
I hope you find this information helpful.
Please let me know if you have any additional questions regarding this matter.