Wednesday, 16 January 2013

Arrange the Checkbox list vertically

This is a small piece of code which is required many a times to provide vertical scroll for a Check-Box list.

<asp:CheckBoxList runat="server" ID="chkbxlstFacility" RepeatDirection="Vertical"
Height="300" RepeatColumns="1" RepeatLayout="Flow">
</asp:CheckBoxList>


Search in a Check-Box list

This is a very important piece of code which is required many a times to search in a Check-box List on a web page. This code requires a text box to enter the search text and a check box list in which this search is to be performed. This code searches the first item in the list starting with the searched text and then scrolls the div up to that searched item.



function SearchBox(ListBox, SearchTextBox, ChkBoxSA, divSel) {
     
        var searchText;
        var arrListBox = new Array(5);
        arrListBox[0] = '<%=chkbxlstFacility.ClientID %>';
        arrListBox[1] = '<%=chkbxlstProductLine.ClientID %>';
        arrListBox[2] = '<%=chkbxlstState.ClientID %>';
        arrListBox[3] = '<%=chkbxlstCountry.ClientID %>';
        arrListBox[4] = '<%=chkbxlstContinent.ClientID %>';

        var abox = document.getElementById(arrListBox[ListBox]);
        var checkBoxArray = abox.getElementsByTagName('input');
        var checkBoxLabel = abox.getElementsByTagName('label');

        for (var j = 0; j < checkBoxArray.length; j++) {
            var checkBoxRefLbl = checkBoxLabel[j];
            var checkBoxRef = checkBoxArray[j];
            if (SearchTextBox.value != "") {
                var ser = checkBoxRefLbl.innerText.toLowerCase();
                var toSer = SearchTextBox.value.toLowerCase();
                if (ser.startsWith(toSer)) {
                    checkBoxRef.focus();
                    divSel.scrollTop = checkBoxRef.offsetTop + 20;
                    break;
                }
            }
            else {
                ChkBoxSA.focus();
                break;
            }
        }
        SearchTextBox.focus(); 
     }


Retain the value of a Read-Only Textbox after Postback


Tto retain the value of a readonly textbox after postback use the following line of code:

txtBox.attributes.add(“readonly”,”readonly”);

in the back-end code instead of writing "readonly" in HTML.