We Keep Coding

Textbox not getting readonly

I have a textbox, on click, it allows you to select date from calendar control. If the date is deleted, it should uncheck the checkbox available just next to the textbox.
With below code, I am able to achieve everything other than making the textbox readonly so that user is not able to type anything. Also, once the text is selected, checkbox gets checked but when text is deleted the checkbox doesn't get unchecked.
Can anyone suggest what needs I might be doing wrong here ?
<asp:CalendarExtender ID="CalForDate" runat="server" TargetControlID="txtDate" Format="MM/dd/yyyy" PopupPosition="BottomLeft" DefaultView="Days"></asp:CalendarExtender>
<asp:TextBox runat="server" ID="txtDate" AutoPostBack="true" EnableViewState = "false" onKeyPress="javascript:return ChkCheckBox()" OnTextChanged="txtDate_OnTextChanged"></asp:TextBox>
The javascript code:
function ChkCheckBox() {
var txtDate = document.getElementById('ctl00_ctl00_cphMSTMainPage_cphMSTLDAHomePage_txtDate').value;
if (txtDate.length == 9) {
document.getElementById('ctl00_ctl00_cphMSTMainPage_cphMSTLDAHomePage_chkDate').checked = true;
}
else
{
document.getElementById('ctl00_ctl00_cphMSTMainPage_cphMSTLDAHomePage_chkDate').checked = false;
}
In pageload I have added:
if (!IsPostBack){
txtDate.Attributes.Add("readonly", "readonly");}
And on text changed:
public void txtDate_OnTextChanged(object o, EventArgs e){
if (!(string.IsNullOrEmpty(txtDate.Text)))
{
chkDate.Visible = true;
chkDate.Checked = true;
}
else
{
chkDate.Visible = true;
chkDate.Checked = false;
} }

You can easily achieve this using jquery. I am sending you the sample code. Please don't hesitate to ask further assistance if needed.
<script type="text/javascript">
$(document).ready(function () {
$('#txtDate').on('change', function () {
//console.log('Tested');
if ($(this).val().toString().trim() != '') {
$('[Id*=ckTest]').attr('checked', 'checked');
}
else {
$('[Id*=ckTest]').removeAttr('checked');
}
});
$('#btnClear').click(function () {
$('#txtDate').val('');
$('#txtDate').trigger('change');
});
});
</script>
The code file is as below.
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true" ClientIDMode="Static"></asp:TextBox>
<asp:CheckBox ID="ckTest" runat="server" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" />
<button id="btnClear">Clear</button>
</div>
</form>
Just add jquery to project i used
jquery-2.1.4.min.js

reset / clear all text box function not working

I have a function that is supposed to clear/reset all textbox in my aspx.page and this page is using a master page but it doesn't work. below is the code. Just got this code from this site.
//Clear all textbox
ResetTextBoxes(this);
//function to clear textboxes
private void ResetTextBoxes(Control parent)
{
if (parent is TextBox)
{
((TextBox)parent).Text = string.Empty;
}
foreach (Control child in parent.Controls)
{
if (child is TextBox)
{
((TextBox)child).Text = string.Empty;
}
ResetTextBoxes(child);
}
}

Just want to share a solution on asp.net codebehind. In this , you should put all the id's of your textboxes in array.
TextBox[] textboxes = {TextBox2,TextBox3,TextBox4,TextBox5,TextBox6 };
for (int i = 0; i < 5; i++)
{
TextBox myTextBox = textboxes[i];
myTextBox.Text = "";
}

The other way around I found is use a javascript function that will clear all my asp.net Textboxes. I've added a class to all all the Textbox e.g.
<asp:TextBox ID="txtName" runat="server" class="mTxtBox"> </asp:TextBox>
<asp:TextBox ID="txtID" runat="server" class="mTxtBox"> </asp:TextBox>
<asp:TextBox ID="txtDept" runat="server" class="mTxtBox"> </asp:TextBox>
<asp:Button onclick="ClearTxtBoxes_Click" ID="ClearTxtBoxes" runat="server" Text="Clear Fields"> </asp:Button>
//onclick event of Button
ScriptManager.RegisterStartupScript(this,this.GetType(),"runJs","clearText();",true);
//my JavaScriptFunction
function clearText(){
$('.mTxtBox').val('');
}

Controls sometimes have a hard time updating. Try calling child.Refresh(); and see if that fixes it.

Checkboxlist inside a usercontrol going as null when control passed from an aspx page

Have landed into a scenario again. The summary is as follows:
I have a user-control which is basically a mix up of a textbox,imagebuttons,checkboxlist incorporated together to look like a single-select dropdown with checkboxes..works pretty fine. One of the images inside the usercontrol opens up an aspx page as a popup.have few functionalities there viz saving values to database and stuffs.
On the OK button click of the popup page, I should be able to save the values to the DB as well as populate the usercontrol(which acts as a dropdown) with the value which I have saved to the DB.
Here the problem arises, when trying to bind the checkboxlist(present in the usercontrol) to the values from the DB, I get the error that the checkboxlist object is null and has not been created.
I feel that on the OK button click, the usercontrol has to refresh and hence the checkboxlist will be active.
PFB the relevant codes:
Usercontrol.ascx:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SingleSelectCustomDropDown.ascx.cs" Inherits="MS.IT.Informa.UI.UserControls.SingleSelectCustomDropDown" %>
<asp:Panel ID="panel" runat="server">
<div id="FirstDiv">
<table>
<tr>
<td align="right">
<asp:TextBox ID="txtSelect" runat="server" ReadOnly="true"></asp:TextBox>
</td>
<td>
<asp:Image ID="imgShow" ImageUrl="../Images/DDGlyph.png" onmouseover="this.src='../Images/DDGlyphHOVER.png'" onmouseout="this.src='../Images/DDGlyph.png'" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="SecondDiv" style="display:none;">
<asp:CheckBoxList ID="chkBoxList" runat="server">
<asp:ListItem Value="0" Text="Standard" Selected="True"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div id="ThirdDiv" style="display:none;">
<asp:ImageButton ID="btnNew" runat="server" Height="20px" ImageUrl="~/Images/new.png" Width="20px" OnClientClick="ShowPopup();" />
<asp:ImageButton ID="btnEdit" runat="server" Height="20px" ImageUrl="~/Images/edit.png" Width="20px" />
<asp:ImageButton ID="btnDefault" runat="server" Height="20px" ImageUrl="~/Images/default.png" Width="20px" />
<asp:ImageButton ID="btnDelete" runat="server" Height="20px" ImageUrl="~/Images/delete.png" Width="20px" />
</div>
</td>
</tr>
</table>
</div>
</asp:Panel>
<script type="text/javascript">
//Displays the divs containing checkboxlist and images
function ShowList() {
document.getElementById("SecondDiv").style.display = "block";
document.getElementById("ThirdDiv").style.display = "block";
}
//Hides the divs containing checkboxlist and images
function HideList() {
document.getElementById("SecondDiv").style.display = "none";
document.getElementById("ThirdDiv").style.display = "none";
}
//Displays the selected item from the checkboxlist into the textbox placed in the Custom Control
function DisplaySelectedItem(sender, txtBoxID) {
var x = document.getElementById(sender.id);
var chkBoxPrefix = sender.id + "_";
var selectedText;
for (i = 0; i < x.rows.length; i++) {
if(document.getElementById(chkBoxPrefix+i).checked)
{
selectedText = document.getElementById(chkBoxPrefix+i).parentNode.innerText;
}
}
document.getElementById(txtBoxID.id).value = selectedText;
}
//Ensures that only one item is selected from the checkboxlist
function SelectOnlyOneCheckBox(e) {
if (!e) e = window.event;
var sender = e.target || e.srcElement;
if (sender.nodeName != 'INPUT') {
return;
}
var checker = sender;
var chkBox = document.getElementById('<%= chkBoxList.ClientID %>');
var chks = chkBox.getElementsByTagName('INPUT');
for (i = 0; i < chks.length; i++) {
if (chks[i] != checker)
chks[i].checked = false;
}
}
function ShowPopup() {
window.open("ViewColumnOptions.aspx", "ViewColumnOptions", "height=300,width=600,left=300,top=150");
}
</script>
The codebehind for the usercontrol as below:
public partial class SingleSelectCustomDropDown : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
chkBoxList.Attributes.Add("onclick", "SelectOnlyOneCheckBox(event);DisplaySelectedItem(this," + txtSelect.ClientID + ");HideList();");
txtSelect.Attributes.Add("onclick", "ShowList();");
imgShow.Attributes.Add("onclick", "ShowList();");
}
}
public void PopulateOtherViews()
{
SaveReportViewFilter<ReportFilterBase> newObj = new SaveReportViewFilter<ReportFilterBase>();
ViewColumnOptions vwobj = new ViewColumnOptions();
newObj.UserName = vwobj.Page.User.Identity.Name;
SaveReportView<ReportFilterBase> obj2 = new SaveReportView<ReportFilterBase>();
DataTable dt = obj2.GetSaveReportViewFromDataBase(newObj);
chkBoxList.DataSource = dt;//chkBoxList becomes null here..we have ample data in the datatable though
chkBoxList.DataTextField = dt.Columns[0].ToString();
chkBoxList.DataValueField = dt.Columns[0].ToString();
chkBoxList.DataBind();
}
}
The function PopulateOtherViews is called on the button click of the aspx page.
Below is the code:
protected void btnOK_Click(object sender, EventArgs e)
{
if (chkSaveView.Checked)
{
if (!string.IsNullOrEmpty(txtViewName.Text))
{
//some code here to save the view name from txtViewName to the DB
SingleSelectCustomDropDown obj22 = new SingleSelectCustomDropDown();
obj22.PopulateOtherViews();
Page.ClientScript.RegisterStartupScript(this.GetType(),"close","CloseWindow();",true);
}
else
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "alertEnterViewName", "alertMessage('Please enter the view name');", true);
}
}
}
Any help, suggestions, pointers will be greatly appreciated.
Regards
Anurag

