CheckBox - only one checked

5 posts, 0 answers
  1. DavidA
    DavidA avatar
    4 posts
    Member since:
    May 2009

    Posted 03 Jul 2009 Link to this post

    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)
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Jul 2009 Link to this post

    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.
  3. illumination
    illumination avatar
    85 posts
    Member since:
    May 2008

    Posted 16 Feb 2011 Link to this post

    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.
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Feb 2011 Link to this post

    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.
  5. reza
    reza avatar
    1 posts
    Member since:
    May 2019

    Posted 26 May in reply to Shinu Link to this post

    tanx ; tara das khosh 
Back to Top