Develop Reference

How to get panels/classes side by side in ASP.NET?

This is the problem I am having:
How my page looks on firefox
and How my page looks on chrome
What I want to do is get reserve form and data source forms side by side. I have already set a class using the fieldset method but can't figure out what to use to have it side by side.
Using this for data sources form
.tables
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
and using this for Reserve Form
.mreg
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
Just want two get the two forms side by side.
Edit -
Asp.net coding for Reserve Form:
<asp:Label ID="lblerrormsg" runat="server" Text="Error Message" Visible="False"></asp:Label>
<fieldset class="mreg">
<legend>Reserve </legend>
<asp:Label ID="Label2" runat="server" Text="Reserve ID" Font-Bold=true></asp:Label>
<br />
<asp:TextBox ID="txtRID" runat="server" Height="18px" Width="213px"></asp:TextBox>
<%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtLID" ErrorMessage="Loan ID Required"></asp:RequiredFieldValidator>--%>
<br />
<br />
<br />
</fieldset>
Coding for data source form:
fieldset class="tables">
<legend>Data Sources </legend>
<asp:Label ID="Label6" runat="server" Text="Reservation Table" Font-Bold=true></asp:Label>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AutoGenerateDeleteButton="True"
DataKeyNames="Reservation_ID" DataSourceID="SqlDataSource1" BorderStyle="Dotted">
</asp:SqlDataSource>
</fieldset>
</asp:Content>
Is there anything wrong with the code?

You should give float:left to float to the left of screen and get side by side. Also it is not a good practice to give width as px as screen sizes vary.
.tables
{
width:48%;
border-color:Black;
float:left;
display:block;
height:500px;
}
.mreg
{
width:48%;
border-color:Black;
float:left;
display:block
height:500px;
}

You have multiple css options that you could use. As one:
float:left;
...will allow the divs to effectively "float" to the left side of their container, which will solve your problem. However, floats are problematic for a number of reasons, and there are often better options. For example, you can consider taking advantage of the "display" css property, such as:
display: inline-block;
This would also display your divs in a horizontal fashion, and tends to behave more consistently and with fewer problems. There are more options for the "display" property, though, which is worth looking into -- a good overview of some of the options can be found here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

RadAjaxLoadingPanel does not works with DNN

I have a dnn site, which has a label and an imagebutton, clicking on which replaces the label with textbox and user can enter their text, once submitted the label will be updated with this text. Now clicking on the imagebutton causes the page to postback, i don't want a postback for this, hence i have placed telerik RadAjaxLoadingPanel control, so the cool loading div gets displayed while processing is going on, but for some reason it's not working, It always throws below error:
Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.
Below is the markup of my page: (I tried the wrapping the code with RadScriptBlock and RadCodeBlock, in both case it throws same error as above)
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<a class="subscribetoday" href="#">
<strong>Subscribe Today!</strong> <asp:Label ID="lblsubscribemsg" runat="server" Text="12 issues for $14.95"></asp:Label>
<asp:ImageButton ID="imgEditSubscribe" runat="server"
OnClick="imgEditSubscribe_Click" ToolTip='Edit' ImageUrl="~/images/edit.gif" AlternateText='Edit' Visible="false" />
<div id="editsubscribe" runat="server" visible="false">
<asp:TextBox ID="txtSubscribe" runat="server"></asp:TextBox> <asp:ImageButton ID="imgSave" runat="server"
OnClick="imgSave_Click" OnClientClick="return validateSubscribeNote();" ToolTip='Save' ImageUrl="~/images/save.gif" AlternateText='Save' /> <asp:ImageButton ID="imgCancel" runat="server"
OnClick="imgCancel_Click" ToolTip='Cancel' ImageUrl="~/images/cancel.gif" AlternateText='Cancel' />
</div>
<img src="img/prosound-subscribe.png" alt="Subscribe Today!">
</a>
</telerik:RadScriptBlock>
</telerik:RadAjaxPanel>
Can anyone tell me where i am going wrong with this.

The problem is with other server code blocks on the page (<%=%> for example, generally - <% ... %>), not with this concrete piece of code you are trying to AJAX-enable. You can read more here: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radcodeblock-and-radscriptblock
So, you should find the place where those code blocks are used and wrap THEM in a RadCodeBlock controls. It is often scripts that reference controls, e.g.:
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script>
function getReference() {
return $find("<%=someControl.ClientID%>");
}
</script>
</telerik:RadCodeBlock>
With DNN, however, I cannot say where these may originate.
Thus, your other option is to use an <asp:UpdatePanel> control to get AJAX requests instead of full postbacks. The native AJAX toolset also offers the <asp:UpdateProgress> control that you can use instead of RadAjaxPanel.

ASP.NET dual listboxes updated client-side with JQuery, and how to retrieve the results server-side