In btnOK_Click you are creating a new instance of the user control and not attaching it to the page. My suggestion is:
1.Register the user control and add it to the page.
<%# Register Src="~/UserControl/SingleSelectCustomDropDown.ascx" TagPrefix="uc1" TagName="SingleSelectCustomDropDown" %>
and ...
<uc1:SingleSelectCustomDropDown runat="server" id="obj22" />
2.Now modify in code behind:
protected void btnOK_Click(object sender, EventArgs e)
{
if (chkSaveView.Checked)
{
if (!string.IsNullOrEmpty(txtViewName.Text))
{
//some code here to save the view name from txtViewName to the DB
//Do not create the control again
//SingleSelectCustomDropDown obj22 = new SingleSelectCustomDropDown();
obj22.PopulateOtherViews();
Page.ClientScript.RegisterStartupScript(this.GetType(), "close", "CloseWindow();", true);
}
else
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "alertEnterViewName", "alertMessage('Please enter the view name');", true);
}
}
}

accessing objects in listview after buttonclick in listviewitem

I'm trying to setup a usercontrol.
I've setup a usercontrol with a table incl table header. For each row a second usercontrol is issued displaying 1 row of the table. The line-usercontrol is embedded in a listview.
One cell of the listview contains a textbox, another cell contains a Button. The buttons for each row are using the same buttonclick event using a commandargument for finding the pressed button.
Is there somekind of way to get the value entered in the textbox of that specific line?
code header control:
<asp:Panel runat="server" ID="pnlUcHeader">
<table>
<thead>
<tr>
<th>...</th>
...
<th>Textbox Column</th>
<th>Button Column</th>
</tr>
</thead>
<asp:ListView runat="server" ID="lvUcItemsItem" OnItemDataBound="lvUcItems_ItemDataBound">
<ItemTemplate>
<uc1:Items runat="server" ID="ucItems" CssClass="normal" />
</ItemTemplate>
</asp:ListView>
</table>
code Item User control
<tr runat="server" id="serverRow">
<td>
<asp:Literal runat="server" ID="..."></asp:Literal></td>
<td>
<asp:TextBox runat="server" ID="tbItem"></asp:TextBox>
</td>
<td>
<asp:Button runat="server" ID="btnItem" Text="..." OnCommand="btnItem_Click"/>
</td>
code behind Item User control
protected void btnItem_Click(object sender, CommandEventArgs e)
{
var lineID = e.CommandArgument;
//TextBox tb = FindControl("tbAfhaalDatum)
???????
}
Is this possible in code behind or is there an option to use Javascript/Jquery to postback the value?
Kind regards

