RadSpell not displaying properly in table - c#

I have table that holds a RadTextBox and a RadSpell control. Both are in their own td tags but when displayed in ie 10 and chrome the RadSpell button overlaps the RadTextBox.
The code for the page is:
<table>
<colgroup>
<col width="33%" />
<col width="36%" />
<col width="31%" />
</colgroup>
<tbody>
<tr>
<td>
<DescriptionLabel ID="dlNote" Text="Note:" AssociatedControlID="rtbNote" runat="server" />
</td>
<td>
<tel:RadTextBox ID="rtbNote" runat="server" TextMode="MultiLine" CssClass="SmallTextArea"
MaxLength="8000" />
</td>
<td>
<tel:RadSpell ID="spellNote" runat="server" ControlsToCheck="rtbNote" ButtonText="Spell Check"
ButtonType="PushButton" AllowAddCustom="false" />
</td>
</tr>
</tbody>
</table>
I am using Telerik controls version 2013.2.611.40
Edit: I am not sure how telerik decides this but I have found that the span for the RadTextBox is having it's width set to 160px when the CssClass SmallTextArea sets the width of the textbox to 300px like so:
.SmallTextArea
{
height:150px !important;
width:300px !important;
}

It works fine for me, so this is most likely due to some custom CSS you have on the page. Remove it and see if this is the case.

As pointed out here: http://www.telerik.com/community/forums/aspnet-ajax/input/radtextbox-resizing.aspx
This is the default behavior or the RadTextBox to fix this if you are using a CSS class is to set the WrapperCssClass property to the same class as the CssClass property.
It will end up looking like this:
<td>
<tel:RadTextBox ID="rtbNote" runat="server" TextMode="MultiLine" CssClass="SmallTextArea" WrapperCssClass="SmallTextArea"
MaxLength="8000" />
</td>

Related

html input of type File wrapped inside ASP: Panel is not disabled when panel is disabled

I have wrapped HTML Input control of type File inside ASP:Panel control(which is wrapped inside update panel).
When I disable ASP:Panel control, input control is still enable. Please helpme out
ASPX Code :
<asp:Panel ID="pnlBrowseCSV" runat="server" Enabled="true">
<table>
<tr>
<td align="left" valign="top" style="height: 30px; width: 160px;">
<strong>CSV File:</strong>
</td>
<td style="height: 30px">
<input type="file" id="csvFile" runat="server"
onkeydown="return false" style="width: 350px; background-color:white"/>
<strong>(*.csv)</strong>
</td>
<td style="height: 30px">
<ASP:Button ID="btnValidate" Text="Validate" runat="server"
OnClick="btnValidate_Click" />
</td>
</tr>
</table>
</asp:Panel>
Using visible attribute instead of Enabled.
<asp:Panel ID="pnlBrowseCSV" runat="server" Visible="False">
This issue is by design. What you can do rather is write one extra line of code to disable File upload where you disable the panel.
pnlBrowseCSV.Enabled = false;
csvFile.Enabled=false;

Creating a ListView Control in Default Edit Mode

I have a ListView Control in Asp.net 4.0 C#
I am attempting to make the default mode = Edit Mode with text boxes. So I took the Item Template (the default template) and replaced my databound labels with TextBoxes.
It works ok. Except the text Boxes only apply to every other row. So half the rows are text boxes on Page Load and half the Roes are still Labels. Here is my code:
<ItemTemplate>
<tr style="">
<td>
<asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
</td>
<td>
<asp:TextBox ID="DiscountPercentageTextBox" runat="server"
Text='<%# Bind("DiscountPercentage") %>' />
</td>
<td>
<asp:TextBox ID="CashTextBox" runat="server" Text='<%# Bind("Cash") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table>
<thead>
<tr>
<th>Title </th>
<th>DiscountPercentage</th>
<th>Cash</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</tbody>
</table>
</LayoutTemplate>
And here is the result:
You see? Every other row is a textbox. I need all rows to be textboxes. What am i doing wrong?
Huh, do you have an AlternatingItemTemplate defined? The ListVIew has no intelligence to make the original fields as labels....
Try making the ALternatingItemTemplate as the ItemTemplate too, if you don't have one defined.

How to be unchecked in checkbox in clone().insertAfter jQuery?

