This is a migrated thread and some comments may be shown as answers.

CheckBox - only one checked

4 Answers 112 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DavidA
Top achievements
Rank 1
DavidA asked on 03 Jul 2009, 02:19 PM
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)

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 06 Jul 2009, 04:44 AM
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.
0
illumination
Top achievements
Rank 2
answered on 16 Feb 2011, 10:14 PM
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.
0
Princy
Top achievements
Rank 1
answered on 17 Feb 2011, 10:06 AM
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.
0
reza
Top achievements
Rank 1
answered on 26 May 2019, 01:28 PM
tanx ; tara das khosh 
Tags
Grid
Asked by
DavidA
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
illumination
Top achievements
Rank 2
Princy
Top achievements
Rank 1
reza
Top achievements
Rank 1
Share this question
or