I use WebDataGrid, version is Infragistics4.Web.v13.1.20131.2107,
In my sample, I set the row delete style is display:none
.igg_IGDeletedRow{ color: #9F9F9F; font-style: italic; text-decoration: line-through; display:none;}
if select first row, and delete the row, then will cause grid line not align, please see below picture:
if delete other row(except first row), there have no problem,
I found this problem will happen when use fixedcolumn feature and set the cell css border property.
the main code is:
// FixedColumn grid.Behaviors.CreateBehavior<ColumnFixing>(); grid.Behaviors.ColumnFixing.ShowLeftSeparator = false; grid.Behaviors.ColumnFixing.FixedColumns.Add(new FixedColumnInfo("ProductID", FixLocation.Left));
// Style grid.ItemCssClass = "GridItem";
<style type="text/css"> .GridItem tr td { border-bottom: 1px solid #a7a7a7; border-right: 1px solid #a7a7a7; } </style>
have been attach the sample source code.
how to solve this problem? please help, thanks.
You are welcome. I am glad to be helping you.Thank you for posting in the community.
after your modified, the code seem very simple & beautiful, thanks a lot.
Hello,
since you are already using JQuery in the presented project, I would like to suggest a more refined approach to deal with the misalignment after first row deletion. Basically all rows in the grid are aligned by the column widths of the first row. So when the first row is deleted, a hidden row is inserted in the HTML <tr mkr="sizeRow"> and the other rows align to it. It is possible to handle the elements width of this hidden row, so all other will be set with the same width. What I suggest is to handle RowDeleted event. At the ServerSide: grid.Behaviors.EditingCore.EditingClientEvents.RowDeleted = "RowDeleted"; At the ClientSide: function RowDeleted(sender,e) { var row = $("tr[mkr='sizeRow']"); $(row).children().each(function () { this.style.width = "101px";
});
In this case the width should be set to match the desired width and compensating for the 1px border like this.style.width = "101px";
Optional: The CSS border attributes could be directly put in the default ig_res folder/ig_dataGrid.css/under the tbody.igg_IGItem > tr > td, instead of adding the GridItem, like:
Optional: tbody.igg_IGItem > tr > td { border-bottom: 1px solid #a7a7a7; border-right: 1px solid #a7a7a7; background-color: White; border-top: solid 1px #999999; padding: 5px 8px 5px 8px; overflow: hidden; height: 20px; text-align: left; vertical-align: middle; font-size: 11px; }
I have commented some of the code in the sample, which is no longer needed in case you like this new approach. Thank you for choosing Infragistics components!
thanks for your reply, in my test, if use
var fixedColumnCount = 1;
and there have two or more fixed columns, still cause grid line not align.
I have made a minor modification in your code (in deleteRow() method) and it seems to work better this way. The correction is not applied for all columns but for the first one. I hope it is of use to you.
//here I have replased the commented line with a new one. //var fixedColumnCount = columnFixing._fixedColumns.length; var fixedColumnCount = 1;
Thank you for contacting Infragistics.