CheckBox - only one checked

[DavidA]

Hi,

I have a datagrid with a CheckBox column. I need this column to only have 1 check box check at any one time. I guess this would be possible through a javascript function? Please can you give me a tip on how to implement this. I have tried using OnCheckedChanged="CheckedChanged" 
but this is server side. THat is ok, but a client side function would be preferable.

thanks


                  <telerik:GridTemplateColumn UniqueName="chkEmailAddrField" HeaderText="Email Address Field" HeaderStyle-HorizontalAlign="Center"
                         ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:CheckBox id="chkEmailAddrField" runat="server" OnCheckedChanged="CheckedChanged"  AutoPostBack="True" Checked='<%# DataBinder.Eval( Container, "DataItem.EmailAddrField") %>'></asp:CheckBox>
                    </ItemTemplate>
                 </telerik:GridTemplateColumn>

thanks
David (new to controls)

[Shinu]

Hi David,

Try the following client side code for selecting only one checkbox in a grid at any time.

ASPX:

<ItemTemplate>
    <asp:CheckBox ID="chkEmailAddrField" runat="server"  onclick="checkboxClicked(event, 'chkEmailAddrField')">
    </asp:CheckBox>
</ItemTemplate>

JavaScript:

<script type="text/javascript">
function checkboxClicked(e, idFragment)
{
    var currentCheckBox = e.srcElement || e.target;
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)
    {
        var input = inputs[i];
        if (input.id == currentCheckBox.id)
            continue;
        if (input.id.indexOf(idFragment) < 0)
            continue;
        //clear out the rest of the checkboxes
        if (input.type && input.type == "checkbox")
        {
            input.checked = false;
        }
    }
}
</script>

Thanks,
Shinu.

[illumination]

I would like to use this script for Checkboxes in the Detail table. Will anybody able to help me?

    function checkboxClicked(e, idFragment) {
        var currentCheckBox = e.srcElement || e.target;
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            if (input.id == currentCheckBox.id)
                continue;
            if (input.id.indexOf(idFragment) < 0)
                continue;
            //clear out the rest of the checkboxes
            if (input.type && input.type == "checkbox") {
                input.checked = false;
            }
        }
    }

<DetailTables>
                        <telerik:GridTableView runat="server" ........
                                <telerik:GridTemplateColumn HeaderText="Encumbrance" SortExpression="Encumbrance" UniqueName="Encumbrance" DataField="Encumbrance" >
                                    <ItemTemplate>
                                        <asp:CheckBox ID="cbxEncumbrance" runat="server" Checked='<%# System.Convert.ToBoolean(Eval("Encumbrance").ToString()) %>'/>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <span><asp:CheckBox ID="cbxEncumbranceEdit" runat="server" Text="Encumbrance" OnCheckedChanged="checkboxClicked"
                                        TextAlign="Right" AutoPostBack="True" Checked='<%# System.Convert.ToBoolean(Eval("Encumbrance").ToString()) %>' /></span>
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Expenditures" SortExpression="Expenditures" UniqueName="Expenditures" DataField="Expenditures" >
                                    <ItemTemplate>
                                        <asp:CheckBox ID="cbxExpenditures" runat="server" Checked='<%# System.Convert.ToBoolean(Eval("Expenditures").ToString()) %>'/>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <span><asp:CheckBox ID="cbxExpendituresEdit" runat="server" Text="Expenditures" OnCheckedChanged="checkboxClicked"
                                        TextAlign="Right" AutoPostBack="True" Checked='<%# System.Convert.ToBoolean(Eval("Expenditures").ToString()) %>'/></span>
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>

Thank you so much.

[Princy]

Hello,

You can apply the same logic in DetailTable with appropriate 'onclick' for CheckBox in detailTable.

ASPX:

<telerik:GridTemplateColumn HeaderText="Encumbrance" UniqueName="Encumbrance">
    <ItemTemplate>
          <asp:CheckBox ID="cbxEncumbrance" runat="server"
               onclick="checkboxClicked(event, 'cbxEncumbrance')"   />
    </ItemTemplate>
</telerik:GridTemplateColumn>

Java Script:

<script type="text/javascript">
    function checkboxClicked(e, idFragment) {
        var currentCheckBox = e.srcElement || e.target;
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            if (input.id == currentCheckBox.id)
                continue;
            if (input.id.indexOf(idFragment) < 0)
                continue;
            //clear out the rest of the checkboxes
            if (input.type && input.type == "checkbox") {
                input.checked = false;
            }
        }
    }
</script>

Thanks,
Princy.

[reza]

tanx ; tara das khosh