I have dynamically bound and formatted fields to a WebDataGrid. All looks and behaves well, except that I need to visually inform the customer of which columns are editable. Basically, if the customer selects a specific presentation than I want to dynamically add the columns based on the table fields (done), generically format the fields based on table field types (done), and then change the background color of the editable columns (not done).
The discussion here:
comes close
However, while I can adjust the color of the text I cannot seem to adjust the background color of the column.
Hello Roger,
Thank you for posting in Infragistics forum !
I have prepared a small sample demonstrating how applying style can be achieved. In my sample the columns that are editable have ReadOnly property of false. You can use for loop to go through all columns of the grid and apply the style based on that Boolean value.
Code Snippet:
function ApplyClass() {
var grid = $find("WebDataGrid1");
colNumber = grid.get_columns()._items.length; // gets the number of columns
for (i = 0; i < colNumber; i++) {
isNotEditable = grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing().get_columnSettings()._items[i].get_readOnly(); // returns true or false
if (!isNotEditable) {
y = i + 1;
$("tr>td:nth-child("+ y +")").addClass("colclass"); // apply this class to all <td>s that are the y-th child of <tr>
}
If you have not set the ReadOnly property of these columns maybe this solution will need to be slightly modified.
Please review it and see if it works for your scenario. If it doesn't please provide the code where you enable the CellEditing behavior of the grid so that I would modify my solution for your case. It is also possible to achieve this functionality in code behind, if this is the case just let me know.
Hristo,
This code still doesn't affect the background color of the column. I can change the text color with the 'color' attribute, but cannot change the cell's or column's background color with the 'background-color' attribute.
Roger
The sample that I sent correctly applies background color to cells, doesn't it work on your machine ? In order to investigate this further please modify my sample or isolate your issue on a small working sample and sent it back to me. Please include any custom styles that you use. I will be glad to help you with that.
You were correct. What was happening is that I use the same WebDataGrid for multiple DataTables - picked by the user. The first one (default) did not have any editable columns in it, and because I was not correctly maintaining the grid Behaviors I was not marking any fields for read/write. The ReadOnly settings were being carried from the first grid view to the next to the next and so forth. Kinda bad luck. Tracked that problem down and now the background displays as expected.
Can you still help me out a bit by doing the same process in code-behind. Already marked the client side as Complete, but a server side would be very helpfull.
I am glad that the suggested code worked for you. In server side you can achieve the following in Page_Load as follows:
var colSettings = WebDataGrid1.Behaviors.EditingCore.Behaviors.CellEditing.ColumnSettings; for (int i = 0; i < colSettings.Count; i++) // go through every colSettings { bool isNotEditable = colSettings[i].ReadOnly; if (!isNotEditable) // returns true if the column is editable { WebDataGrid1.Columns[i].CssClass = "colclass"; // apply some css class } }
I have also modified my sample to use the server side code to achieve this functionality. I hope this helps. Please do not hesitate to contact us if you have any further questions regarding this issue, I will be glad to help.
Thank you Hristo. I am selecting the Code Behind solution because my grid control is all code behind.
The only change I made was to reference the WebDataGrid1.Columns[colSettings[I].ColumnKey].CssClass property. My grid has more ColumnSettings than columns, that is a column can be read/write and have a dropdown or something. Thus, I am referencing the actual grid column by the ColumnKey property of the colSettings.
Thanks again
I am glad you have managed to resolve your issue. If you have any further questions, do not hesitate to contact us.
Thank you for choosing Infragistics components !