I want to copy the whole rows ,but checkbox unchecked when clicking add button.(in my code,
if I check FOC checkbox and when I click add,it copy rows with Foc check).
In asp.net,
<table id="tblitems" cellpadding="0" cellspacing="0" border="0" class="additemtb">
<tbody>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>Unit Price</th>
<th>Qty</th>
<th>UOM</th>
<th>Amount</th>
<th>Minimal Order Qty</th>
<th>FOC</th>
<th></th>
</tr>
<tr>
<td style="width:190px;"></td>
<td>
<asp:TextBox ID="TxtBox_ItemCode" CssClass="classItemCode readonly" Columns="8" runat="server" ></asp:TextBox>
</td>
<td style="white-space:nowrap">
<input type="text" id="txtunitprice" name="txtunitprice" class="classUnitPrice number readonly" style="width:50px;" />
<input type="hidden" id="hidunitprice" name="hidunitprice" class="classUnitPrice2" />
<asp:Label ID="lblCurrency" runat="server" CssClass="classCurrency" />
<input type="hidden" id="hidcurrencyid" name="hidcurrencyid" class="classCurrencyID" />
</td>
<td>
<input type="text" id="txtqty" name="txtqty" class="classQty number decimaltextbox" style="width:50px" onkeyup="calculateAmount(this);" onblur="minamt(this);calculateAmount(this);" />
</td>
<td>
<asp:TextBox ID="TxtBox_UOM" CssClass="classUOM readonly" Columns="5" runat="server" ></asp:TextBox>
</td>
<td style="white-space:nowrap">
<asp:TextBox ID="TxtBox_Amount" CssClass="classAmount number readonly" Columns="8" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" CssClass="classCurrency2" />
</td>
<td>
<input type="text" id="txtminorderqty" name="txtminorderqty" class="minorderqty number readonly" style="width:60px;background:none;border:none;font-weight:bold;color:Red;" />
</td>
<td style="width:1px">
<input type="checkbox" id="chkFOC" name="chkFOC" class="classFOC btnborder" onclick="calculateFOC(this);" />
<input type="hidden" name="hidFOC" id="hidFOC" class="classFOC2" value="false" />
</td>
<td style="width:90px;">
Copy
delete
add
</td>
</tr>
<tr>
<td colspan="4" class="darkgray">
<span class="classOverBudget chinese" >Purchase Order Amount is over limited budget.</span>
</td>
<td class="darkgray" style="text-align:right; font-weight:bold; white-space:nowrap">Total Amount</td>
<td class="darkgray" >
<asp:TextBox ID="txtTotalAmount" CssClass="classTotalAmount number readonly" Columns="8" runat="server" ></asp:TextBox>
<asp:Label ID="Label2" runat="server" CssClass="classCurrency3" />
</td>
<td colspan="3" class="darkgray"> </td>
</tr>
</tbody>
</table>
In Javascript,
function addRow(name, selected){
$(name).parent().parent().next('tr').find('.classFOC:checked').attr('checked', false);
$(name).parent().parent().clone().insertAfter($(name).parent().parent());
//adding remove function to next siblings
$(name).parent().parent().next('tr').find(".delete").attr('onclick', 'removeRow(this)');
selected = $(name).parent().parent().find(".mcdropdown input:hidden").val();
//list of textbox or inputs elements to be empties
$(name).parent().parent().next('tr').find("input").val('');
$(name).parent().parent().next('tr').find(".classCurrency").text('');
$(name).parent().parent().next('tr').find(".classCurrency2").text('');
$(".promotion-container").css("height", $("#left").innerHeight() - 42 + "px");
FormActionControl();
}
You seem to be saying that you can't uncheck the checkbox in a new row that is cloned from an existing row with a checked checkbox. I think that is probably because the line of your code that tries to do that is before the line that actually creates the new row. So simply switching the order of the first to lines in your function may fix it, however the code in the function is, well, pretty horrible and can be cleaned up a lot.
As far as I can tell your addRow() function is attempting to find the parent TR element that the clicked Add button belongs to, clone that row, and then uncheck any checkboxes in the new row and also set other fields in the new row to blank.
Something like the following might work - this is basically a cleaned up version of your code, except that:
the new row with the checkbox is created before trying to uncheck anything
everywhere you had $(name).parent().parent() I'm using a new variable $currentTR - not only is this more efficient it is 500% more readable
everywhere you had $(name).parent().parent().next('tr') you seem to be trying to access the newly added row, so why not keep a reference to that new row as soon as you create it? I've done so with the new variable $newTR.
So:
function addRow(name, selected){
var $currentTR = $(name).parent().parent(),
$newTR = $currentTR.clone();
$newTR.insertAfter($currentTR);
$newTR.find('.classFOC:checked').attr('checked', false);
//adding remove function to next siblings
$newTR.find(".delete").attr('onclick', 'removeRow(this)');
selected = $currentTR.find(".mcdropdown input:hidden").val();
//list of textbox or inputs elements to be emptied
$newTR.find("input").val('');
$newTR.find(".classCurrency, .classCurrency2").text('');
$(".promotion-container").css("height", $("#left").innerHeight() - 42 + "px");
FormActionControl();
}
By the way, using jQuery to set an inline onclick handler is not a good plan, but I think fixing that is outside the scope of what you seem to be asking.
Note also that your function has an argument called selected that is assigned a value in the function, but although that won't cause an error it also won't do anything useful because firstly JavaScript passes by value so that will not cause anything outside the function to change, and secondly you don't even pass that argument in when you call the function.