You have to access your control's NamingContainer to search for your text box:
protected void btnItem_Click(object sender, CommandEventArgs e)
{
var control = (Control)sender;
var container = control.NamingContainer;
var textBox = container.FindControl("tbItem") as TextBox;
if (textBox != null)
{
var lineID = e.CommandArgument;
var text = textBox.Text;
}
}

Dynamic data entry form

I have been searching around and I am lost on how to do what I am attempting to do.
I am trying to create a form where the first column is a list of names, and the next column is all dropdown lists. The idea is that for each name the user will pic a value. Each name may require two, or three or more values. I want to create a dynamic form where a user can click add in the row and another dropdown list appears.
Ex.
"Name" | Add Button | DropDown
then when I click add...
"Name" | Add Button | DropDown | DropDown
and have it keep going.
I am able to create the form and I have it working creating the dropdown lists. The problem is that I am adding the controls on the ItemCommand of a repeater, so they must be recreated every time. Because of this I cannot find a way to keep the values selected in each dropdown, when I have to recreate them.
Typically no more than two dropdowns are required but there are a few cases where three is needed, and it could arise for more. I would like to keep this dynamic as possible.
I know that if I added the dropdown's in the page Init they would be persisted on the postback, but at least in my design the user has to click add to get another drop down.
Is there a way to capture the data from these dropdowns then reload them every time? Or a better way to achieve this functionality?
Thank You for your help.
Here is some of the asp and code behind that I am using. This is functioning as I wish, but I don't know how to keep the data on a postback, as all of the dropdown lists I add are lost.
ASP:
<table>
<asp:Repeater ID="repChemicals" runat="server" OnItemCommand="repChemicals_OnItemCommand">
<ItemTemplate>
<tr>
<td>
<asp:HiddenField ID="hfNumber" runat="server" />
<%# Eval("ChemicalName") %>
</td>
<td>
<asp:Button runat="server" ID="btnAdd" Text="Add" CommandArgument="ADD" />
</td>
<td>
<div id="divContainer" runat="server">
<asp:DropDownList runat="server" Width="60px" ID="ddlTest"></asp:DropDownList>
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
List<Chem> Chemicals = new List<Chem>();
Random rnd = new Random();
for (int z = 0; z <= 10; z++)
{
List<string> t = new List<string>();
Chem a = new Chem()
{
ChemicalName = "Chemical" + z.ToString()
};
Chemicals.Add(a);
}
repChemicals.DataSource = Chemicals;
repChemicals.DataBind();
}
}
public void repChemicals_OnItemCommand(object sender, RepeaterCommandEventArgs e)
{
int number = 0;
foreach (RepeaterItem i in repChemicals.Items)
{
HiddenField hf = (HiddenField)repChemicals.Items[i.ItemIndex].FindControl("hfNumber");
if (i.ItemIndex == e.Item.ItemIndex)
{
if (!string.IsNullOrWhiteSpace(hf.Value))
{
number = Convert.ToInt16(hf.Value) + 1;
}
else
{
number = 1;
}
hf.Value = number.ToString();
}
else
{
if (!string.IsNullOrWhiteSpace(hf.Value))
{
number = Convert.ToInt16(hf.Value);
}
else
{
number = 0;
}
}
for (int x = 0; x < number; x++)
{
DropDownList ddl = new DropDownList();
ddl.Style.Add("width", "60px");
ddl.ID = "ddl" + i.ToString() + x.ToString();
ddl.Style.Add("Margin-right", "3px");
ddl.Attributes.Add("runat", "server");
ddl.DataSource = DataSource();
ddl.DataBind();
Control c = repChemicals.Items[i.ItemIndex].FindControl("divContainer");
c.Controls.Add(ddl);
}
}
Some of the loops are for creating test data. Basically I am storing a number of dynamic controls on each row in a hiddenfield. Then on the item command I loop through all of the rows and recreate all of the previously existing ddl's, and add one to the row that teh command came from.

This isn't exactly answering your question, but it accomplishes your ultimate goal in a less complex way and one that takes advantage of built in ASP.NET controls so maintaining state between postbacks is taken care of for you.
It utilizes jQuery, jQuery UI and a DropDownChecklist plugin.
ASPX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/ui.dropdownchecklist.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<asp:Repeater ID="repChemicals" runat="server">
<ItemTemplate>
<tr>
<td>
<%# Container.DataItem %>
</td>
<td>
<div id="divContainer" runat="server">
<asp:ListBox ID="lstAttributes" SelectionMode="Multiple" runat="server"></asp:ListBox>
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
<asp:Button ID="btnPostback" Text="Postback" runat="server"/>
</div>
</form>
</body>
</html>
C#
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace PersonAttributes
{
public partial class People : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
repChemicals.ItemCreated += RepChemicalsOnItemCreated;
var chemicals = new[] {"Hydrogen", "Helium", "Lithium", "Beryllium", "Boron"};
if(!IsPostBack)
{
repChemicals.DataSource = chemicals;
repChemicals.DataBind();
}
var dropDownChecklist = "$(document).ready(function () { $('select').dropdownchecklist(); });";
ScriptManager.RegisterStartupScript(this,GetType(),"initDropDownChecklist",dropDownChecklist,true);
}
private void RepChemicalsOnItemCreated(object sender, RepeaterItemEventArgs repeaterItemEventArgs)
{
var lst = repeaterItemEventArgs.Item.FindControl("lstAttributes") as ListBox;
if (lst == null)
return;
lst.DataSource = new[] {"Option 1", "Option 2", "Option 3"};
}
}
}
See it in action at CodeRun.