how to shift windows forms controls? - c#

How can i get same functionality in windows forms as in the next example. When i have two links one beneath, and when i click first link a panel is visibleunder it and next link is shifted. When i click again the panel is invisible and second link shifted back.
<script type="text/javascript">
function toggleDivState(divName)
{
var ctl = window.document.getElementById(divName);
if (ctl.style.display == "none")
ctl.style.display = "";
else
ctl.style.display = "none";
}
</script>
<a href="javascript:toggleDivState('poll<%# Eval("ID") %>');">
<div style="display: none;" id="poll<%# Eval("ID") %>">

Something like this?
on click:
control1.Visible = !control1.Visible;
control2.Visible = !control1.Visible;
??

You can use panels that have the 'Dock' property said to 'Top' - you can then adjust the height of said panel to suit.

Sound like you need a FlowLayoutPanel with FlowDirection = TopDown.
Put within this Panel your Link, Panel, Link2 and Panel2. Within the LinkClick event you set the Panel.Visible = !Panel.Visible.

Related

Asp .net Linkbutton child controls dissapears on postback

I have an asp .net hyperlink control declared like this:
<li runat="server" id="liveChatCtrl" Visible="false"><asp:LinkButton runat="server" ID="hlnkLiveChat" CausesValidation="false" OnClick="hlnkLiveChat_Click">Live Chat Support <i class="icon icon_next_03 fr"></i><i runat="server" id="iconChat" class="icon_chat_online"></i></asp:LinkButton></li>
My problem is that the contents of the linkbutton disappears on postback. Any ideas why this is happening?
On load I execute the following code on the linkbutton or it's children:
string absoluteURL = UtilManager.Settings.Item(Utils.BrandID, "URL:absoluteURL");
string chatLink = "StartChat.aspx";
if (HttpContext.Current.User.Identity.IsAuthenticated)
chatLink = "LiveChat.aspx";//~/
//else
// chatLink = "SalesChat.aspx";
string link = absoluteURL + chatLink;
hlnkLiveChat.Attributes["onclick"] = string.Format("javascript:window.open( '{0}', 'chat', 'status=no,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes,height=505,width=420,left=30,top=30');", link);//"openPopup('" + link + "','chat'); return false;";
liveChatCtrl.Visible = true;
A guess...
I believe you may have the code in your Page_Load (or Init) inside an if(!IsPostBack)
If this is the case, move it outside of this if statement as you need it to run as your default visible for your liveChatCtrl is false
Either that or re-code a little so that your default visible is true and you run a check on postback to hide it if needed.

How to make textbox visible when previous textbox contains text

I have a WebForm in which i need to place around 30 textboxes mainly to enter barcode scanned data. I am making only the first textbox visible and i want the next textbox to be visible only when the previous textbox is filled with some text. I tried using 'If' condition as well in the textbox on selected change but it doesn't work. Any solutions?
You should use java-script for this because if you will use server side function for this then It will go to server so many times by this your application performance also will decrease.
So create a java-script function that will accept one argument. This argument will take next text box id (text box u want to display).
call this javascript function like this:- onkeyup="calgrid(this,"TextBox2");"
pass nexttextbox id in place of TextBox2...
<script type="text/javascript" language="javascript">
function calgrid(firsttextbox,nexttextbox)
{
var id=firsttextbox.id;
var lastindex= id.lastIndexOf("_");
var strclnt=id.slice(0,lastindex+1);
var txtboxvalue=document.getElementById(firsttextbox).value;
if(txtboxvalue!="")
{
document.getElementById(strclnt+nexttextbox).style.visibility='visible';
}
else
{
document.getElementById(strclnt+nexttextbox).style.display = "none";
}
}
</script>
note:- If you will do visible=false from textbox property then we cannt do visible=true from javascript. So Set style for all textbox style="display:none"
You can resolve your problem by Jquery.
I have make a sample code where i have take four Textbox. Initially only first text box is visible in Web form, when user enter some values in first TextBox next Textbox is automatically display if Previous textbox have a value if not next textbox is not visible.
Sample code is given below :
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
$('input:text:not(:eq(0))').hide()
$('input').on("change paste keyup", function () {
if ($(this).val().length > 0) {
$(this).next().show();
}
else
{
$(this).next().hide();
}
});
I have made sample application for same ,please click on given link for Demo
See Demo application
It's at Client side code so its performance is so fast rather than Server Side.
Please vote me if you feel your problem is resolved by my idea.
I'd name these text boxes similarly like "textbox1", "textbox2", "textbox3" so you can easily find the index of current text box. Then you can use KeyDown event to control what will be shown and what not. This is not a working example but it should give you a good direction.
int currentIndex = 1;
private void TextBox1_KeyDown(object sender, KeyEventArgs e)
{
TextBox t = Controls["TextBox" + (currentIndex + 1).ToString()] as TextBox;
t.Visible = true;
currentIndex +=1;
}
Use can use Keydown event in your first textbox
try this code
initially set flag=1 as first textbox is going to be by default visible
private void visibleTextBox(Control c)
{
int flag = 1;
foreach (Control c1 in c.Controls)
{
if (c1.GetType() == typeof(TextBox))
{
if (flag == 1)
{
((TextBox)c1).Visible = true;
}
else
{
((TextBox)c1).Visible = false;
}
if (((TextBox)c1).Text != "")
{
flag = 1;
}
else
{
flag = 0;
}
}
}
}
Comparatively simple solution in JavaScript. The code should be somehow like this.
Define onchange event on text boxes like this:
<asp:TextBox ID="txt1" runat="server" onchange="show('txt1', 'txt2');"></asp:TextBox>
<asp:TextBox ID="txt2" runat="server" onchange="show('txt2', 'txt3');" Style="visibility: hidden;"></asp:TextBox>
Then use this JavaScript code to show the next TextBox conditionally. Put this code in the head tag of the page:
<script type="text/javascript">
function show(txtCurrent, txtNext) {
var valueCurrent = document.getElementById(txtCurrent).value;
//alert(valueCurrent);
if (valueCurrent.length > 0) {
document.getElementById(txtNext).style.visibility = 'visible';
}
else {
document.getElementById(txtNext).style.visibility = 'hidden';
}
}
</script>