Two forms in ASP.NET

You can only have one form runat="server" per page apparently.
My page has one form, where it loads in a list of names. This form allows you to add a new name to the list as well.
I've attatched an onclick event to each name in the listview. When you click on it, I need it to load the data into the edit form (next to the add form) with JavaScript code; I can do this fine.
But how do I structure it on the page to have two forms?
An illustration:
<table>
<tr>
<td style="width:50%;" valign="top">
<form runat="server" action="productCats.aspx?action=new&mid=2">
<div class="subHead">Create New Category</div>
<table class="settingTable">
<tr>
<td colspan="2"><b>Category Name</b></td>
</tr>
<tr>
<td>
<asp:TextBox ID="catName" runat="server" CssClass="tbox widebox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server"
id="ValidatorName"
ControlToValidate="catName"
ErrorMessage="You need to enter a category name"
display="Dynamic" />
</td>
</tr>
<tr>
<td>This is the name of your category.</td>
</tr>
<tr>
<td colspan="2"><b>Parent Category</b></td>
</tr>
<tr>
<td>
<asp:ListBox SelectionMode="Single" Rows="8" id="parent" runat="server" CssClass="tbox widebox">
<asp:ListItem Selected="True" Text="Top Level" Value="0"></asp:ListItem>
</asp:ListBox>
<asp:RequiredFieldValidator runat="server"
id="RequiredFieldValidator1"
ControlToValidate="parent"
ErrorMessage="You need to select a parent"
display="Dynamic" />
</td>
</tr>
<tr>
<td>Choose a parent this category belongs to.</td>
</tr>
</table>
<asp:Button id="id" text="Create" runat="server" />
</form>
</td>
<td style="width:4%;">
</td>
<td valign="top">
<div class="subHead">Modify Category</div>
<form id="Form1" action="productCats.aspx?action=update&mid=2">
<table class="settingTable">
<tr>
<td colspan="2"><b>Category Name</b></td>
</tr>
<tr>
<td>
<asp:TextBox ID="newCatName" runat="server" Enabled="false" CssClass="tbox widebox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server"
id="RequiredFieldValidator2"
ControlToValidate="newCatName"
ErrorMessage="Enter a new category name"
display="Dynamic" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
ASP.NET Web Forms works by having just one <form> element on a page, and getting this posted back to the same page every time something changes (postbacks). Trying to use multiple forms, and specifying custom action attributes on the form element is going against what the framework is designed to work with, and that's never really a good idea.
I would just try to get rid of the second <form> element, and remove the action attribute from the first <form>. Also, ASP.NET will be much happier if everything is inside the form, i.e. your <table> tags at the top of the page.
I'm not sure what your page is doing, but if you've got a TextBox and you're using the contents of this to add items to a ListBox, a more Web Forms-like approach would be to use some control to do a postback when the TextBox has been filled in, and then re-bind the ListBox to some kind of data source. Maybe use an UpdatePanel if you want an Ajax postback.
If you're more comfortable with JavaScript and query string parameters, maybe ASP.NET MVC would be a better fit.
By what I understood from your explanation, you want a functionality on this page of yours where when you click on one of the listitem in the list, the elements in the form2 needs to displayed and to modify the details... What I think is ... use two Panels and onclick of the item in ListBox you can show the Edit Panel and on the change of details and some other event like button click .. you can show the ListBox Panel with the changed detail.
Yes as Graham has mentioned you can use Ajax update panel to accomplish this.

