Hi Team,
I have a web data grid where I am adding rows to it via javascript
function AddRow() { var grid = $find('<%= dgKeyWords.ClientID %>'); var editing = grid.get_behaviors().get_editingCore(); var rowAdding = editing.get_behaviors().get_rowAdding(); rowAdding._commitRow(); }
Now , I have OnRowAdding server side event that is doing some business validation and returning the error message if any.
My requirement is that if user adds 3-4 new rows and saves the data (batch update) and there comes error on row 1 and 3 (of newly added row), how can I make them highlighted once page renders back..
I am able to do so for existing rows if I am updating records as I am getting row index and based on that I am highlighting rows as
dgKeyWords.Rows[failedBandIndex].CssClass = AppStylingManager.Settings.CssRegistry.Add("background-color:OrangeRed;", "tbody>tr.{0}>td", false); where failedBandIndex is the index of an existign row.
For newly added row, I can not access the same via dgKeyWords.Rows[failedBandIndex].. So how to highlight the newly added rows if required?
Varun
Hello Varun,
Thank you for contacting Infragistics!
I have done some looking into this matter and have the following information. As in the RowAdding event the row is still in the process of being added to the grid you can’t add the CSS to the row yet. What you can do is make a list/array rows that fail validation the in the button click add the CSS to the row with the following code:
WebDataGrid.Rows[RowIndex].CssClass = “cssClassName”;
Please let me know if you have any further questions concerning this matter.
Hi,
WebDataGrid.Rows[RowIndex].CssClass = “cssClassName”; will only work in the case where row is already binded to the grid.
Here, in this case, new rows were added via client side row adding and on RowAdding server side event, I am trying to highlight the row which is not taking place.
What I tried to do now is at the RowAddign server side event, when the process is failing the business check, I am returning the new row index via setting
dgKeyWords.CustomAJAXResponse.Message ='1,2'
and at the client side, tried to set the background color of Tr TD by finding via row index
function WebDataGridView_AJAXResponse(webDataGrid, evntArgs) {
$("tr [class^=igg_AddingRow]").eq(Ids[i]).find("td").css("background-color", "OrangeRed");
}
Issue is that once I do commit, it is going to server side and when coming back to AjaxResponse, the flag that a row is a new one is not there any more that is
the newly added row is not in italics and the class is also not igg_AddingRow hence I am not able to get the same.
Please suggest
Thank you for the update. The reason the igg_AddedRow CSS class gets removed from the row is when you cause a postback you are saving the row to the grid making it no longer a new row. If you add the CSS in the save button on postback this will occur after the RowAdding event and then you can use the following code to change the color of the row:
WebDataGrid1.Rows[1].Items[0].CssClass = "rowColor";
Note you will want to loop through the cells in the row. Also with background color you will want to mark it as important otherwise it will be overwritten:
.rowColor{ color:red; background-color:black !important; }
If you want to apply the style on the client you can use the following code:
var grid = $find("<%=WebDataGrid1.ClientID %>");grid.get_rows().get_row(0).get_cell(0).get_element().style.backgroundColor = "red";grid.get_rows().get_row(0).get_cell(0).get_element().className = "style1";
or
var grid = $find("<%=WebDataGrid1.ClientID %>");grid.get_rows().get_row(0).get_cellByColumnKey("DepartmentID").get_element().style.backgroundColor = "red";grid.get_rows().get_row(0).get_cellByColumnKey("DepartmentID").get_element().className = "style1";
Please let me know if you have any further questions concerning this matter