Asp.net C# , Sqlserver Professional: August 2016

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoChosen.aspx.cs" Inherits="Demo.DemoChosen" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

<title></title>

<style>
.panel-heading
{
cursor: pointer;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single
{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
background-image: none;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single div
{
top: 4px;
color: #000;
}

select.form-control + .chosen-container .chosen-drop
{
background-color: #FFF;
border: 1px solid #CCC;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
margin: 2px 0 0;
}

select.form-control + .chosen-container .chosen-search input[type=text]
{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image: none;
}

select.form-control + .chosen-container .chosen-results
{
margin: 2px 0 0;
padding: 5px 0;
font-size: 14px;
list-style: none;
background-color: #fff;
margin-bottom: 5px;
}

select.form-control + .chosen-container .chosen-results li,
select.form-control + .chosen-container .chosen-results li.active-result
{
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333;
white-space: nowrap;
background-image: none;
}

select.form-control + .chosen-container .chosen-results li:hover,
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
color: #FFF;
text-decoration: none;
background-color: #428BCA;
background-image: none;
}

select.form-control + .chosen-container-multi .chosen-choices
{
display: block;
width: 100%;
min-height: 34px;
padding: 6px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image: none;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"]
{
height: auto;
padding: 5px 0;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice
{
background-image: none;
padding: 3px 24px 3px 5px;
margin: 0 6px 0 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #FFF;
border-color: #CCC;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close
{
top: 8px;
right: 6px;
}

select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus
{
border-color: #66AFE9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}

select.form-control + .chosen-container-multi .chosen-results li.result-selected
{
display: list-item;
color: #ccc;
cursor: default;
background-color: white;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<div class="form-group">
<label for="id_tipo_equipo" class="control-label">Tipo</label>
<select name="id_tipo_equipo" id="id_tipo_equipo" class="form-control chosen" data-placeholder="[Tipo]">
<option value="1">Access Point</option>
<option value="2">Adaptador</option>
<option value="3">Adaptador DVI a VGA</option>
<option value="4">Adaptador Electrico para Discos</option>
<option value="5">Aire Acondicionado</option>
<option value="6">Amplificador</option>
<option value="7">Antena</option>
<option value="8">Antena Poe</option>
<option value="9">Bases de Monitor</option>
<option value="10">Bluetooth</option>
<option value="11">Cable de Poder</option>
<option value="12">Cable USB</option>
<option value="13">Cable UTP</option>
<option value="14">Cables Conectores</option>
<option value="15">Camara de Fotos</option>
<option value="16">Camara de Video</option>
</select>

</div>

<button onclick=" return getVal();">Get Selected Value</button>
</div>
</form>
</body>
<script>
$(document).ready(function () {
// $('select').chosen({ width: '100%' });
var config = {
'#id_tipo_equipo': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}

for (var selector in config) {
$(selector).chosen(config[selector]);
}
});

function getVal() {
alert(document.getElementById("id_tipo_equipo").value);
return false;
}
</script>
</html>

Asp.net C# , Sqlserver Professional

Tuesday 30 August 2016

Filter or Search ASP.Net DropDownList Using JavaScript

Get all non-clustered indexes

Google Website Translator Gadget

Followers