Javascript row selection (web datagrids) and maintaining selections across postbacks

Selecting and setting color for rows in datagrids (web) with javascript and maintaining selections across postbacks: -

Pretty basic stuff but there are a few little tricks to it that can make life easier too - for the developers as well as the users.

As always, I would recommend html controls as opposed to web controls when there is no need for server-side manipulation. There are two grids here - one with a single selection (radio buttons) and one with multi selection.

Most of the code is self explanatory. In particular, notice the use of onpropertychange as opposed to onclick This ensures the firing of the event handlers under all circumstances (as in a radio button getting unchecked because of another one getting selected or a checkbox being unchecked by javascript).

I’m giving all relevant code here. First the javascript

<script>
// Checking previously selected checkboxes
function checkChkRequirements(Ids)
{
IdArr = Ids.split(‘,’);
for (j=0; j <IdArr.length; j++)
{
for(i = 0; i < document.forms[0].elements.length; i++)
{
AnElement = document.forms[0].elements[i]; if ((AnElement.type == ‘checkbox’) && (AnElement.name.indexOf(‘ChkRequirements’) > -1))
{
if (AnElement.value == IdArr[j])
{
AnElement.checked = true;
break;
}
}
}
}
}
// Checking previously selected radio button
function checkRdResults(Id)
{
for(i = 0; i < document.forms[0].elements.length; i++)
{
AnElement = document.forms[0].elements[i]; if ((AnElement.type == ‘radio’) && (AnElement.name.indexOf(‘RdResults’) > -1))
{
if (AnElement.value == Id)
{
AnElement.checked = true;
break;
}
}
}
}
// Common function for coloring rows selected by checkboxes or radio buttons function colorGrid(ControlObj)
{
if (ControlObj.checked)
ControlObj.parentNode.parentNode.style.backgroundColor = ‘LightSteelBlue’;
else
ControlObj.parentNode.parentNode.style.backgroundColor = ‘White’;
}
</script>
Then the HTML
(First grid)
<TD><asp:datagrid id=”dgRequirements” runat=”server” AutoGenerateColumns=”False” HorizontalAlign=”Center”
BorderColor=”Black” BackColor=”White”>
<HeaderStyle Font-Bold=”True” ForeColor=”White” BackColor=”#006699”></HeaderStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<input type=”checkbox” name=”ChkRequirements” onpropertychange=”colorGrid(this);” value=”<%#DataBinder.Eval(Container.DataItem,”Id”)%>”>
</ItemTemplate>
</asp:TemplateColumn>
(Second grid)
<TD><asp:datagrid id=”dgFoundInvItems” runat=”server” AutoGenerateColumns=”False” HorizontalAlign=”Center”
BorderColor=”Black” BackColor=”White”>
<HeaderStyle Font-Bold=”True” ForeColor=”White” BackColor=”#006699”></HeaderStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<input type=”radio” name=”RdResults” onpropertychange=”colorGrid(this);” value=”<%#DataBinder.Eval(Container.DataItem,”Id”)%>”>
</ItemTemplate>
</asp:TemplateColumn>
And finally the C#
if (IsPostBack)
{
if (Request[”ChkRequirements”] != null)
RegisterStartupScript(“checkChkRequirements”, “<script>checkChkRequirements(‘”+(string)Request[”ChkRequirements”]+”’);</script>”);
if (Request[”RdResults”] != null)
RegisterStartupScript(“checkRdResults”, “<script>checkRdResults(‘”+(string)Request[”RdResults”]+”’);</script>”);
}