JQuery/JavaScript Tips n Tricks

1. Check Radio button list value using JQuery and display message.

function rblStatus()
{
     var rss = $('#<%=RadioButtonList.ClientID %> input[type=radio]:checked').val();
     if (rss != 'Pending' && rss != 'Updated' && rss != 'Disapproved')
     {
          msg = "Please Select Status";
          alert(msg);
          return false;
      }
      else
     {
          return true;
     }
 }

2. Jquery Code to check all checkboxes in a gridview

function SelectAllCheckboxes(chk)
{
    $('#<%=gridview.ClientID%>').find("input:checkbox").each(function ()
    {
      if (this != chk) { this.checked = chk.checked; }
    });
}

3. Show / Hide Any server control using Jquery

$("#<%=ASPControlName.ClientID%>").css("display", "none");  //Hide
$("#<%=ASPControlName.ClientID %>").css("display", "block"); //Show

4. Uncheck ASP RadioButtonList

$("table[id$=ASPControlName] input:radio:checked").removeAttr("checked")

5. Assign Value to an ASPControl

$("#<%=ddlStatus.ClientID %>").val('USERVALUE');  //USERVALUE can be any varchar value.


6. Find Gridview row count

 var gvCount = $("#<%=Gridview.ClientID %> tr").length;
  if (gvCount > 0)
 {
     alert("Count is:"+gvCount );
  }
  else
 {
     alert("No rows available");
 }

7. Print data in using client side Code using JavaScript

Step 1: Create table to be displayed under div.

     <div id="div1" runat="server" visible="false">
      <table border="1" cellpadding="1" cellspacing="1" id="PrintSlot" align="center">
        <tr>
           <td align="center" >
             <asp:Label ID="Label6" runat="server" Text="Print Me"></asp:Label>
           </td>
        </tr>
     </table>
   </div>

Step 2: JavaScript Function to print the content.

    function printData()
    {
            var divToPrint = document.getElementById("PrintSlot");  // Pass ID of table
            newWin = window.open("");
            newWin.document.write(divToPrint.outerHTML);
            newWin.print();
    }

Display Checkbox in Telerik RadCombobox and select any specific value using JQuery

Step 1: Display checkbox in Telerik Combobox 

<telerik:RadComboBox ID="ddlStream" runat="server" EmptyMessage="Type Program Name" DataTextField='Program' DataValueField='Code' Style="display: none; width: 300px;" ZIndex="999999" Filter="Contains">
 <ItemTemplate>
   <asp:CheckBox runat="server" ID="chk1" Width="300" Text='<%#Eval("Program") %>' onclick="onCheckBoxClick(this)" />
 </ItemTemplate>
</telerik:RadComboBox>

Step 2: Function to select any checkbox in the RadCombobox

function onCheckBoxClick(element) {
            var text = "";
            var values = "";

            var combo = $find("<%= ddlStream.ClientID %>");
            var items = combo.get_items();

            for (var i = 0; i < items.get_count() ; i++) {
                var item = items.getItem(i);


                var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
                if (chk1.checked) {
                    text += item.get_text() + ",";    
                         //Text of selected checkbox of ComboBox
                    values += item.get_value() + ", ";   
                         // Values of selected checkbox of ComboBox
                }
            }

            text = removeLastComma(text);
            $("#<%=txtBox.ClientID %>").val(text);  // Text generated above displayed in textbox.
            prg = text;
        }

        //This method removes the ending comma from a string.
        function removeLastComma(str) {
            return str.replace(/,$/, "");
        }

Step 3. (OPTIONAL) CSS changes that may be required to display the combobox if displayed in popup (Values added need to be updated as per requirement.)

<style type="text/css">
        .RadComboBoxDropDown
        {
            z-index: 999999999999 !important;
        }

        #ctl00_ContentPlaceHolder1_ddlStream_DropDown
        {
            width: 320px !important;
        }

        .rcbFocused
        {
            width: 320px !important;
        }

        #ctl00_ContentPlaceHolder1_ddlStream table
        {
            width: 320px !important;
        }
</style>