Having trouble obtaining Telerik HTML Editor's content using jQuery - c#

I have an editor that built as follows:
EditorBuilder builder = context.Html.Telerik().Editor()
.Name(ID)
.Encode(false)
.HtmlAttributes(new { style = string.Format("width:100%;height:{0}px", height) })
.Value(HttpUtility.HtmlEncode(value));
return builder.ToHtmlString();
Everything works as expected. What I want to do now, is get the contents of the editor to allow the user to "preview" it in another window. After some searching, I came across $find(<%=RadEditor.ClientID%>);, but I am not using this form of generating the editor (and it's in razor).
So, my question is, how do I get at the contents of the editor using jQuery? val() does not work.
Thanks in advance!

Telerik stores the content of the editor using the jQuery data()
method. To access the content of the editor use the following code:
var editor = $("#<your editor ID goes here>").data("tEditor");
alert(editor.value());
The ID passed to jQuery must match the ID you passed to the
Html.Telerik().Editor().Name() function.
The code above only works if you have setup the necessary scripts
for the telerik editor.
For more information please see the telerik client side api documentation.

Related

Kendo UI for MVC: Export to Pdf not working

I am using #(Html.Kendo().Grid in my .cshtml page in mvc application.
I want to export the contents of the grid in the form of a pdf.
I have tried following approaches:
1)
.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf
.AllPages()
.PaperSize("A4")
.Margin("2cm", "1cm", "1cm", "1cm")
.Landscape()
.FileName("Kendo UI Grid Export.pdf")
)
$("#exportToPdf").click(function(e) {
var grid = $("#CommentsGrid").data("kendoGrid");
grid.saveAsPDF();
});
In both the approaches I am facing the same problem i.e on clicking Export to pdf button I am able to see a stuck progress bar and my screen is freezed.
Please help me to get out of this situation.
Thanking you in advance.
Code sample is appreciated.
I found the problem.
The DejaVu fonts which are must for default Export To Pdf were missing in my case.
The expected default location of this font is supposed to be: Content/kendo/fonts/DejaVu
I just added DejaVu and the pdf is downloaded.

How can i change image path on click for asp.net dynamic content

I am using jquery for changing image path but its not working for asp.net dynamic content
The jquery function is
$('img.selection').click(function () {
this.src = 'images/selected_img.png';
});
This function is not post backing in to the C#, so am not getting changed image values.
Please help me...
try this :
$(this).attr("src", 'images/selected_img.png');
The problem might lie in that asp controls id's are changed when sent to the client.
If this is the case you can fix this in to ways
Set the controlidmode to static on your control in asp.
get the id of the control with jQuery with selectors: $('[id$=theidnameofthecontrol]').click(function () ....
Also you do not need postback. If you provide the new url with jQuery, it should load this without having to postback.

.NET button in div with style="display:none" not firing

I have a pretty simple web-form set up in .Net where I am leveraging jQuery for some of the functionality. I am using the DOMWindow portion for part of the presentation layer.
There is a login form in a div that is set to display:none. When a user clicks a button on the page, it displays the login form. However the .Net button for the login form will not fire it's event when display is set to none. If i take this out, it fires fine. I have also tried using the visibility attribute, but no luck.
the div code is:
<div id="Login" style="display:none;">
The launching code is:
click here to login.<br />
the jQuery code is:
function LaunchLoginWindow() {
$(document).append("#Login");
$.openDOMWindow({
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 7,
loaderWidth: 8,
windowSourceID: '#Login'
});
}
Any help or explanation that anyone can offer is appreciated.
I noticed i had some code in there defining a client-side function on the Login div. I removed this so as to eliminate it as a possible issue.
I can see in your code that you are appending the div #Login but not setting its style property back to normal like block so. Set it back to block and i am sure it will work
try adding somthing like:
$(document).append("#Login").show();
OK, after playing around with this using firebug, I found the issue: When the jQuery plug-in DOMWindow creates its display layer, it appends to the HTML node of the DOM, which places the control outside the asp.net form tag. Therefore the button and actions associated with it via the DOMWindow are not recognized by .Net. So i edited the DOMWindow source file to append to the DOM form node rather then the html node.
The drawback is that the source has now been customized and will have to be QA'd thoroughly, especially if any further changes are made. But I hope to manage this effectively via commenting in the file.
Hope this helps anyone else who hits this issue.
pbr

ASP.NET Which HTML editor can do everything I want?

I have tried to use the standard AJAX HTMLeditor from here (http://www.asp.net/ajaxlibrary/act.ashx) and I have try to work with the FCKEditor (from http://ckeditor.com/)
But both don't do everything. I call the AJAX standard control A and the FCKeditor F.
With the A editor it is impossible to get your HTML text in the HTML content. You can only get it in the Design content. (this next code doesn't do the job: string htmlContentStr = Editor1.Content).
With F it is possible to get it in the HTML content (it does this by default), but to get your changes back in HTML is impossible. (this next code doesn't do the job: string htmlContentStr = FCKeditor1.Value).
So what I need is a HTML editor that is possible to put HTML text in HTML content, a user can make changes in the designcontent and after the changes 're make it must be possible to get the HTMLcontent and put it away in a string or database.
Is this possible or do I need a commercial one to get this feature?
If my question isn't clear, please let me know.
Thnx
I've used XStandard quite easily and it let me manipulate the HTML. I didn't bother using it as a control, but just read and wrote (escaped) the HTML where needed into the asp output.

Why does it make a difference where I include the jQuery script file?

On my master page (for all pages in my site) I have a ToolkitScriptManager.
On my content page, there are a series of hyperlinks and divs for collapsible functionality.
The code to show/hide the panels work like the following:
$(document).ready(function() {
// Hookup event handlers and execute HTML DOM-related code
$('#nameHyperLink').click(function() {
var div = $('#nameDiv');
var link = $('#nameHyperLink');
if (div.css('display') == 'none') {
link.text('Hide Data');
div.show('100');
}
else {
link.text('Show Data');
div.hide('100');
}
});
});
If I include a ScriptReference to the jQuery 1.4.2 file in the toolkitscriptmanager, the javascript code is executed incorrectly on the page (only the text for the hyperlink is changed, the div is not actually shown.) However, if I don't include the jQuery file in the ToolkitScriptManager and instead include it in the content page, it works correctly.
I'm a Javascript/jQuery newbie, and this makes no sense at all. What's going on here?
Positioning of the script include is important for the jQuery ref. If you look at your generated source I would bet the tag is below the script function(). You should make sure that the jQuery reference comes as early as you can get it in the page source.
Try moving the jQuery library reference into the head of your master page, that should work. Otherwise post up some source!
Like Tj says... should probably be in the head section of your master page. Also, it's nice to link to Google's version of this library, because chances are your users will already have it cached. For instance, look at the source for this very page.
The two most probable causes here are $ not being defined yet (see Tj's answer) and $ getting defined by another library, such as prototype.
I would highly suggest you look into using Firebug's javascript debugger, or at least take a look at Firefox's built in error console (Tools -> Error console). That will give you a much better clue what is going on other than "it's not working."

Categories