How to draw a border between rows and cols of the asp.net(C#) table?
I have following:
<asp:Table ID="Table1" runat="server" BackColor="White" BorderColor="Black"
BorderWidth="1px" ForeColor="Black">
</asp:Table>
in the codebehind file I add rows:
for (int i = 0; i < games.Count(); i++)
{
TableRow tr = new TableRow();
for (int j = 0; j < 9; j++)
{
TableCell tc = new TableCell();
tc.Text = games[i].getData(j);
tr.Cells.Add(tc);
}
tr.BorderWidth = 1;
tr.BorderColor = Color.Black;
Table1.Rows.Add(tr);
}
However, I I don't see any border between rows and cols of the table.
The table is:
So, how to draw borders between rows and cols of the asp.net table?
You are missing two attributes
GridLines="Both" BorderStyle="Solid"
Should be
<asp:Table ID="Table1" runat="server" BackColor="White" BorderColor="Black"
BorderWidth="1" ForeColor="Black" GridLines="Both" BorderStyle="Solid">
CSS styling is better though
I would just use CSS to draw the borders:
#table1 {
border: solid thin black;
}
#table1 td {
border: solid thin black;
}
Also, creating a table via code is BAD! You should look into using the Repeater control.
Related
This is my ASP.NET page :
<div id="dvtgl1" style="display: none">1.
<asp:TextBox ID="TxtTglCuti1" runat="server" MaxLength="1" style="width: 140px; height: 35px; padding: 12px 10px; box-sizing: border-box; border: 1px solid Silver; border-radius: 4px;" ValidationGroup="MKE"></asp:TextBox><br /><br /></div>
<div id="dvtgl2" style="display: none">2.
<asp:TextBox ID="TxtTglCuti2" runat="server" MaxLength="1" style="width: 140px; height: 35px; padding: 12px 10px; box-sizing: border-box; border: 1px solid Silver; border-radius: 4px; " ValidationGroup="MKE"></asp:TextBox><br /><br /></div>
This is my jQuery script :
$(function(){
$("#<%= TxtTglCuti1.ClientID %>").datepicker({
//dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
showButtonPanel: true,
minDate: dateToday,
beforeShowDay: DisableMonday
});
$("#<%= TxtTglCuti2.ClientID %>").datepicker({
// dateFormat: 'dd/mm/yy',
numberOfMonths: 1,
showButtonPanel: true,
minDate: dateToday, beforeShowDay: DisableMonday
});
This is my VB.NET class :
If (TxtTglCuti1.Text = "") And (TxtTglCuti2.Text = "") And (TxtTglCuti3.Text = "") And (TxtTglCuti4.Text = "") And (TxtTglCuti5.Text = "") And (TxtTglCuti6.Text = "") And (TxtTglCuti7.Text = "") And (TxtTglCuti8.Text = "") And (TxtTglCuti9.Text = "") And (TxtTglCuti10.Text = "") And (TxtTglCuti11.Text = "") And (TxtTglCuti12.Text = "") Then
Response.Write("<script>alert('Data tidak boleh kosong')</script>")
Instead of building a block of code to check every TextBox that contains the date value from DateTimePicker and jQuery of all the text boxes.I built it to assign the value to an array like this :
txt_tgl_cuti(0) = TxtTglCuti1.Text
txt_tgl_cuti(1) = TxtTglCuti2.Text
The thing is, it only works for a small record.
How should I check it dynamically ? I have 12 record of text boxes and my goal is to build a function to prevent users to input duplicate date values in the TextBox
Below are the simle way you can check all text box values are blank,
.ASPX
<asp:PlaceHolder ID="plhDates" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</asp:PlaceHolder>
<asp:Button ID="btnSubmit" Text="text" runat="server" OnClick="btnSubmit_Click" />
.VB
Protected Function MySub() As Boolean
For Each ctl As Control In plhDates.Controls
If TypeOf ctl Is TextBox Then
If (CType(ctl, TextBox).Text = "") Then
Return True
End If
End If
Next
Return False
End Function
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
Dim isContainBlankValue As Boolean = MySub() //return true if any of the textbox have blank value
End Sub
I want to display an image in grid view cell on specific condition andthe condition fails image not to be display.
<asp:GridView ID="gvWrkLogVW" runat="server" AutoGenerateColumns="False"
onrowdatabound="gvWrkLogVW_RowDataBound"
>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="20px" Height="20px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
On row data bound
if (e.Row.RowType == DataControlRowType.DataRow)
{
Image img = (Image)e.Row.FindControl("Image1");
for (int i = 0; i < dtWorkLogDeatils.Rows.Count; i++)
{
if (dtWorkLogDeatils.Rows[i]["email"].ToString() == "True")
{
img.ImageUrl = "/images/mail_send.png";
}
else
{
img.ImageUrl = "";
}
}
}
the last binding image is repeating all the columns.How to assign the image to particular cell
script:
$(document).ready(function () {
$('#Custom').hide('fast');
$('#rbtnEntire').click(function () {
$('#Custom').hide('fast');
$('#Entire').show('fast');
});
$('#rbtnCustom').click(function () {
$('#Entire').hide('fast');
$('#Custom').show('fast');
});
});
function showdiv() {
document.getElementById("divChkList").style.display = "block";
}
aspx file:
<div style="height:700; width:500;">
<div id="select scan type">
<asp:RadioButton ID="rbtnEntire" runat="server" Text="Entire"
GroupName="s1"/>
<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom"
GroupName="s1"/>
</div>
<div id="Entire" style="float:left; height:1000; width:1000; border: solid 1px; margin-left:5px;">
Entire<br />
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True" ExpandDepth="2">
<Nodes>
<asp:TreeNode Text="Entire">
<asp:TreeNode Text="VM">
<asp:TreeNode Text="MBS1">
</asp:TreeNode>
<asp:TreeNode Text="PF1"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="VM1">
<asp:TreeNode Text="MBS2"></asp:TreeNode>
<asp:TreeNode Text="PF2"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<p>
<asp:Button ID="btnCreateXML" runat="server" onclick="btnCreateXML_Click"
Text="Create XML" />
<asp:Label ID="lblResult" runat="server" Text="Label"></asp:Label>
</p></div>
<div id="Custom" style="float:left; height:1000; width:2000; border: solid 1px; margin-left:10px;">
Custom <br />
<div id="Manual" style="border:solid 1px; float:left;">
Manual Scan Controls
</div>
<div id="Multiple" style="border:solid 1px; float:left;">
Multiple Scan Controls
<table>
<tr>
<td valign="top" style="width: 165px">
<asp:PlaceHolder ID="phDDLCHK" runat="server"></asp:PlaceHolder>
</td>
<td valign="top">
<asp:Button ID="btn" runat="server" Text="Get Checked" OnClick="btn_Click" />
</td>
<td valign="top">
<asp:Label ID="lblSelectedItem" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
<asp:HiddenField ID="hidList" runat="server" />
</div>
<br />
</div>
code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
initialiseCheckBoxList();
rbtnEntire.Checked = true;
try
{
TreeView1.Attributes.Add("onclick", "javascript: OnTreeClick();");
}
catch(Exception)
{
Response.Write("Error Occured While onTreeClick");
}
}
}
public void initialiseCheckBoxList()
{
CheckBoxList chkBxLst = new CheckBoxList();
chkBxLst.ID = "chkLstItem";
chkBxLst.Attributes.Add("onmouseover", "showdiv()");
DataTable dtListItem = GetListItem();
int rowNo = dtListItem.Rows.Count;
string lstValue = string.Empty;
string lstID = string.Empty;
for (int i = 0; i < rowNo - 1; i++)
{
lstValue = dtListItem.Rows[i]["Value"].ToString();
lstID = dtListItem.Rows[i]["ID"].ToString();
chkBxLst.Items.Add(lstValue);
}
System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
div.ID = "divChkList";
div.Controls.Add(chkBxLst);
div.Style.Add("border", "black 1px solid");
div.Style.Add("width", "160px");
div.Style.Add("height", "130px");
div.Style.Add("overflow", "AUTO");
div.Style.Add("display", "block");
}//end of initialiseCheckBoxList()
protected void btn_Click(object sender, EventArgs e)
{
string x=string.Empty;
string strSelectedItem = "Selected Items ";
CheckBoxList chk = (CheckBoxList)phDDLCHK.FindControl("chkLstItem"); // phDDLCHK is placeholder's ID
for (int i = 0; i < chk.Items.Count; i++)
{
if (chk.Items[i].Selected)
{
if (strSelectedItem.Length == 0)
{
strSelectedItem = strSelectedItem + ":" + chk.Items[i].Text;
}
else
{
strSelectedItem = strSelectedItem + ":" + chk.Items[i].Text;
}
}
}
lblSelectedItem.Text =strSelectedItem;
}
public DataTable GetListItem()
{
DataTable table = new DataTable();
table.Columns.Add("ID", typeof(int));
table.Columns.Add("Value", typeof(string));
for (int icnt = 0; icnt < 10; icnt++)
{
table.Rows.Add(icnt, "ListItem"+":"+icnt);
}
return table;
}
Problem: When i Select radio button rbtnCustom, It should display div Custom along with the CheckboxList control,which is not happening. When I do not hide div,it is displayed. What can be done to display checkboxList control?
Here is my code, Can any one let me know where I went wrong?
Any help would be appriciated! Thanks!
The reason some of your Javascript isn't working is because you are using the server ID in the client side (Javascript) code.
<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom"
GroupName="s1"/>
Since the above control is set to runat="server" the ID attribute is setting a sever side control ID, the client ID will be generated. If you don't need access to this control on the server, it might be easier to simply use a 'input' element instead of an asp.net control. The other option would be to set the ClientIDMode="Static" so the client ID is the same as the server ID.
<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom" ClientIDMode="Static"
GroupName="s1"/>
Use this for any control if you are not setting the ID in the code behind and if you are using the ID in client side Javascript.
EDIT: You are also missing phDDLCHK.Controls.Add(div); at the end of your initialiseCheckBoxList method.
You are also not providing what javascript "OnTreeClick();" is. It is referenced in the code behind. From what I can tell you are only populating the contents of the custom checkboxlist once on the initialiseCheckBoxList.
How to use asp checkbox control as RadioButton
First we create a script like this:
<script type="text/javascript">
function check(sender) {
var chkBox;
var i;
var j;
for (i = 1; i < 6; i++) {
for (j = 1; j < 6; j++) {
if (i != j) {
if (sender.id == "ck" + i) {
chkBox = document.getElementById("ck" + j);
}
else {
chkBox = document.getElementById("ck" + i);
}
if (sender.checked) {
if (chkBox.checked) {
chkBox.checked = false;
}
}
}
}
}
}
</script>
Now we use following code for our ASP CheckBox controls
<div>
<asp:CheckBox ID="ck1" runat="server" Text="P1" onclick="check(this)"/>
<asp:CheckBox ID="ck2" runat="server" Text="P2" onclick="check(this)"/>
<asp:CheckBox ID="ck3" runat="server" Text="P3" onclick="check(this)"/>
<asp:CheckBox ID="ck4" runat="server" Text="P4" onclick="check(this)"/>
<asp:CheckBox ID="ck5" runat="server" Text="P5" onclick="check(this)"/>
</div>
Thank you...
I have an aspx page and within the page I have a dropdownlist. On pageload, I add some choices to the dropdownlist. But I want to be able to select more than one option from this list when I click the dropdownlist, like a window which opens below of it and has a checkboxlist with the same choices.
How can I add multiple checkboxes to the dropdownlist, or make a checkboxlist in this manner? Should I use JQuery?
Thanks in advance.
For MultiCheckbox Dropdown in Asp.net , Use the following code enter image description here
First refer the ajaxtoolkit assembply in file
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Then add Script Manager
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
</asp:ScriptManager>
Use the following Html Code
<asp:TextBox ID="txtClient" placeholder="Select Clients" runat="server" CssClass="txtbox" ReadOnly="true" Height="28px" Width="250px" Style="margin-bottom: auto; text-align: center; background-color: White; cursor: pointer; border-color: black; margin: 1px;"></asp:TextBox>
<asp:Panel ID="PnlClientlist" runat="server" CssClass="PnlDesign" Style="">
<asp:CheckBox ID="cbAll" runat="server" Text="Select All" BackColor="Aqua" onclick="CheckAll();" />
<asp:CheckBoxList ID="drpClients" runat="server" onclick="UnCheckAll();">
</asp:CheckBoxList>
</asp:Panel>
<cc1:PopupControlExtender ID="PceSelectClient" runat="server" TargetControlID="txtClient"
PopupControlID="PnlClientlist" Position="Bottom">
</cc1:PopupControlExtender>
Add the above reference in cocde
Use Css and JS:
function CheckAll() {
var count = 0;
$('#' + '<%=drpClients.ClientID %>' + ' input:checkbox').each(function () {
count = count + 1;
});
for (i = 0; i < count; i++) {
if ($('#' + '<%=cbAll.ClientID %>').prop('checked') == true) {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
$('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', true);
}
}
else {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
$('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', false);
}
}
}
}
function UnCheckAll() {
var flag = 0;
var count = 0;
$('#' + '<%=drpClients.ClientID %>' + ' input:checkbox').each(function () {
count = count + 1;
});
for (i = 0; i < count; i++) {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if ($('#' + '<%=drpClients.ClientID %>' + '_' + i).prop('checked') == true) {
flag = flag + 1;
}
}
}
if (flag == count)
$('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', true);
else
$('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', false);
}
.PnlDesign
{
border: solid 1px #000000;
height: 300px;
width: 330px;
overflow-y: scroll;
background-color: white;
font-size: 15px;
font-family: Arial;
width: 450px;
}
.txtbox
{
background-image: url(img/drpdwn.png);
background-position: right center;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
background-size: 20px 30px;
}
Probably you have to implement a custom control.
Take a look: http://www.codeproject.com/Articles/18063/Multi-select-Dropdown-list-in-ASP-NET
In My razor view it works please change to required aspx view
#Html.DropDownList("selectedclients", new SelectList(Model.ListClients, "ClientId", "FullName", 1), "---Select clients---", new { #class =multiple = "multiple", id = "clients" })
where ListClients is an IEnumerable list
also add jquery-1.4.4.min.js and jquery.multiSelect.js in view
and in load add
<script type="text/javascript">
$(document).ready(function () {
$("#clients").multiSelect({ oneOrMoreSelected: '*' });
});
</script>
I have a gridview with the following markup:
<asp:GridView ID="gv" runat="server" Width="700px" skinid="gridview" HeaderStyle-HorizontalAlign="Left" AllowPaging="true" PageSize="50" AllowSorting="true" CssClass="gv">
<SortedAscendingHeaderStyle CssClass="sort_asc" />
<SortedDescendingHeaderStyle CssClass="sort_desc" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Project" DataField="Project" SortExpression="Project" />
<asp:BoundField HeaderText="Type" DataField="Type" SortExpression="Type" />
</Columns>
</GridView>
However, my SortedAscendingHeaderStyle and SortedDescendingHeaderStyle CssClass's are not being applied to the HTML when sorting.
My CSS is:
.gv .sort_asc
{
display:block;
padding:0 4px 0 15px;
background:url(/Admin/Images/Icons/arrow_down.jpg) no-repeat;
}
.gv .sort_desc
{
display:block;
padding:0 4px 0 15px;
background:url(/Admin/Images/Icons/arrow_up.jpg) no-repeat;
}
What are the possible reasons for this?
Below is the way, the task can be accomplished:
In .aspx file
<asp:GridView ID="gvData" runat="server" SkinID="yourskinID"
AllowSorting="True" onsorting="gvData_Sorting">
<HeaderStyle CssClass="ascendingCssClass" /> <%-- put it into your SKIN file,
assume you're showing data in ascending initially --%>
<Columns>
</Columns>
</asp:GridView>
In .cs file
private const string ASCENDING = " ASC";
private const string DESCENDING = " DESC";
public SortDirection GridViewSortDirection
{
get
{
if (ViewState["sortDirection"] == null)
ViewState["sortDirection"] = SortDirection.Ascending;
return (SortDirection)ViewState["sortDirection"];
}
set { ViewState["sortDirection"] = value; }
}
protected void gvData_Sorting(object sender, GridViewSortEventArgs e)
{
string sortExpression = e.SortExpression;
if (GridViewSortDirection == SortDirection.Ascending)
{
GridViewSortDirection = SortDirection.Descending;
//Put your CssClass here for descending
gvData.HeaderStyle.CssClass = "descendingCssClass";
SortGridView(sortExpression, DESCENDING);
}
else
{
GridViewSortDirection = SortDirection.Ascending;
//Put your CssClass here for ascending
gvData.HeaderStyle.CssClass = "ascendingCssClass";
SortGridView(sortExpression, ASCENDING);
}
}
private void SortGridView(string sortExpression, string direction)
{
DataTable dt = GetData();
DataView dv = new DataView(dt);
dv.Sort = sortExpression + direction;
gvData.DataSource = dv;
gvData.DataBind();
}
Update:
The sample/test css is a below: I just have used it test purpose, use your appropriate styling.
tr.ascendingCssClass th a:link
{
color:Green;
background-color:White;
}
tr.ascendingCssClass th a:hover
{
color:Orange;
background-color:White;
}
tr.ascendingCssClass th a:visited
{
color:Black;
background-color:White;
}
tr.descendingCssClass th a:link
{
color: red;
background-color:Gray;
}
tr.descendingCssClass th a:hover
{
color: Yellow;
background-color:Gray;
}
tr.descendingCssClass th a:visited
{
color: Yellow;
background-color:Gray;
}
And, the DataTable function is as below:
DataTable GetData()
{
DataTable table = new DataTable("MyDataTable");
using (SqlConnection connection = new SqlConnection(YourConnectionString))
{
//Your data retrival code goes here
adapter.Fill(table); // Finally fill the datatable
}
return table;
}