I've been trying to get an ASP.NET WebForms page up and running that has dual listboxes. This is a standard paradigm where there are two side-by-side listboxes, with available items on the left, selected items on the right, and buttons that move the items from one side to another.
I want all the work to be done on the clientside, via JQuery (or whatever). And I want to be able to retrieve the selected items upon postback.
I've run into all sorts of hurdles. Here's a few:
1) When the postback occurs, I receive this error:
Invalid postback or callback argument. Event validation is enabled using in configuration or <%# Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
Turing "EnableEventValidation" off is risky. But "ClientScriptManager.RegisterForEventValidation" is confusing.
2) Assuming I get to the point of actually getting the postback to occur, my listbox doesn't contain the selected items.
A common recommended solution for this is to copy the selected values into a hidden field before the postback. Seriously? There's got to be a better way.
3) And of course, all the details for how the client-side scripting should work is confusing also, although not nearly as bad as the first two items.
So what's the solution? I've posted the answer below.

According to https://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/, it's not only OK to ask and answer your own question, it's encouraged. So that's what I'm doing.
Here's my working solution, and after this I will go into details. Please note that I'm by no means an expert in web development or Javascript -- far from it. So take all of this with a grain of salt, and always remember that I'm not responsible if your code somehow manages to execute a HCF code.
<script>
function addAllItems() {
$("#<%= lbAvail.ClientID %> option").appendTo("#<%= lbSelected.ClientID %>");
enableControls();
}
function addSelectedItems() {
$("#<%= lbAvail.ClientID %> option:selected").appendTo("#<%= lbSelected.ClientID %>");
enableControls();
}
function removeAllItems() {
$("#<%= lbSelected.ClientID %> option").appendTo("#<%= lbAvail.ClientID %>");
enableControls();
}
function removeSelectedItems() {
$("#<%= lbSelected.ClientID %> option:selected").appendTo("#<%= lbAvail.ClientID %>");
enableControls();
}
function enableButtons(listBoxControlId, buttonAllControlId, buttonSelectedContolId) {
var count = $("#" + listBoxControlId + " option").length;
document.getElementById(buttonAllControlId).disabled = count <= 0;
count = $("#" + listBoxControlId + " option:selected").length;
document.getElementById(buttonSelectedContolId).disabled = count <= 0;
}
function enableControls() {
enableButtons("<%= lbAvail.ClientID %>", "<%= btnAddAll.ClientID %>", "<%= btnAddSelected.ClientID %>");
enableButtons("<%= lbSelected.ClientID %>", "<%= btnRemoveAll.ClientID %>", "<%= btnRemoveSelected.ClientID %>");
}
function selectAll() {
$("#<%= lbSelected.ClientID %> option").prop("selected", true);
}
</script>
<div style="margin-top: 20px;">
<table>
<tr>
<td>
<asp:ListBox ID="lbAvail" runat="server" style="min-width: 150px" Height="150" SelectionMode="Multiple"
onchange="enableControls();" ondblclick="addSelectedItems();"/>
</td>
<td style="padding-left: 10px; padding-right: 10px;">
<table>
<tr>
<td>
<asp:Button Width="35" ID="btnAddAll" Text="»" OnClientClick="addAllItems(); return false;" UseSubmitBehavior="False" runat="server"/>
</td>
</tr>
<tr>
<td style="padding-top: 5px">
<asp:Button Width="35" ID="btnAddSelected" Text=">" OnClientClick="addSelectedItems(); return false;" UseSubmitBehavior="False" runat="server"/>
</td>
</tr>
<tr>
<td style="padding-top: 5px">
<asp:Button Width="35" ID="btnRemoveSelected" Text="<" OnClientClick="removeSelectedItems(); return false;" UseSubmitBehavior="False" runat="server"/>
</td>
</tr>
<tr>
<td style="padding-top: 5px">
<asp:Button Width="35" ID="btnRemoveAll" Text="«" OnClientClick="removeAllItems(); return false;" UseSubmitBehavior="False" runat="server"/>
</td>
</tr>
</table>
</td>
<td>
<asp:ListBox ID="lbSelected" runat="server" style="min-width: 150px" Height="150" SelectionMode="Multiple"
onchange="enableControls();" ondblclick="removeSelectedItems();"/>
</td>
</tr>
</table>
<div style="margin-top: 10px;">
<asp:Button ID="btnSubmit" CssClass="btn btn-primary" Text="Submit" runat="server" OnClientClick="selectAll();"/>
</div>
</div>
...
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
lbAvail.Items.Add(new ListItem("Monday", "Mon"));
lbAvail.Items.Add(new ListItem("Tuesday", "Tues"));
lbAvail.Items.Add(new ListItem("Wednesday", "Wed"));
lbAvail.Items.Add(new ListItem("Thursday", "Thur"));
lbAvail.Items.Add(new ListItem("Friday", "Fri"));
lbAvail.Items.Add(new ListItem("Saturday", "Sat"));
lbSelected.Items.Add(new ListItem("Sunday", "Sun"));
ScriptManager.RegisterStartupScript(this, GetType(), "CallEnableControls", "enableControls()", true);
}
else
{
string[] selectedValues = Request.Form.GetValues(lbSelected.UniqueID);
// ...
}
}
protected override void Render(HtmlTextWriter writer)
{
// Register all Available items as valid items in the Selected listbox.
foreach (ListItem item in lbAvail.Items)
{
ClientScript.RegisterForEventValidation(lbSelected.UniqueID, item.Value);
}
// When a user removes an item from the Selected listbox, we put it into the
// Available listbox, so we have to register it here, or we'll get an error.
foreach (ListItem item in lbSelected.Items)
{
ClientScript.RegisterForEventValidation(lbAvail.UniqueID, item.Value);
}
base.Render(writer);
}
Here's some explanations:
Remember the "Invalid postback or callback argument" error that I got after moving items from one listbox to the other, then posting the page? This error is actually a clue to the fact that ASP.NET does indeed include the modified listbox contents in the postback data.
In order to access the modified listbox items, all we need is this line:
string[] selectedValues = Request.Form.GetValues(lbSelected.UniqueID);
This gives us an array of the values in the Selected listbox. We don’t need to use a hidden field or textbox or whatever. Since the data is being sent back to us, we might as well use it. Note that these are the values, not the display strings.
One important note: Only the selected items in a listbox are sent back. So up in the markup code, you'll see that when the Submit button is clicked, I call some javascript code that selects all the items in the Selected listbox (I don’t care what's in the Available listbox).
So how do we prevent the "Invalid postback or callback argument" error, so we can actually use this data? We have to tell ASP.NET what values are valid for each listbox. We do this using "ClientScript.RegisterForEventValidation", in the "Render()" method.
ASP.NET already knows that the values we originally placed in each listbox are valid values to return. So all we have to do is register the other values that might be returned. That's what I'm doing in the "Register" method above.
As for the Javascript code, it should be fairly self-explanatory. Just remember it's actually calling some JQuery functions, so you obviously have to include Jquery.
I hope this helps. It took me a while to figure it all out, and like I said, I couldn't find one place with all the answers. Of course, as soon as I post this, 15 people will point out where I could have found this information easily, but that's life.

