Friday 28 October 2011

Remove Item from Drop Down List using JS


<script type="text/javascript">
function removeListItem()
{
      var htmlSelect=document.getElementById('selectYear');
      if(htmlSelect.options.length==0)
     {
           alert('You have removed all options');
            return false;
      }
      var optionToRemove=htmlSelect.options.selectedIndex;
      htmlSelect.remove(optionToRemove);
      alert('The selected option haas been removed successfully');
      return true;
}


<asp:DropDownList ID="selectYear" runat="server">
<asp:ListItem Value="2000">2000</asp:ListItem>
<asp:ListItem Value="2001">2001</asp:ListItem>
<asp:ListItem Value="2002">2002</asp:ListItem>
<asp:ListItem Value="2003">2003</asp:ListItem>
<asp:ListItem Value="2004">2004</asp:ListItem>

</asp:DropDownList>

<input name="btnRemoveItem" type="button" id="btnRemoveItem" value="Remove Option" onClick="javascript:removeListItem();" />


Add value to the Drop Down List using JS


function addNewListItem()
{
     var htmlSelect = document.getElementById('selectYear');
     var optionValue = document.getElementById('txtYearValue');
     var optionDisplaytext = document.getElementById('txtYearDisplayValue');
     if (optionValue.value == '' || isNaN(optionValue.value))
    {
          alert('please enter option value');
           optionValue.focus();
           return false;
    }
    if (optionDisplaytext.value == '' || isNaN(optionDisplaytext.value))
   {
          alert('please enter option display text');
          optionDisplaytext.focus();
          return false;
   }
    if (isOptionAlreadyExist(htmlSelect, optionValue.value))
   {
          alert('Option value already exists');
          optionValue.focus();
          return false;
    }
    if (isOptionAlreadyExist(htmlSelect, optionDisplaytext.value))
    {
          alert('Display text already exists');
          optionDisplaytext.focus();
          return false;
     }
      var selectBoxOption = document.createElement("option");
      selectBoxOption.value = optionValue.value;
      selectBoxOption.text = optionDisplaytext.value;
       htmlSelect.options.add(selectBoxOption);
      alert("Option has been added successfully");
      return true;
}

function isOptionAlreadyExist(listBox, value)
 {
       for (var x = 0; x < listBox.options.length; x++)
      {
                if (listBox.options[x].value == value || listBox.options[x].text == value)
                {
                       return true;
                }
       }
       return false;
}

</script>

<asp:DropDownList ID="selectYear" runat="server">
    <asp:ListItem Value="2000">2000</asp:ListItem>
    <asp:ListItem Value="2001">2001</asp:ListItem>
    <asp:ListItem Value="2002">2002</asp:ListItem>
    <asp:ListItem Value="2003">2003</asp:ListItem>
    <asp:ListItem Value="2004">2004</asp:ListItem>
</asp:DropDownList>

Option Value
<asp:TextBox ID="txtYearValue" runat="server"></asp:TextBox>
Option Display Text
<asp:TextBox ID="txtYearDisplayValue" runat="server"></asp:TextBox>
<input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javascript:addNewListItem();" />

Monday 24 October 2011

Select and Deselect Checkbox with in gridview using Javascript


<asp:GridView ID="gdvShowData" runat="server" AutoGenerateColumns="False" CssClass="gdvBody" Width="100%" >
<Columns>
   <asp:TemplateField>
       <HeaderTemplate>
               <asp:CheckBox ID="chkheader" runat="server"  onclick="Calculate(this);" ToolTip="Check to select all rows"/>
       </HeaderTemplate>
       <ItemTemplate>
               <asp:CheckBox ID="chkchild" runat="server" />
       </ItemTemplate>
   <ItemStyle Width="8%" />
</asp:TemplateField>        
    <asp:BoundField HeaderText="Name" DataField="Name" />            
 </Columns>
 <EmptyDataTemplate>
    There is no record.
 </EmptyDataTemplate>
</asp:GridView>


function Calculate(SelectAllCheckBox)
{
        var chkAll=document.getElementById(SelectAllCheckBox.id);
        var Parentgrid = document.getElementById('<%= gdvShowData.ClientID %>');      
        var items = Parentgrid.getElementsByTagName('input');
        for (i = 1; i < items.length; i++)
        {          
            if (items[i].type == "checkbox")
            {              
                if (chkAll)
                 items[i].checked = chkAll.checked;              
            }
        }
}