asp.net select all/none checkboxes [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript or Jquery to check and uncheck all checkbox
I have 12 asp:checkboxes on a page and I would like to add one which selects/deselects all of them.
What's the best way to do that?
I've seen people use jquery but I'm not very familiar with JS.
IS there a generic jquery finction to use?
<head>...
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
...</head>
<body>...
<script type="text/javascript">
function Selectall() {
if ($('.JchkAll').is(':checked')) {
// .JchkGrid cssClass will be assigned to all other checkboxes in your control
$('.JchkGrid').attr('checked', 'true');
}
else {
$('.JchkGrid').removeAttr('checked', 'false');
}
}
</script>
<form>...
<asp:CheckBox runat="server" ID="cbSelectAll" Text="Select/Deselect All" CssClass="JchkAll" onchange="Selectall();"/>
<asp:CheckBox runat="server" ID="cbName" Text="Name" class="JchkGrid"/>
<asp:CheckBox runat="server" ID="cbModel" Text="Model" CssClass="JchkGrid"/>
...</form>
...</body>
Give your chckbox a css class and try this way
// .JchkAll is cssclass of your checkbox on which's click you need to check all Checkboxes
function Selectall() {
if ($('.JchkAll').is(':checked')) {
// .JchkGrid cssClass will be assigned to all other checkboxes in your control
$('.JchkGrid').attr('checked', 'true');
}
else {
$('.JchkGrid').removeAttr('checked', 'false');
}
}
Edit:
Also Don't forget to add this on checkbox's onchange attribute..
<asp:CheckBox runat="server" onchange="Selectall();" ID="cbSelectAll"
Text="Select/Deselect All" CssClass="JchkAll"/>
But this will give you a compiler warning...it would be better if you add it from code behind on Page_Load event like
cbSelectAll.Attributes.Add("onchange","Selectall");
First you find all the checkboxes, and then you change them. This you done on client via javascript. For example this is a function that if you call it is check all the chekboxes on a page.
function SwapCheck()
{
// find them
var allChecks = jQuery('input[type=checkbox]');
allChecks.each( function() {
jQuery(this).prop("checked", !this.checked);
// use this for jQuery ver 1.6 and before
// jQuery(this).attr("checked", !this.checked);
});
}
If you like to eliminate some checkboxs then warp them with a span, or div and use the
jQuery('#DivIDWithChecksToSelect input[type=checkbox]');
If you like to check them all you can use this code
jQuery(this).attr("checked", "checked");
Also you can use the jQuery(this).prop("checked", false); to uncheck them.
relative:
Setting "checked" for a checkbox with jQuery?
Check all CheckBoxes in GridView
About the .attr() and the .prop() read here : http://api.jquery.com/prop/
Give your checkboxes one CssClass name (chk_group in my example), and the give your check box that will change all of them another CssClass name (chk_select_all in my example)
then you can try this jQuery code
​$(document).ready(function(){
$(".chk_select_all input[type=checkbox]").click(function(){
$(".chk_group input[type=checkbox]").attr('checked', this.checked);
});
});​
Check here a working version: http://jsfiddle.net/a2XeK/
In ASP.NET WebForms, you'll have to use the selector .chk_select_all input[type=checkbox] because the rendering engine will create a with css style, and inside the span there will be the actual checkbox.
Multiple ways to do it. See which is best for you. Using JavaScript
function toggleCheckboxes(flag) {
var form = document.getElementById('groupImportForm');
var inputs = form.elements;
if(!inputs){
//console.log("no inputs found");
return;
}
if(!inputs.length){
//console.log("only one elements, forcing into an array");
inputs = new Array(inputs);
}
for (var i = 0; i < inputs.length; i++) {
//console.log("checking input");
if (inputs[i].type == "checkbox") {
inputs[i].checked = flag;
}
}
}
Hope this helps.
You can do it in the codebehind if you want. In the OnCheckedChanged event of the main checkbox, set all of the Checked variables of the checkboxes to true.

Move button into Div

I need to move this new button into this DIV that already exists. This seems to me like it should work but doesn't. What am I doing wrong?
Button button5 = new Button();
button5.Text = "Five";
button5.CssClass = "buttonCSS";
button5.Click += new EventHandler(button5_Click);
button5.ID = "button5";
this.Controls.Add(button5);
string myscript = #"
var navFooter = document.getElementById('NavFooter');
var button5 = document.getElementById('button5');
navFooter.Controls.Add(button5);
";
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", myscript, true);
I know the two objects are being found. Any ideas?
(Note: I cannot use jQuery.)
Thank you.
Controls.Add() is C#, not JavaScript. To append an element to another element with JavaScript, use appendChild():
navFooter.appendChild(button5);
Why are you doing this through javascript?
If you change the containing <div> to a <asp:Panel>, then you can add the newly created button straight into this panel. The <asp:Panel> is rendered simply as a <div> html element, and you can add the CssClass to this to keep the styles the same.
Gives you overall greater control on the server side and you don't need to worry about the javascript. Especially since you are doing server side work anyway.
Just add runat="server" to the div, and add it in the code behind:
<div id="dvButtonContainer" runat="server" ... >
Another option is to use a Panel, as it outputs a div anyway:
<asp:Panel ID="dvButtonContainer" runat="server" ... >
And in the code behind:
Button button = new Button();
dvButtonContainer.Controls.Add(button);
EDIT: Since DIV is not accessible, here is a workaround:
Button Button1 = new Button();
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", String.Format("document.getElementById(\"div1\").appendChild({0});", Button1.UniqueID), true);