How can I scroll down to a multiline TextBox's bottom line, Javascript's scrollIntoView is not working for this

I am trying to create a basic video and text chat web site.In the room page I have the video as flash and a textbox(multiline) which shows all the messages sent to the room and one textbox for users to type and send by clicking the button beside it
<tr>
<td>
<asp:UpdatePanel ID="UpdtPnlMesajlar" runat="server" EnableViewState="true">
<ContentTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="TxtBxOdaMesajlari"
runat="server" ReadOnly="true"
TextMode="MultiLine"
Width="475" Height="100" >
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TxtBxMesaj" runat="server"
Width="412"></asp:TextBox>
<asp:Button ID="BttnGonder" runat="server"
Text="Gönder" Width="55"
OnClick="BttnGonder_click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
Above is my code, all those controls are in an UpdatePanel so when user clicks BttnGonder that no flickers happens.
When user presses the button what he typed is concataned to TxtBxOdaMesajlari in the below method called BttnGonder_click.
protected void BttnGonder_click(object sender, EventArgs e)
{
string uyeId = Session["UyeId"].ToString();
string mesaj = uyeId + " : " + TxtBxMesaj.Text;
TxtBxOdaMesajlari.Text = TxtBxOdaMesajlari.Text + Environment.NewLine + mesaj;
ScriptManager.RegisterStartupScript(this, this.GetType(), "txtbxmesajlarslide", "buttonClicked();", true);
}
Well after a number of messages scrollbars appear TxtBxOdaMesajlari can be seen , however the new messages cannot be seen because TxtBxOdaMesajlari does not slide/scroll down automatically.I searched about this and found this example Multi User Chat Room Using ASP.NET 2.0 and AJAX it uses Javascript's scrollIntoView() so I decided to use it but the page gets flickered and scrolling does not work at all.Maybe I am using the wrong control or the wrong way to do is.
I am using ASP.NET 4.0 if that matters a lot.
On aspx file
<script language="javascript" type="text/javascript">
function buttonClicked() {
$get("TxtBxOdaMesajlari").scrollIntoView("true");
}
</script>
I am using ScriptManager.RegisterStartupScript because the controls are in an UpdatePanel as it was suggested and worked fine at Accepted answer by user:3742 of JavaScript function is not working.

