Hi,
I'd like to be able to conditionally hide my bound checkbox column/cell by row.
For example:
I have 10 rows in my grid. Based on a condition, 3 of those rows should have the checkbox visible and the rest should be hidden.
How can I achieve this?
Thanks!
Hello Khaled,
You can hide some of the check boxes by handling the InitializeRow event of the WebDataGrid and setting a css class to some of the cells. For example if you want to hide the checkboxes of every second row you can try the following:
protected void WebDataGrid1_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e) { if (e.Row.Index % 2 == 0) { e.Row.Tag = true; e.Row.Items[3].CssClass = "disabled"; } }
in css:
<style type="text/css"> .disabled { visibility:collapse; } </style>
For additional reference you can check the attached sample.
If you need any further assistance on this do not hesitate to ask.
Hi Elena,
Thanks for the response. I tried but it doesn't render correctly. I attached a screen shot to demonstrate.
Any ideas?
can I know how to just disable the checkbox in the above scenario?
Thank you!
Hi Khaled,
Continue to do it on the server by assigning a css class, but change the css class definition to target the image itself.
.disabled>img{ display : none; }
regards,
David Young
Hello Khaled ,
Thank you for the screenshot. Based on your scenario you can try to hide only the checkbox itself instead of the whole cell content. For example you can achieve this on the client side event Initialize as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> function init() { var grid = ig_controls.WebDataGrid1; var rowsCount = grid.get_rows().get_length(); for (var i = 0; i < rowsCount; i++) { var id = grid.get_rows().get_row(i).get_cellByColumnKey("id").get_value(); if (id <= 2) { var cell = grid.get_rows().get_row(i).get_cellByColumnKey("Check"); // cell.set_value(null); var elem = cell.get_element(); var img = elem.children[0]; $(img).css("visibility", "collapse"); } } } </script>
you can check the sample that I modified for you.
If you need any additional assistance on the matter please do not hesitate to ask.