locked
How to set focus from top to bottom for checkboxes RRS feed

  • Question

  • User-944424728 posted
    Hello, I have 3 column and 4 row checkboxes but when using keyboard, the focus go from left to right 123. How can I make the focus when tabbing each checkbox to go from top to bottom, then 2nd column from top to bottom 1234. Thanks.
    123
    234
    345
    456
    Wednesday, May 15, 2019 5:18 PM

All replies

  • User475983607 posted

    Set the checkbox element tab index.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

    Wednesday, May 15, 2019 5:37 PM
  • User753101303 posted

    Hi,

    Not sure which controls you are using. You are using a real "table" for your layout ? Try to change the https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.webcontrol.tabindex?view=netframework-4.8 property (which will ultimately change the corresponding HTML tabindex attribute).

    If you can change your markup (for example one div for each column  and showing them side by side) you should be back at using the default ordering.

    Wednesday, May 15, 2019 5:40 PM
  • User-944424728 posted

    the checkbox list. How can  I set the focus from top to bottom. I don't think I can use tabindex. Thanks.

    <asp:CheckBoxList  runat="server" id="chkBenefits" RepeatDirection="Vertical"  RepeatColumns="3" RepeatLayout="Table" cellspacing="1"/> 

    Thursday, May 16, 2019 1:01 AM
  • User288213138 posted

    Hi aspvbnet,
     

    You can still use tabIndex, but you need to call it using jquery.

    I wrote a demo that you can use as a reference.
     

    Example:

    <script>
            $(function () {
                var boxesInRow = $("#CheckBoxList1 tr:first :checkbox").length; // column count
                 var rowCount = $("#CheckBoxList1  :checkbox").length / boxesInRow; // row count
                $("#CheckBoxList1 :checkbox").each(function (index, ele) {
                    var rowIndex = Math.ceil((index + 1) / boxesInRow);      // the current checkbox's row index
                    var columnIndex = (index + 1) % 3 == 0 ? 3 : (index + 1) % 3;  // current checkbox's column index(start from 1)
                    var tabIndex = rowIndex + (columnIndex - 1) * rowCount; // get the tabIndex of current checkbox
                    $(this).attr("tabIndex", tabIndex);  // set the cumputed tabIndex;
                })
    
            })
    </script>
    
    <div>           
                <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical"
                    RepeatColumns="3" RepeatLayout="Table" cellspacing="1"></asp:CheckBoxList>           
    </div>
    
    

    The result:

    Best regards,

    Sam

    Thursday, May 16, 2019 9:43 AM