Fetch JS return value in server side page_load event in asp.net

I have an aspx master/content page scenario. The parent page has an IFrame which points to a child.aspx. The child.aspx has a checkbox, On page_load of child.aspx, I want to show/hide the checkbox depending on the following logic:
- if the child.aspx is opened directly, then I have to show the checkbox.
- if the child.aspx is opened in the IFrame, then I have to hide the checkbox.
Basically, I want to check in child.aspx, if it contains a parent window then hide the checkbox control otherwise show it.
I will prefer the show/hide code in codebehind in Page_load event as I have to execute some more logic depending on whether the it is opened from parent window or not.
Till now I did the following:
In child.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
<script language="javascript" type="text/javascript">
function DoesParentExists()
{
var bool = (parent.location == window.location)? false : true;
var HClientID ='<%=hfDoesParentExist.ClientID%>';
document.getElementById(HClientID).Value = bool;
}
</script>
<div>
<h2>Content - In IFrame</h2>
<asp:HiddenField runat="server" id="hfDoesParentExist" />
<asp:CheckBox ID="chkValid" runat="server" />
<asp:ImageButton ID="ImageButton_FillW8Online" ImageUrl="~/images/expand.gif"
OnClick="btnVerify_Click" runat="server" style="height: 11px" />
</div>
</asp:Content>
in client.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DoesParentExists", "DoesParentExists()", true);
if (hfDoesParentExist.Value == "true")
{
chkValid.Visible = false;
}
}
Using RegisterClientScriptBlock, I get error in JS. That the object hfDoesParentExist doesn't exist 'coz the control is not yet created. Right? I tried using RegisterStartupScript but in codebehind I always get null in hidden variable. I don't want to use the on button click or something like it. I need it on page_load event only. How to resolve the issue?
This line:
document.getElementById(HClientID).Value = bool;
Should be: (lower case value)
document.getElementById(HClientID).value = bool;
Also you cannot check the value of a hidden field set by javascript register callback, in the current executing context on the server side.
I would move the logic to the client side to hide or show the checkbox. If the field must indeed be removed from the page you can do that as well with javascript.
function DoesParentExists()
{
var bool = (parent.location == window.location)? false : true;
var cehckboxId ='<%=chkValid.ClientID%>';
if(bool){
document.getElementById(cehckboxId).style.display = 'none';
}
else {
document.getElementById(cehckboxId).style.display = 'block';
}
}
You may want to wrap the checkbox with a div and hide the container also to include the label.
To do it server-side, I would rely on a querystring parameter. Have the parent page load the child page by appending ?inframe=1. Then check for that value in your Page_Load.

Categories