I'm in dire need of assistance.
I need to add a custom button to an HtmlEditorExtender control, but I'm lacking the know-how to actually do that.
I've searched throughout this forum but no information was relevant or whatsoever.
Should someone be so kind to help, I need an example to help me sort this issue out.
Thanks in advance.
One possibility is to add it to the DIV containing the buttons using javascript. I do it using jQuery.
If you inspect the DIV in Firefox, you'll notice that it has a class named 'ajax__html_editor_extender_buttoncontainer'. Knowing this class allows you to select the container and add your own custom button to it.
To do so, add the following jQuery script in the HTML below your HtmlEditorExtender:
<script language="javascript" type="text/javascript">
// retrieve button container div using its class
$btnContainer = $(".ajax__html_editor_extender_buttoncontainer");
if ($btnContainer.length == 1) {
// append your custom button to the collection of elements within the button container div
$btnContainer.append("<input id=\"HtmlEditorExtender_YourButtonName\" class=\"ajax__html_editor_extender_YourButtonName\" type=\"button\" name=\"YourButtonName\" title=\"YourButtonName\" style=\"width: 101px; height: 21px;\" unselectable=\"on\"></input>");
}
</script>
To style the button, create images for it and add the following to your style sheet:
/* custom button */
.ajax__html_editor_extender_YourButtonName {
background: url('/images/YourButtonName_off.png') no-repeat scroll;
cursor: pointer;
display: block;
float: right; /* default is left */
border: medium none;
}
.ajax__html_editor_extender_YourButtonName:hover {
background: url('/images/YourButtonName_on.png') no-repeat scroll;
}
The appearance of your button is of course up to you, but the result may look something like this:
Finally, to add functionality, add a click event to elements that have the class you specified. You can do this in your external .js file.
If you want to access the html of the textbox, inside that click you will want to retrieve the html of the first of two divs that have the attribute contenteditable='true'. This is the design view of the HtmlEditorExtender.
Add the following to your .js file:
// click event for the custom button
$("body").on("click", ".ajax__html_editor_extender_YourButtonName", function (e) {
var $editorDiv = $("div[contenteditable='true']").first();
alert($editorDiv.html());
})
There's probably a more efficient way to get the design view but it'll work.
Related
I want to show dropdownlist always to down. (Is it posible?)
If bottom space is less then the height of dropdown list it's show list to up.
I want to show list always to down.
Thanks in advance
This can be achieved by adding the following attribute to your CSS class of your dropdown list:
.drop-down {
top:100%;
}
The same can be used to force the list to go upwards: bottom: 100%;
Here is a jsfiddle demo.
EDIT:
The standard HTML form Select Option (<select><option> <option></select>) can not be manipulated to expand into a certain direction. You'll have to write your own custom dropdown menu with JavaScript to implement this functionality.
After a quick browse I've noticed that others have struggled with the problem you're having. And apparently the following CSS code seems to fix it in some cases.
select { vertical-align: top; }
What you can do is set the attr size using jQuery like so
jsFiddle : https://jsfiddle.net/ou5n9u3y/
jQuery
$(function () {
var dropdownOptions = $('.dropdown-selector').find('option').length;
$('.dropdown-selector').attr('size', dropdownOptions);
});
Maybe there is a CSS style for this, but, I want my TextBox to look like a label. When it is focused, I want it to look like whatever CSS style is applied. I am using bootstrap so that would be the style.
Is there some way to do this?
I have a grid view that I want to allow the user to rename without using the Edit Mode.
Thanks
(EDIT)
I mean an editable label:
see http://dotnetspeaks.net/post/exm/EditableLabel.aspx
Here's a wild guess (since the question itself is a bit vague):
input {
border: none;
padding: 2px;
}
input:focus {
border: 1px solid black;
}
And, voila! (and a version that more traditional)
You can use textbox by making it appear label and making it textbox on click or on focus. (just an approach, question is bit confusing.)
<script type="text/javascript">
function TextBox2Label()
{
var control=document.getElementById("<%=TextBox1.ClientID %>");
control.style.borderStyle="none";
control.style.backgroundColor="Transparent";
control.style.fontStyle.fontColor="Black";
control.readOnly=true;
}
</script>
I'm creating DIV controls from code behind using this code -
System.Web.UI.HtmlControls.HtmlGenericControl dynDiv =
new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
dynDiv.ID = "dynDivCode";
dynDiv.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Gray");
dynDiv.InnerHtml = "I was created using Code Behind";
this.Controls.Add(dynDiv);
Once created, I want to access it's height and width. Is it possible to do that? Or has it not been rendered on the screen at this point to have its properties accessible?
EDIT: I want to access the newly created div's(DIV1) width, but I also want to change the width of another div(DIV2) control i created based on DIV1's width. So I want to read and modify the width of 2 different div tags
There isn't a "width" established yet; it will depend entirely on how it's rendered by the client. You can get/set a CSS "style" attribute, or get/set a CSS class that will correctly style the element when it's rendered.
you should be able to accomplish what you're trying to do with CSS, but if all else fails, you could use Javascript (jQuery) to get the rendered size and use it to resize the other DIV.
I would add a .css file and then use percentages to get a good UI
Let's say we know them by its id's div1 and div2
Your classes on the .css file should look like this
#div1 {
width: 55%;
height: 50%;
}
#div2 {
width: 45%;
height: 50%;
}
and then, wrap them inside another div, lets call it wrappedDiv and use pixels in order to set the size correctly, add this other class in the .css file.
#wrappedDiv {
width: 1024px;
height: 768px;
}
Remember to add the .css file on the <head> tag of the page
<link href="~/Content/myNewStyles.css" rel="stylesheet" type="text/css" />
i am trying to make the control not visable through the css but still the control is been shown.
i tried doing like this
html1.Visible = false;
but this creates an gap in the menu where is been used
HtmlAnchor html1 = (HtmlAnchor)holder.FindControl("lblA1");
html1.Attributes.Add("class", "display:none");
i want to hide the control and do not want to display the gap there
how can we achive this.
any help on this would be great
You just need to use style instead of class:
html1.Attributes.Add("style", "display:none");
You may also consider the option of making a CSS style like:
.hidden
{
display:none;
}
And then apply it via 'class':
html1.Attributes.Add("class", "hidden");
If you want to add more than one property in style element in that case use Style property instead of Attributes property like this example....
HtmlAnchor html1 = (HtmlAnchor)Page.FindControl("lblA1");
html1.Style.Add("display", "none");
You can attach this class to button using above methods
Very helpful when the button is taking the space , which it shouldn't be
<style>
.hideAspButton
{
position: absolute;
visibility: hidden;
}
</style>
Is it possible to have an ajax calendar inside a div and make it be always visible,like asp:calendar? and highlight today's date and add some task to the calendar for different dates?
Thanks in advance
You could try placing an asp:calendar on a simple page, and picking apart the html that it generates until you get the effect that you are after.
There are three options I see.
Put the ASP:Calendar inside an Update Panel to mimic the AJAX effect. CHEAPEST AND EASIEST!
Write some JQUERY code that will look for the div on client side that has the visibility hidden and make it visible. See the visibility:hidden and display:none...that's what need to be changed. Then you will also have to write something else that will keep on setting this to display for each click and other event so that it is always displayed. THIS IS NOT A GOOD SOLUTION!
div id="ctl00_MainContent_ReportControl_CalendarExtender2_container" class="ajax__calendar" style="position: absolute; left: 766px; top: 775px; z-index: 1000; visibility: hidden; display: none;"
Use a 3rd party control like the Telerik RadCalendar.