scrollIntoView is used to scroll the textbox itself into view, not its contents.
In order to scroll to the end of the textbox, you can use:
function buttonClicked() {
var textBox = $get("TxtBxOdaMesajlari");
textBox.scrollTop = textBox.scrollHeight;
}

Telerik RadAjaxManager loads controls slow the first time

So I have a RadPanelBar, and within that a RadTreeView. On a node click event I want so update some control.. for now I am just trying to update a textbox. It works fine except that the first time I click on a child node it takes a very long time to update the control.. Just a simple text change. I set a break point in my function and I noticed that it is taking long to fire the OnNodeClick event.. If I click a parent node in the tree view it loads fine on the first click. Also, after the first time I've clicked it.. it loads quickly.. If I refresh the page, it is slow on the first click again.. Is there something I am missing.. Is the structure of my HTML inappropriate for these AJAX calls? I feel like this is a really simple example that should work..
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="IncidentReportPanel">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="IRViewPanel" LoadingPanelID="LoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="width: 320px;
padding-top: 125px;" Skin="Vista">
</telerik:RadAjaxLoadingPanel>
<table width="100%">
<tr style="height: 25px">
<td>
</td>
<td>
</td>
</tr>
<tr style="height: 100%">
<td style="width: 250px">
<telerik:RadPanelBar ID="IncidentReportPanel" runat="server" Height="450px" CssClass="IRPanel">
<Items>
<telerik:RadPanelItem runat="server" Text="Incident Reports" ImageUrl="./Images/folder.gif"
Value="IncidentReports">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadTreeView ID="IncidentReportsTreeView" runat="server" OnNodeExpand="LoadTreeNodes"
OnNodeClick="PopulateIRData">
<Nodes>
<telerik:RadTreeNode Text="Pending" ExpandMode="ServerSideCallBack" ImageUrl="./Images/completed.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Completed" ExpandMode="ServerSideCallBack" ImageUrl="./Images/completed.gif">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="Calendar" ImageUrl="./Images/calendar.gif"
Value="Calendar">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadCalendar runat="server" ID="IRCalendar" Width="100%" />
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</td>
<td>
<asp:Panel ID="IRViewPanel" runat="server">
<telerik:RadTextBox ID="RadText" runat="server">
</telerik:RadTextBox>
</asp:Panel>
</td>
</tr>
</table>
protected void PopulateIRData(object sender, RadTreeNodeEventArgs e)
{
RadText.Text = "Hello, World!";
}
EDIT: I updated my code according to this article, http://www.telerik.com/help/aspnet-ajax/ajax-client-side-performance.html , and the problem persisted... again it only happens the first time..
EDIT: Just to clarify, by updating according to that article, I mean that I removed all the tables and relative widths and replaced them with css positioning and fixed widths.. the problem only happens the first time.. and it only happens sometimes.. quite a few times i thought i solved the problem as it would start responding quickly.. but then after I change my .aspx and change it back (even to the exact same thing when it was working quickly).. I get the same problem..
EDIT: So, I removed the AJAX component.. and setup the control so that it does a PostBack.. and it still takes long to hit my break point.. so it seems that its not an AJAX issue... but for some reason my events are taking long to fire..
EDIT:
So I followed the advice on this post and I used the webservices to do my binding and handle everything from the client side code.. All seemed to be ok until I decided that I wanted to return nodes from my webservice that could also be expanded.. So in my webservice I set the ExpandMode of my RadTreeNodeData object to Webservice.. and it renders the data correctly when I expand the child nodes.. However now I see the same problem from before where some calls take 20-30 seconds.. It takes 20-30 seconds to even hit the break point in my webservice.. Should I use the OnClientNodeExpand event instead? I don't understand why this is so slow!! Any help is greatly appreciated!

I recommend using OnClientNodeClicked and then you can update the controls client side. If you need more data from the server you can call a web service from the client code. Otherwise, to speed this up I would probably have to see your whole page and look at what requests are being sent back and forth. Perhaps you have a lot of viewstate that is getting serialized or something.

IMO, the fastest solution is to use a web service for binding. The standard AJAX functionality will still send ViewState and other flotsome across the wire that isn't necessary. You can find more here TreeView / Load on Demand Modes . So, your tree view would look something like the following where you would create an ASMX or WCF service that retrieves the nodes (in this case the LoadNodes method on the service at Default.asmx).
<telerik:RadTreeView ID="IncidentReportsTreeView" runat="server" >
<WebServiceSettings Path="Default.asmx" Method="LoadNodes" />
</telerik>

Have you tried putting the content in an UpdatePanel to see if the EnablePartialRendering makes any difference? Not sure if the RadAjaxLoadingPanel makes a difference
How many elements are in the tree?