Javascript for a popup. Asp.net for Visual Studio 2005

What JavaScript has to be written for a popup when a link is clicked? Correct me if there is anything else to be done.
Link is written like this.
<div style="float:left; padding-left:9px;">
<asp:LinkButton ID="lnkActiveInactive" runat="server" OnClick="lnkActiveInactive_Click"
CssClass="linkclass" Font-Underline="True">Cancel My Account</asp:LinkButton>
</div>
And popup extender is like this.
<cc1:ConfirmButtonExtender DisplayModalPopupID="ModalPopupExtender2" ID="ConfirmButtonExtender2"
runat="server" TargetControlID="lnkActiveInactive">
</cc1:ConfirmButtonExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" OkControlID="btnYesCancel" CancelControlID="btnNoCancel"
BackgroundCssClass="modalBackground" PopupControlID="pnlCancelPopup" TargetControlID="lnkActiveInactive"
runat="server">
</cc1:ModalPopupExtender>
<asp:Panel CssClass="modalPopup" ID="pnlCancelPopup" runat="server">
<!-- Common Popup Control Begin -->
<table class="tblCommonPopup" width="690px" cellpadding="0" cellspacing="0">
<tr>
<td class="topLeft">
</td>
<td class="topMiddle">
</td>
<td class="topRight">
</td>
</tr>
<tr>
<td colspan="3" class="middle" align="center">
<!-- Content Area Begin -->
<table>
<tr>
<td>
</td>
<td colspan="2" style="padding-top: 10px;">
<table width="100%">
<tr>
<td align="center">
Feel free to change your package to Basic, there is no charge for this Package.<br /><br />If you still wish to cancel,
your account will become inactive within DealTown and any further billing will <br />discontinue.
We will keep you account in our system for some time if you wish to active it again.<br /><br />Are you sure you
wish to cancel your account?
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="4">
<input id="btnYesCancel" type="button" value="YES" class="popupButton" />
<input id="btnNoCancel" type="button" value="NO" class="popupButton" />
</td>
</tr>
</table>
<!-- Content Area Ends -->
</td>
</tr>
<tr>
<td class="bottomLeft">
</td>
<td class="bottomMiddle">
</td>
<td class="bottomRight">
</td>
</tr>
</table>
<!-- Common Popup Control End -->
</asp:Panel>
Im not sure if I understood your question clearly, but this is how to pop up in JS
<script type="text/javascript">
<!--
function Confirmation() {
var answer = confirm("Are you sure you want to Cancel your Account?")
if (answer){
alert("Goodbye!")
}
else{
alert("Thanks for not Cancelling")
}
}
//-->
</script>
<div style="float:left; padding-left:9px;">
<asp:LinkButton ID="lnkActiveInactive" onclick="Confirmation();">Cancel My Account</asp:LinkButton>
</div>
This code is used is you run on the client side. If you want it to run on server side you have to do it on the codebehind like such
if (!IsPostBack) {
this.lnkActiveInactive.Attributes.Add("onclick", "javascript:Confirmation()");
}
If you just want a confirmation dialog for the 'cancel my account' you can simply place some javascript in your aspx page.
Something like:
onclick="javascript:confirm()"
Hope this helps!
I think the other responders have missed that you are using the ASP.NET Ajax Toolkit ModalPopupExtender.
The answer to your question is, no, no Javascript is required. Setting the TargetControlID of the ModalPopupExtender to your LinkButton should be sufficient to get the pop-up to appear. If that's not happening, something else is wrong.
One thing I notice is that you have an OnClick handler on the LinkButton. This shouldn't be necessary if the only function of the link button is to pop up the dialog.

Categories

Resources