function Selectchildcheckboxes(header)
{
    var ck = header;
    var count = 0;
    var gvcheck = document.getElementById('gdvShowData');
    var headerchk = document.getElementById(header);
    var rowcount = gvcheck.rows.length;
    for (i = 1; i < gvcheck.rows.length; i++)
   {
       var inputs = gvcheck.rows[i].getElementsByTagName('input');
       if (inputs[0].checked)
      {
            count++;
       }
    }
     if (count == rowcount-1)
    {
           headerchk.checked = true;
     }
    else
    {
           headerchk.checked = false;
     }
}

protected void gdvShowData_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox headerchk = (CheckBox)gdvShowData.HeaderRow.FindControl("chkheader");
CheckBox childchk = (CheckBox)e.Row.FindControl("chkchild");
childchk.Attributes.Add("onclick", "javascript:Selectchildcheckboxes('" + headerchk.ClientID + "')");
}
}


Tuesday 18 October 2011

How to compare DateTime

function Datevalidate(txtFromdate,txtToDate)
{

   var txtFromdate = document.getElementById(txtFromdate);
   var txtToDate = document.getElementById(txtToDate);

   if(txtFromdate.value!="" || txtToDate.value!="")
  {
        var str1 = txtFromdate.value;
        var str2 = txtToDate.value;
        var dt1  = parseInt(str1.substring(0,2),10);
        var mon1 = parseInt(str1.substring(3,5),10);
        var yr1  = parseInt(str1.substring(6,10),10);
        var dt2  = parseInt(str2.substring(0,2),10);
        var mon2 = parseInt(str2.substring(3,5),10);
        var yr2  = parseInt(str2.substring(6,10),10);
        var date1 = new Date(yr1, mon1, dt1);
        var date2 = new Date(yr2, mon2, dt2);     
        if(date2 < date1)
        {
            alert("To Date cannot be lesser than From Date");
            return false;
        }  
    }
}

Monday 10 October 2011

Enable disable button on checkbox check


function hideOnCheck()
{
   var chk = document.getElementById('<%=chk.ClientID%>');
   var btn = document.getElementById('<%=btnSubmit.ClientID%>');
   if (chk && btn)
   {
      if (chk.checked == true)
      {
         btn.disabled = false;
      }
      else
      {
         btn.disabled = true;
      }
    }
}

<asp:CheckBox ID="chk" runat="server" Text="All the above data are correct" onclick="hideOnCheck();"/>

Hide row by selecting radio button option


function setRowonClick()
{
    var rowOther = document.getElementById('<%=trShowDetail.ClientID%>');
    if (rowOther)
   {
        var s = document.getElementById('<%=rbtnIsPS.ClientID%>');
        var s1 = s.getElementsByTagName('input');
        for (var i = 0; i < s1.length; i++)
       {
            if (s1[i].checked)
           {
                  if (s1[i].checked && s1[i].value == '0')
                 {
                      rowOther.style.display = '';
                 }
                 else
                 {
                     rowOther.style.display = 'none';
                 }
             }
          }
     }
}

<asp:RadioButtonList ID="rbtnIsPS" runat="server" RepeatDirection="Horizontal" onclick="setRowonClick();">

Dropdownlist validate


function OnSelectedIndexChange()
{
   var s = document.getElementById('<%=ddlPosition.ClientID%>');
   if (s.value == '0')     // or  if (s.options[s.selectedIndex].text=='select')
   {
      alert("Please select the different option.");
      return false;
   }
   else
      return true;
}

<asp:DropDownList ID="ddlPosition" runat="server" onchange="OnSelectedIndexChange();"/>

Allow only numbers in textbox


function isNNumeric(e)
{
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
var keyCode = (isNN) ? e.which : e.keyCode;
//alert(keyCode);
if (isNN)
{
if (keyCode == 0)
return true;
}
if((keyCode>47&&keyCode<58)||(keyCode==8)||(keyCode==9))
{
return true;
}
else
{
if (e.returnValue)
{
e.returnValue = false;
return false;
}
else if (e.preventDefault)
{
e.preventDefault();
return false;
}
this.event.returnValue = false;
return false;          
}
}


  <asp:TextBox ID=”txt_maxage” Onkeypress=”return isNumberKey(event)” runat=”server”></asp:TextBox>