How to bind Drop down list in asp.net using C#

Posted by senthil | 6:36:00 PM | , | 0 comments »

This is drop down list how to bind in asp.net using C sharp and just create object then pass that drop down id. see the following code step by step.
Step:1

Just create a HTML code like this and then SkinID its not important. 
<table><tr><td>  <asp:DropDownList ID="ddlAddCompanyUser" runat="server" SkinID="dropdownlist_large"
                                AutoPostBack="true" OnSelectedIndexChanged="ddlAddCompanyUser_SelectedIndexChanged">
                            </asp:DropDownList></td></tr></table>
Step:2

This code write back end like this and pass the drop down list id and then if u want the selected value for some further process. just write a OnSelectedIndexChanged get the values. then just the pass the method name in OnLoad_page(){LoadAddCompanyUser()} 
private void LoadAddCompanyUser()
    {
        List<Company> objCompanyList = Company.GetAllCompany(); // Company table object
        objCompanyList = objCompanyList.OrderBy(c => c.CompanyName).ToList();
        
        ddlAddCompanyUser.Items.Clear();
        ddlAddCompanyUser.DataSource = objCompanyList;
        Utility.BindDropDownList(ddlAddCompanyUser, "CompanyName", "CompanyID", "-------- Select Company -------");
    }
Step:3
Its using for get the value while the select value. 
protected void ddlAddCompanyUser_SelectedIndexChanged(object sender, EventArgs e)
    {
  string CompanyName=(ddlAddCompanyUser.SelectedItem.Value));
    }
Read more ...

How to create Drop down Menu like facebook

Posted by senthil | 10:37:00 AM | , | 0 comments »

code is creating drop down menu using JavaScript. I can also used this code its working correctly. Its may be useful.

Step:1

Click here to download the jquery file.

<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 
 // This hides the menu when the page is clicked anywhere other than the menu.
  $(document).bind('click', function(e) {
   var $clicked = $(e.target);
      if (! $clicked.parents().hasClass("menu")){
          $(".menu dd ul").hide();
    $(".menu dt a").removeClass("selected");
   }

  });
  
  $(".menu dt a").click(function() {

   var clickedId = "#" + this.id.replace(/^link/,"ul");

          // Hides everything else that the current menu 
   $(".menu dd ul").not(clickedId).hide();

          //Toggles the menu.
   $(clickedId).toggle();

          //Add the selected class.
   if($(clickedId).css("display") == "none"){
    $(this).removeClass("selected");
   }else{
    $(this).addClass("selected");
   }

  });
  
// This function shows which menu item was selected in corresponding result place
  $(".menu dd ul li a").click(function() {
   var text = $(this).html();
   $(this).closest('dl').find('.result').html(text);
      $(".menu dd ul").hide();
  });

  
 });
</script>
Step:2

Its CSS class using this class and change the images and image path. 


<style type="text/css">

 .menu dl{ margin-left:5px; }
 .menu dd, .menu dt, .menu ul 
 { margin:0px; padding:0px; }
 .menu dd { position:relative; }

 
 .menu dt a {background:#EEEEEE 
 url(Images/privacyOff.png) no-repeat scroll right center;
  display:block; width:40px; height:22px; cursor:pointer;}

 .menu dt a.selected{
  background:#EEEEEE url(Images/privacyOn.png) 
  no-repeat scroll right center;
 }
 .menu dt a span {
 cursor:pointer; display:block; padding:5px;}

 .menu dd ul { 
 background:#EEEEEE none repeat scroll 0 0; display:none;
  list-style:none; padding:3px 0; position:absolute;
  left:0px; width:160px; left:auto; right:0; 
  border:1px solid #656565; cursor:pointer;
  }
 .menu dd ul li{ 
 background-color:#EEEEEE; margin:0; width:160px;
 }
 .menu span.value { display:none;}
 .menu dd ul li a { 
 display:block; font-weight:normal; width:137px; 
 text-align:left; overflow:hidden; padding:2px 4px 3px 19px; 
 color:#111111; text-decoration:none;
 }
 .menu dd ul li a:hover{ 
 background:#656565; color:white; text-decoration:none; 
 }
 .menu dd ul li a:visited{ 
 text-decoration:none; 
 }
</style>
Step:3 

 Its a HTML code just code and past change some thing in your drop down menu list. 

<html><head>
</head>

<body>
<div style="clear:both;">.</div>
 <div style="width:500px; margin:auto;">
  <h1 style="margin:20px 0;">Facebook menu Menus</h1>

 <div style="height:300px;">
   <div style="width:162px;">
       <dl style="" class="menu">
          <dt>
       <a class="" id="linkglobal" 
       style="cursor: pointer;"></a></dt>
     <dd>
               <ul style="display: none;" id="ulglobal">
                   <li><a href="#">My Account</a></li>
                   <li><a href="#">My Profile</a></li>
                   <li><a href="#">My Product</a></li>
                   <li><a href="#">My Feature</a></li>
             </ul>
          </dd>
       </dl>
   </div>
 </div>
  </div>
</body></html>
Output:
Read more ...

How to password set "Readonly" using Javascript

Posted by senthil | 11:10:00 AM | | 0 comments » 


This function password mode set "Readonly" using Javascript function. I have used.When I try to edit password that time will show the text mode and editable otherwise that text are "Readonly".




<input type="text" id="mytextbox" value="click the button below."/>
<input type="button" value="click" onclick="changeText();"/>

function changeText(){
   var text_box = document.getElementById('mytextbox');
    if(text_box.hasAttribute('readonly')){   
        text_box.value = "This text box is editable.";
        text_box.removeAttribute('readonly');
    }else{       
        text_box.value = "This text box is read only.";
        text_box.setAttribute('readonly', 'readonly');   
    }
}
Read more ...

Subscribe to: Posts (Atom)
Related Posts Plugin for WordPress, Blogger...